fix(ADA-1751): [TR] ADA Loading play not announced

src/components/spinner/_spinner.scss

@@ -47,3 +47,11 @@
     }
   }
 }
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}

src/components/spinner/spinner.tsx

@@ -1,16 +1,32 @@
 import style from '../../styles/style.scss';
-import {h, Component, VNode} from 'preact';
+import {h, Component, VNode, RefObject, createRef} from 'preact';
+import {Text, withText} from 'preact-i18n';
 
 const COMPONENT_NAME = 'Spinner';
 
+const translates = {
+  loading: <Text id="spinner.loading">Loading</Text>
+};
+
 /**
  * Spinner component
  *
  * @class Spinner
  * @example <Spinner />
  * @extends {Component}
  */
+@withText(translates)
 class Spinner extends Component<any, any> {
+  loadingSpan: RefObject<HTMLElement> = createRef<HTMLElement>();
+
+  componentDidMount() {
+    setTimeout(() => {
+      if (this.loadingSpan.current) {
+        this.loadingSpan.current.innerText = this.props.loading;
+      }
+    }, 1000);
+  }
+
   /**
    * render component
    *
@@ -19,12 +35,15 @@ class Spinner extends Component<any, any> {
    */
   render(): VNode<any> {
     return (
-      <div className={style.spinner}>
-        {Array(8)
-          .fill(0)
-          .map((val, i) => (
-            <span key={i + 1} />
-          ))}
+      <div>
+        <div className={style.spinner}>
+          {Array(8)
+            .fill(0)
+            .map((val, i) => (
+              <span key={i + 1} />
+            ))}
+        </div>
+        <span className={style.srOnly} aria-live="assertive" ref={this.loadingSpan}></span>
       </div>
     );
   }

translations/en.i18n.json

@@ -70,7 +70,7 @@
       "advanced_captions_settings": "Advanced captions settings"
     },
     "overlay": {
-      "close": "Close"
+      "close": "Close dialog"
     },
     "error": {
       "default_error_title": "Something went wrong",
@@ -140,6 +140,10 @@
     },
     "watermark": {
       "watermark_alt_text": "Watermark"
+    },
+    "spinner": {
+      "loading": "Loading",
+      "playbackStarted": "Playback started"
     }
   }
 }