Add page title change announcer for screen readers

[DISCO-181]

Author: RoyEJohnson

src/app/components/shell/header/announce-page-title.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default function announcePageTitle(title: string) {
+    const el = document.getElementById('page-title-confirmation');
+
+    el?.dispatchEvent(new window.CustomEvent('page-title', {
+        detail: title
+    }));
+}
+
+export function PageTitleConfirmation() {
+    const [docTitle, setDocTitle] = React.useState('');
+    const ref = React.useRef(null);
+
+    React.useEffect(
+        () => {
+            const el = ref.current as unknown as Element; // it's not null
+            const listener = ((e: CustomEvent) => {
+                setDocTitle(e.detail);
+            }) as EventListener;
+
+            el.addEventListener('page-title', listener);
+            return () => el.removeEventListener('page-title', listener);
+        },
+        []
+    );
+
+    return (
+        <div id="page-title-confirmation" ref={ref} className="sr-only" aria-live="polite">
+            {`Loaded page "${docTitle}"`}
+        </div>
+    );
+}

src/app/components/shell/header/header.js

@@ -3,16 +3,15 @@ import JITLoad from '~/helpers/jit-load';
 import {useStickyData} from '../shared.js';
 import Menus from './menus/menus';
 import $ from '~/helpers/$';
+import { PageTitleConfirmation } from './announce-page-title';
 import './header.scss';
 
 function doSkipToContent(event) {
     event.preventDefault();
     const mainEl = document.getElementById('main');
-    const focusableItems = Array.from(mainEl.querySelectorAll($.focusable));
-
-    if (focusableItems.length > 0) {
-        const target = focusableItems[0];
+    const target = mainEl.querySelector($.focusable);
 
+    if (target) {
         $.scrollTo(target);
         target.focus();
     }
@@ -24,12 +23,14 @@ function SkipToContent() {
     );
 }
 
+
 export default function Header() {
     const stickyData = useStickyData();
 
     return (
         <div className="page-header">
             <SkipToContent />
+            <PageTitleConfirmation />
             <JITLoad importFn={() => import('./sticky-note/sticky-note.js')} stickyData={stickyData} />
             <Menus />
         </div>

src/app/helpers/data.d.ts

@@ -3,3 +3,7 @@
 export function useToggle(
     initialState?: boolean
 ): [boolean, (state?: boolean) => boolean];
+
+export function htmlToText(
+    html: string
+): string;