hds-tooltip - Implement a11y toggle content pattern

[dchyun]

📌 Summary
This PR implements usage of the aria-controls attribute in the hds-tooltip modifier to align show/hide behavior across the repo as follows in the initiative from HDS-3581.

The hds-tooltip modifier is used in the TooltipButton.

🛠️ Detailed description
Currently in the hds-tooltip modifier, the toggled content does not follow the proper a11y structure for toggled content, or leverage aria-controls.

As per a11y guidance in HDS-3581, all togged content should follow a pattern leveraging aria-controls, and all toggled containers should not be removed from the DOM on each toggle. They should always be present, and only the content inside them is added and removed.

Currently the hds-tooltip follows a pattern where the entire content block is added and removed on each toggle, and any aria- attributes are set to the id of this removable block.

In this PR a new hds-tooltip-container block is now added as a sibling of the tooltip button, and is present in the DOM at all times. The yielded content is removed or added inside this container based on the tooltip visibility.

The aria-describedby and aria-controls attributes of the tooltip element now reference the hds-tooltip-container.

Note: The tooltip library leveraged, tippy.js, does not support this DOM structure out of the box or with any properties, so the container element has been created manually, and the tippy propery appendTo has been used to attach the tooltip content to this element.

📸 Screenshots

Before

Inactive

Active

After

Inactive

Active

🔗 External links

Jira ticket: HDS-4327

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Feb 3, 2025 10:03pm
hds-website	✅ Ready (Inspect)	Visit Preview	Feb 3, 2025 10:03pm

[dchyun]

In smoke testing this change in nomad, there is a failing test that occurs due to this proposed change. The failed test is related to the job status component which contains a Hds::TooltipButton.

Update: Making some code changes to the implementation made it so this failed test can be avoided.

[shleewhite]

Works great with VoiceOver! Just had one non-blocking note on the changelog.

[KristinLBradley]

Looks good!

[alex-ju]

is this a sign that our consumers may require some adjustments in tests as well? we'll likely find in our smoke testing.

[dchyun]

I did smoke test this change in cloud ui, atlas, and nomad, and observed no failing tests. But this change does cause DOM changes so it is possible there could be failing tests introduced in other consumer repos.