fix: Ensure aria-hidden applies to shadow root

[khiga8]

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 when aria-hidden is 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", when aria-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-hidden being 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, 1969 despite toggling.

After (no sound):

After.mp4

video description: I'm on the demo page with the developer console open. The markup shows aria-hidden being 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, 1969 and With aria-hidden as we'd expect.

[Copilot]

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’s observedAttributes so attribute changes are handled.
• Introduced a private #updateRenderRootContent method to wrap content in a hidden <span> when aria-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>

[JoyceZhu]

🚀

[jonrohan]

Nice catch