Merge pull request #315 from github/kh-support-aria-hidden

fix: Ensure aria-hidden applies to shadow root

Author: khiga8

examples/index.html

@@ -200,6 +200,14 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
+  <h2>With Aria Hidden</h2>
+
+  <button class="js-toggle-aria-hidden">
+    With aria-hidden
+    <relative-time aria-hidden="true" datetime="1970-01-01T00:00:00.000Z">
+    </relative-time>
+  </button>
+
   <!-- <script type="module" src="../dist/index.js"></script> -->
   <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
   <script>
@@ -213,6 +221,17 @@ <h2>Localised Dates</h2>
     setTimeout(() => {
       document.getElementById('lazy').setAttribute('datetime', new Date().toJSON())
     }, 1000)
+
+    const toggleAriaHidden = (event) => {
+      const relativeTimeElement = event.currentTarget.querySelector('relative-time')
+      if (relativeTimeElement.getAttribute('aria-hidden') === 'true') {
+        relativeTimeElement.setAttribute('aria-hidden', 'false')
+      } else {
+        relativeTimeElement.setAttribute('aria-hidden', 'true')
+      }
+    }
+    const button = document.querySelector('.js-toggle-aria-hidden')
+    button.addEventListener('click', toggleAriaHidden)
   </script>
 </body>
 </html>

src/relative-time-element.ts

@@ -112,6 +112,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'datetime',
       'lang',
       'title',
+      'aria-hidden',
     ]
   }
 
@@ -201,6 +202,17 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     return `${this.prefix} ${formatter.format(date)}`.trim()
   }
 
+  #updateRenderRootContent(content: string | null): void {
+    if (this.hasAttribute('aria-hidden') && this.getAttribute('aria-hidden') === 'true') {
+      const span = document.createElement('span')
+      span.setAttribute('aria-hidden', 'true')
+      span.textContent = content
+      ;(this.#renderRoot as Element).replaceChildren(span)
+    } else {
+      this.#renderRoot.textContent = content
+    }
+  }
+
   #onRelativeTimeUpdated: ((event: RelativeTimeUpdatedEvent) => void) | null = null
   get onRelativeTimeUpdated() {
     return this.#onRelativeTimeUpdated
@@ -459,10 +471,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     }
 
     if (newText) {
-      this.#renderRoot.textContent = newText
+      this.#updateRenderRootContent(newText)
     } else if (this.shadowRoot === this.#renderRoot && this.textContent) {
       // Ensure invalid dates fall back to lightDOM text content
-      this.#renderRoot.textContent = this.textContent
+      this.#updateRenderRootContent(this.textContent)
     }
 
     if (newText !== oldText || newTitle !== oldTitle) {

test/relative-time.js

@@ -130,6 +130,7 @@ suite('relative-time', function () {
       ...Object.getOwnPropertyNames(HTMLElement.prototype),
     ]
     const observedAttributes = new Set(RelativeTimeElement.observedAttributes)
+    observedAttributes.delete('aria-hidden') // Standard HTML attribute, no need for custom getter
     for (const member of members) observedAttributes.delete(member)
     assert.empty([...observedAttributes], 'observedAttributes that arent class members')
   })
@@ -1872,6 +1873,40 @@ suite('relative-time', function () {
     }
   })
 
+  suite('[aria-hidden]', async () => {
+    test('[aria-hidden="true"] applies to shadow root', async () => {
+      const now = new Date().toISOString()
+      const time = document.createElement('relative-time')
+      time.setAttribute('datetime', now)
+      time.setAttribute('aria-hidden', 'true')
+      await Promise.resolve()
+
+      const span = time.shadowRoot.querySelector('span')
+      assert.equal(span.getAttribute('aria-hidden'), 'true')
+    })
+
+    test('[aria-hidden="false"] applies to shadow root', async () => {
+      const now = new Date().toISOString()
+      const time = document.createElement('relative-time')
+      time.setAttribute('datetime', now)
+      time.setAttribute('aria-hidden', 'false')
+      await Promise.resolve()
+
+      assert.isNull(time.shadowRoot.querySelector('[aria-hidden]'), 'Expected no aria-hidden to be present')
+      assert.isNull(time.shadowRoot.querySelector('span'), 'Expected no span to be present')
+    })
+
+    test('no aria-hidden applies to shadow root', async () => {
+      const now = new Date().toISOString()
+      const time = document.createElement('relative-time')
+      time.setAttribute('datetime', now)
+      await Promise.resolve()
+
+      assert.isNull(time.shadowRoot.querySelector('[aria-hidden]'), 'Expected no aria-hidden to be present')
+      assert.isNull(time.shadowRoot.querySelector('span'), 'Expected no span to be present')
+    })
+  })
+
   suite('legacy formats', function () {
     const referenceDate = '2022-10-24T14:46:00.000Z'
     const tests = new Set([