Update countdown text via Text#nodeValue

**Why**: To restore previous behavior of screen reader atomic announcement including time remaining.
18F · Mar 15, 2022 · 0c4c4e9 · 0c4c4e9
1 parent 4258680
commit 0c4c4e9
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/app/javascript/packages/countdown-element/index.ts b/app/javascript/packages/countdown-element/index.ts
@@ -41,6 +41,14 @@ export class CountdownElement extends HTMLElement {
     return this.getAttribute('data-start-immediately') === 'true';
   }
 
+  get #textNode(): Text {
+    if (!this.firstChild) {
+      this.appendChild(this.ownerDocument.createTextNode(''));
+    }
+
+    return this.firstChild as Text;
+  }
+
   start(): void {
     this.stop();
     this.setTimeRemaining();
@@ -54,7 +62,7 @@ export class CountdownElement extends HTMLElement {
   setTimeRemaining(): void {
     const { timeRemaining } = this;
 
-    this.textContent = [
+    this.#textNode.nodeValue = [
       t('datetime.dotiw.minutes', { count: Math.floor(timeRemaining / 60000) }),
       t('datetime.dotiw.seconds', { count: Math.floor(timeRemaining / 1000) % 60 }),
     ].join(t('datetime.dotiw.two_words_connector'));