fix: Ensure aria-hidden applies to shadow root #315
Merged
Conversation
This file contains hidden or 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
khiga8 changed the title 
There was a problem hiding this comment.
Pull Request Overview
This PR ensures that when aria-hidden="true" is set on a <relative-time> element, the attribute also applies inside its shadow root, hiding the rendered text from assistive technologies.
- Added
'aria-hidden'to the element’sobservedAttributesso attribute changes are handled. - Introduced a private
#updateRenderRootContentmethod to wrap content in a hidden<span>whenaria-hidden="true". - Added new tests to verify shadow-root behavior and updated the example page with a toggle button.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| test/relative-time.js | Added [aria-hidden] test suite to assert shadow-root behavior |
| src/relative-time-element.ts | Observes aria-hidden and updates rendering via #updateRenderRootContent |
| examples/index.html | Demo button toggling aria-hidden on <relative-time> |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
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.
Relates to: https://github.com/github/pull-requests/issues/17192
Problem
When
aria-hidden="true"is set on an relative-time element, the attribute doesn't always persist into the shadow root. As a result, even whenaria-hiddenis applied, the text rendered in relative-time can end up composing the accessible name (instead of being hidden from the AT tree).Solution
This makes update to render the text content within
aria-hidden="true", whenaria-hidden="true"is set on the shadow root.Demo
Before (no sound):
Before.mp4
video description: I'm on the demo page with the developer console open. The markup shows
aria-hiddenbeing toggled between true and false relative-time upon pressing the button. I switch to the accessibility tree mode. I see the accessible name for the button remains:With aria-hidden on Dec 31, 1969despite toggling.After (no sound):
After.mp4
video description: I'm on the demo page with the developer console open. The markup shows
aria-hiddenbeing toggled between true and false relative-time upon pressing the button. I switch to the accessibility tree mode. I see the accessible name for the button toggle between:With aria-hidden on Dec 31, 1969andWith aria-hiddenas we'd expect.