Add aria-hidden support

Author: khiga8

examples/index.html

@@ -200,17 +200,17 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <p>
+
+  <button class="js-toggle-aria-hidden">
     With aria-hidden
-    <relative-time aria-hidden="true" datetime="1970-01-01T00:00:00.000Z" format="datetime">
-      Jan 1 1970
+    <relative-time aria-hidden="true" datetime="1970-01-01T00:00:00.000Z">
     </relative-time>
-  </p>
-  <!-- <script type="module" src="../dist/index.js"></script> -->
-  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
+  </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>
     document.body.addEventListener('relative-time-updated', event => {
-      console.log('event from', event.target, event)
+      // console.log('event from', event.target, event)
     });
     document.getElementById('dynamic1').date = new Date()
     document.getElementById('dynamic2').date = new Date(Date.now() - 30000)
@@ -219,6 +219,19 @@ <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',
     ]
   }
 
@@ -460,13 +461,16 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
 
     if (newText) {
       if (this.hasAttribute('aria-hidden') && this.getAttribute('aria-hidden') === 'true') {
-        (this.#renderRoot as Element).innerHTML = `<span aria-hidden="true">${newText}</span>`;
+        const span = document.createElement('span')
+        span.setAttribute('aria-hidden', 'true')
+        span.textContent = newText
+        ;(this.#renderRoot as Element).replaceChildren(span)
       } else {
-        this.#renderRoot.textContent = newText;
+        this.#renderRoot.textContent = newText
       }
     } else if (this.shadowRoot === this.#renderRoot && this.textContent) {
       // Ensure invalid dates fall back to lightDOM text content
-      this.#renderRoot.textContent = this.textContent;
+      this.#renderRoot.textContent = this.textContent
     }
 
     if (newText !== oldText || newTitle !== oldTitle) {

test/relative-time.js

@@ -122,14 +122,15 @@ suite('relative-time', function () {
     assert.notEqual(nextDisplay, display)
   })
 
-  test('all observedAttributes have getters', async () => {
+  test('all observedAttributes have getters)', async () => {
     const members = [
       ...Object.getOwnPropertyNames(RelativeTimeElement.prototype).map(n =>
         n.replace(/([A-Z])/g, c => `-${c.toLowerCase()}`),
       ),
       ...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.querySelector('[aria-hidden]'), 'Expected no aria-hidden to be present')
+      assert.isNull(time.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.querySelector('[aria-hidden]'), 'Expected no aria-hidden to be present')
+      assert.isNull(time.querySelector('span'), 'Expected no span to be present')
+    })
+  })
+
   suite('legacy formats', function () {
     const referenceDate = '2022-10-24T14:46:00.000Z'
     const tests = new Set([