Announce Page Title when Routing

client/components/App/App.css

@@ -97,12 +97,13 @@ main.container-fluid .row {
 nav .logo.navbar-brand {
     font-weight: 700;
     font-size: 1.6em;
-    /* The logo is focused on every page navigation, making this particular
-    outline quite distracting. It looks like part of the logo design.
-    Furthermore, the top left of the page is where focus is implicitly
-    expected to be, so the outline is not really adding anything. And
-    Browsers are not consistently showing the outline anyway. */
-    outline: none;
+    outline: 0;
+    border-bottom: 2px solid transparent;
+}
+
+nav .logo.navbar-brand:focus,
+nav .logo.navbar-brand:hover {
+    border-bottom: 2px solid black;
 }
 
 a {

client/components/App/App.jsx

@@ -12,6 +12,7 @@ import { ME_QUERY } from './queries';
 import useSigninUrl from './useSigninUrl';
 import SkipLink from '../SkipLink';
 import './App.css';
+import TitleAnnouncer from '@client/utils/TitleAnnouncer';
 
 const App = () => {
     const location = useLocation();
@@ -135,6 +136,7 @@ const App = () => {
             <Container fluid>
                 <div>{renderRoutes(routes)}</div>
             </Container>
+            <TitleAnnouncer />
         </ScrollFixer>
     );
 };

client/components/Reports/SummarizeTestPlanReports.jsx

@@ -17,7 +17,7 @@ const SummarizeTestPlanReports = ({ testPlanReports }) => {
         return (
             <FullHeightContainer id="main" as="main" tabIndex="-1">
                 <Helmet>
-                    <title>ARIA-AT Test Reports</title>
+                    <title>Test Reports | ARIA-AT</title>
                 </Helmet>
                 <h1>Test Reports</h1>
                 <p>
@@ -59,7 +59,7 @@ const SummarizeTestPlanReports = ({ testPlanReports }) => {
     return (
         <FullHeightContainer id="main" as="main" tabIndex="-1">
             <Helmet>
-                <title>ARIA-AT Test Reports</title>
+                <title>Test Reports | ARIA-AT</title>
             </Helmet>
             <h1>Test Reports</h1>
             <h2>Introduction</h2>

client/components/TestQueue/index.jsx

@@ -197,7 +197,7 @@ const TestQueue = () => {
         return (
             <Container id="main" as="main" tabIndex="-1">
                 <Helmet>
-                    <title>{noTestPlansMessage} | ARIA-AT</title>
+                    <title>Test Queue: No Test Plans Available | ARIA-AT</title>
                 </Helmet>
                 <h2 data-testid="test-queue-no-test-plans-h2">
                     {noTestPlansMessage}
@@ -242,7 +242,7 @@ const TestQueue = () => {
     return (
         <Container id="main" as="main" tabIndex="-1">
             <Helmet>
-                <title>{`Test Queue | ARIA-AT`}</title>
+                <title>Test Queue | ARIA-AT</title>
             </Helmet>
             <h1>Test Queue</h1>
             <p data-testid="test-queue-instructions">

client/components/TestRun/index.jsx

@@ -480,7 +480,7 @@ const TestRun = () => {
         const isFirstTest = index === 0;
         const isLastTest = currentTest.seq === tests.length;
 
-        let primaryButtons = []; // These are the list of buttons that will appear below the tests
+        let primaryButtons; // These are the list of buttons that will appear below the tests
         let forwardButtons = []; // These are buttons that navigate to next tests and continue
 
         const nextButton = (
@@ -805,8 +805,7 @@ const TestRun = () => {
             <Helmet>
                 <title>
                     {hasTestsToRun
-                        ? `${currentTest.title} for ${testPlanTarget.title} ` +
-                          `| ARIA-AT`
+                        ? `Testing task: ${currentTest.title} (${testPlanTarget.title}) | ARIA-AT`
                         : 'No tests for this AT and Browser | ARIA-AT'}
                 </title>
             </Helmet>

client/utils/ScrollFixer.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { useLayoutEffect } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 /**
  * Fixes scroll issues inherent in single page apps such as jumping the scroll
@@ -12,14 +12,14 @@ const ScrollFixer = ({ children }) => {
     const location = useLocation();
 
     useLayoutEffect(() => {
+        if (!location.hash) {
+            return;
+        }
+
         const scrollTop = () => {
             window.scroll(0, 0);
-            // When switching pages, the focus should jump to the top. Otherwise
-            // screen readers' focus might be lingering in a nonsensical
-            // location partly down the page.
-            document.querySelector('a').focus();
         };
-        if (!location.hash) return scrollTop();
+
         (async () => {
             // The point at which the window jumping down the page would become
             // disorienting. This must include time for the page's API requests

client/utils/TitleAnnouncer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+
+const TitleAnnouncer = () => {
+    const location = useLocation();
+
+    if (location.hash) {
+        return null;
+    }
+
+    const [title, setTitle] = React.useState('');
+    const onHelmetChange = ({ title }) => setTitle(title);
+
+    return (
+        <>
+            <span aria-live="assertive" aria-atomic="true" className="sr-only">
+                {title}
+            </span>
+
+            <Helmet onChangeClientState={onHelmetChange} />
+        </>
+    );
+};
+
+export default TitleAnnouncer;