hds-tooltip - Implement a11y toggle content pattern
#2648
+50
−7
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
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 Update: Making some code changes to the implementation made it so this failed test can be avoided. |
2 tasks
shleewhite
previously approved these changes
Jan 22, 2025
dchyun
force-pushed
the
dchyun/tooltip-implement-aria-controls
branch
from
4111ccc to
36dc044
Compare
zamoore
reviewed
Jan 30, 2025
| await render( | ||
| hbs`<Hds::TooltipButton @text="Hello" data-test-tooltip-button>info</Hds::TooltipButton>` | ||
| ); | ||
| await focus('[data-test-tooltip-button]'); | ||
| assert.dom('[data-test-tooltip-button]').hasAttribute('aria-describedby'); | ||
| assert.dom('[data-tippy-root]').hasAttribute('id'); | ||
| assert.dom('[data-test-tooltip-button]').hasAttribute('aria-controls'); | ||
| assert.dom('.hds-tooltip-container').hasAttribute('id'); | ||
|
|
||
| assert.strictEqual( |
There was a problem hiding this comment.
Nit: I think you could do this with DOM assertions
const tooltipContainerId = this.element.querySelector('.hds-tooltip-container').getAttribute('id');
assert.dom('[data-test-tooltip-button]').hasAttribute('aria-describedby', tooltipContainerId);
| this.element.querySelector('.hds-tooltip-container').getAttribute('id') | ||
| ); | ||
|
|
||
| assert.strictEqual( |
There was a problem hiding this comment.
And the same with this one.
zamoore
approved these changes
Jan 30, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Summary
This PR implements usage of the
aria-controlsattribute in thehds-tooltipmodifier to align show/hide behavior across the repo as follows in the initiative from HDS-3581.The
hds-tooltipmodifier is used in theTooltipButton.🛠️ Detailed description
Currently in the
hds-tooltipmodifier, the toggled content does not follow the proper a11y structure for toggled content, or leveragearia-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-tooltipfollows a pattern where the entire content block is added and removed on each toggle, and anyaria-attributes are set to theidof this removable block.In this PR a new
hds-tooltip-containerblock 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-describedbyandaria-controlsattributes of the tooltip element now reference thehds-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
appendTohas 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
💬 Please consider using conventional comments when reviewing this PR.