From f1c6b2ebc72689efa30dffe7657b72305a9ae628 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Fri, 2 May 2025 10:19:19 -0400 Subject: [PATCH 01/10] Support aria-hidden --- examples/index.html | 6 ++++++ src/relative-time-element.ts | 8 ++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/examples/index.html b/examples/index.html index 13d91ba..6ea08e2 100644 --- a/examples/index.html +++ b/examples/index.html @@ -200,6 +200,12 @@

Localised Dates

+

+ With aria-hidden + +

+ + + diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 3de41de..e3f3c0a 100644 --- a/src/relative-time-element.ts +++ b/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 = ``; + 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) { diff --git a/test/relative-time.js b/test/relative-time.js index 0d13096..d97dd55 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -122,7 +122,7 @@ 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()}`), @@ -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.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([ From 7cf18282d5105f9fe947738f75625d377253e856 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Wed, 7 May 2025 11:32:04 -0400 Subject: [PATCH 03/10] add example --- test/relative-time.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/relative-time.js b/test/relative-time.js index d97dd55..937798f 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -122,7 +122,7 @@ 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()}`), From 63575190bcfc78d1d636d51bff820b4f723d91ee Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Wed, 7 May 2025 11:35:05 -0400 Subject: [PATCH 04/10] Fix issues --- examples/index.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/examples/index.html b/examples/index.html index 956c3c8..d02171a 100644 --- a/examples/index.html +++ b/examples/index.html @@ -200,17 +200,17 @@

Localised Dates

- - - + + + From e50de7fa8a75aa827daa543c1a6e803d2d7a5ca4 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Wed, 7 May 2025 11:57:59 -0400 Subject: [PATCH 05/10] update render root content --- src/relative-time-element.ts | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index e3f3c0a..80dc977 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -202,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 @@ -460,17 +471,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor } if (newText) { - if (this.hasAttribute('aria-hidden') && this.getAttribute('aria-hidden') === 'true') { - 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.#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) { From 9efd32a8e9349ccf4b6c494b7f7714b15698ebe4 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Wed, 7 May 2025 12:43:08 -0400 Subject: [PATCH 06/10] Toggle aria-hidden --- examples/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/index.html b/examples/index.html index d02171a..886af5c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -200,6 +200,8 @@

Localised Dates

+

With Aria Hidden

+