Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: use inert on host elements instead of aria-hidden when host element is hidden #11056

Merged
merged 4 commits into from
Dec 16, 2024

Conversation

driskull
Copy link
Member

@driskull driskull commented Dec 13, 2024

Related Issue: #10731

Summary

This will address the following Chrome console error caused by using the ariaHidden prop (after #10310):

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: span
Ancestor with aria-hidden: <calcite-popover reference-element=​"reference-element" placement=​"auto" offset-distance=​"6" offset-skidding=​"0" text-close=​"Close" aria-hidden=​"true" aria-live=​"polite" id=​"calcite-popover-a872ffbb-85e1-5c2c-6f14-8108c4821728" role=​"dialog" overlay-positioning=​"absolute" scale=​"m" calcite-hydrated>​…​​#shadow-root (open)<div style=​"width:​ 300px;​ padding:​12px 16px;​">​…​​slot

BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 13, 2024
@driskull driskull added no changelog entry Use the commit override to avoid a changelog entry skip visual snapshots Pull requests that do not need visual regression testing. labels Dec 13, 2024
@driskull driskull marked this pull request as ready for review December 13, 2024 23:23
@driskull driskull requested a review from jcfranco December 13, 2024 23:26
@driskull driskull changed the title fix: use inert on host elements instead of aria-hidden fix: use inert on host elements instead of aria-hidden when host element is hidden Dec 13, 2024
@driskull
Copy link
Member Author

I wasn't sure about combobox-item or icon so I left them alone.

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@driskull driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed skip visual snapshots Pull requests that do not need visual regression testing. labels Dec 16, 2024
@driskull driskull merged commit 7ca5965 into dev Dec 16, 2024
17 checks passed
@driskull driskull deleted the dris0000/inert-host-elements branch December 16, 2024 18:15
@github-actions github-actions bot added this to the 2024-12-17 - Dec Milestone milestone Dec 16, 2024
benelan pushed a commit that referenced this pull request Feb 8, 2025
…ent is hidden (#11056)

**Related Issue:** #10731

## Summary

This will address the following Chrome console error caused by using the
`ariaHidden` prop (after #10310):

> Blocked aria-hidden on an element because its descendant retained
focus. The focus must not be hidden from assistive technology users.
Avoid using aria-hidden on a focused element or its ancestor. Consider
using the inert attribute instead, which will also prevent focus. For
more details, see the aria-hidden section of the WAI-ARIA specification
at https://w3c.github.io/aria/#aria-hidden.
Element with focus: span
Ancestor with aria-hidden: <calcite-popover
reference-element=​"reference-element" placement=​"auto"
offset-distance=​"6" offset-skidding=​"0" text-close=​"Close"
aria-hidden=​"true" aria-live=​"polite"
id=​"calcite-popover-a872ffbb-85e1-5c2c-6f14-8108c4821728"
role=​"dialog" overlay-positioning=​"absolute" scale=​"m"
calcite-hydrated>​…​</calcite-popover>​#shadow-root (open)<div
style=​"width:​ 300px;​ padding:​12px
16px;​">​…​</div>​slot</calcite-popover>

BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. no changelog entry Use the commit override to avoid a changelog entry pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants