From 6f30cc07ef64a83912ce7db2bc45e0c00c2ae787 Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 14:15:36 +0100 Subject: [PATCH 1/7] Add custom focus indicator to logo anchor. --- client/components/App/App.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/client/components/App/App.css b/client/components/App/App.css index a55dd4a93..fd4482963 100644 --- a/client/components/App/App.css +++ b/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 { From e00fdc2ba71ce3efd604ade8a7d918e2b9f34b7e Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 14:16:36 +0100 Subject: [PATCH 2/7] Use TitleAnnouncer component to set focus and announce page title when routing. --- client/components/App/App.jsx | 2 ++ client/utils/ScrollFixer.jsx | 12 ++++++------ client/utils/TitleAnnouncer.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 client/utils/TitleAnnouncer.js diff --git a/client/components/App/App.jsx b/client/components/App/App.jsx index 01c0656ae..4412c6d23 100644 --- a/client/components/App/App.jsx +++ b/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(); @@ -35,6 +36,7 @@ const App = () => { return ( + { 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 diff --git a/client/utils/TitleAnnouncer.js b/client/utils/TitleAnnouncer.js new file mode 100644 index 000000000..19af41eae --- /dev/null +++ b/client/utils/TitleAnnouncer.js @@ -0,0 +1,31 @@ +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 titleRef = React.createRef(); + const onHelmetChange = ({ title }) => setTitle(title); + + React.useEffect(() => { + if (titleRef.current) titleRef.current.focus(); + }, [location.pathname]); + + return ( + <> +

+ {title} +

+ + + + ); +}; + +export default TitleAnnouncer; From c1a89e860095529e49a2ae0b31a63e8fa2583c27 Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 14:16:54 +0100 Subject: [PATCH 3/7] Use consistent page title formatting. --- client/components/Reports/SummarizeTestPlanReports.jsx | 2 +- client/components/TestQueue/index.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/Reports/SummarizeTestPlanReports.jsx b/client/components/Reports/SummarizeTestPlanReports.jsx index 7beca2eee..43206afe7 100644 --- a/client/components/Reports/SummarizeTestPlanReports.jsx +++ b/client/components/Reports/SummarizeTestPlanReports.jsx @@ -59,7 +59,7 @@ const SummarizeTestPlanReports = ({ testPlanReports }) => { return ( - ARIA-AT Test Reports + Test Reports | ARIA-AT

Test Reports

Introduction

diff --git a/client/components/TestQueue/index.jsx b/client/components/TestQueue/index.jsx index e26053dd0..ebc35fe6b 100644 --- a/client/components/TestQueue/index.jsx +++ b/client/components/TestQueue/index.jsx @@ -197,7 +197,7 @@ const TestQueue = () => { return ( - {noTestPlansMessage} | ARIA-AT + Test Queue: No Test Plans Available | ARIA-AT

{noTestPlansMessage} @@ -242,7 +242,7 @@ const TestQueue = () => { return ( - {`Test Queue | ARIA-AT`} + Test Queue | ARIA-AT

Test Queue

From e7d587fb7e7445e034b920c2b6e7ffc0607b9201 Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 14:55:58 +0100 Subject: [PATCH 4/7] Use similar worded page title and h1 on test run page. --- client/components/TestRun/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx index f41de2e88..30615839d 100644 --- a/client/components/TestRun/index.jsx +++ b/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 = () => { {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'} From 4ae12d86f2c7ecbed9898788699e5af94d129af5 Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 16:03:56 +0100 Subject: [PATCH 5/7] Use consistent page title format. --- client/components/Reports/SummarizeTestPlanReports.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/Reports/SummarizeTestPlanReports.jsx b/client/components/Reports/SummarizeTestPlanReports.jsx index 43206afe7..35e290265 100644 --- a/client/components/Reports/SummarizeTestPlanReports.jsx +++ b/client/components/Reports/SummarizeTestPlanReports.jsx @@ -17,7 +17,7 @@ const SummarizeTestPlanReports = ({ testPlanReports }) => { return ( - ARIA-AT Test Reports + Test Reports | ARIA-AT

Test Reports

From b4f3b88cba3c932c30b92ec7aa02eb78de1a4f09 Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 16:11:06 +0100 Subject: [PATCH 6/7] Use alert semantics to convey page title change. --- client/components/App/App.jsx | 2 +- client/utils/TitleAnnouncer.js | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/client/components/App/App.jsx b/client/components/App/App.jsx index 4412c6d23..5cb5347cd 100644 --- a/client/components/App/App.jsx +++ b/client/components/App/App.jsx @@ -36,7 +36,6 @@ const App = () => { return ( - {

{renderRoutes(routes)}
 + ); }; diff --git a/client/utils/TitleAnnouncer.js b/client/utils/TitleAnnouncer.js index 19af41eae..edebebd3f 100644 --- a/client/utils/TitleAnnouncer.js +++ b/client/utils/TitleAnnouncer.js @@ -10,18 +10,13 @@ const TitleAnnouncer = () => { } const [title, setTitle] = React.useState(''); - const titleRef = React.createRef(); const onHelmetChange = ({ title }) => setTitle(title); - React.useEffect(() => { - if (titleRef.current) titleRef.current.focus(); - }, [location.pathname]); - return ( <> -

+ {title} -

+ From 63ec8f8aad0c604fb615b4adc740c3b85a1d05a2 Mon Sep 17 00:00:00 2001 From: Job van Achterberg Date: Mon, 29 Nov 2021 16:18:25 +0100 Subject: [PATCH 7/7] Use assertive/atomic live region instead of explicit alert semantics. --- client/utils/TitleAnnouncer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/utils/TitleAnnouncer.js b/client/utils/TitleAnnouncer.js index edebebd3f..768966b07 100644 --- a/client/utils/TitleAnnouncer.js +++ b/client/utils/TitleAnnouncer.js @@ -14,7 +14,7 @@ const TitleAnnouncer = () => { return ( <> - + {title}