Announce Page Title when Routing

[jkva]

This PR addresses the following item from PAC's "ARIA-AT App Screen Reader Accessibility Observations" document:

Home Page

At page load, the document has no text in its <title> element. This is filled in by JavaScript once the content has been rendered, but an initially untitled page is considered invalid HTML and causes a screen reader to only announce the URL of the app when users navigate to it. This problem can be observed for all pages. Once the page title has been filled out, it only reads: "ARIA-AT App". This doesn't inform users that they are on the home page.

Test Reports/ARIA-AT Reports

When the page title becomes available, it reads: " ARIA-AT Reports". This doesn't match the "Test Reports" link text in the nav bar, nor does it include the "ARIA-AT App" context that is present on the home, Test Queue and Settings pages.

Testing Task Page

After activating the test plan name link in the " Test Plan" column, or "Start testing" link in the "Actions" column, the user is taken to an initially untitled page (as already pointed out for the home page earlier in this document). Once the content has loaded, there is no screen reader feedback whatsoever, so testers may potentially be left wondering what, if anything, has happened.

Once the content of a test within a test plan has loaded, the page title is set to the AT/browser combination that the user is testing. For example, "NVDA Latest with Firefox Latest". This doesn't reflect where the user is, which is a specific test within a specific test plan. It also doesn't include the ARIA-AT app context that is included in the titles of other pages.

---

Effective changes:

• Add focus and hover styling to the "Home" anchor, interactive elements should not have an invisible focus or hover indicator;
• scroll the page to the top unless a location fragment exists, announce the page title via a visually-hidden paragraph;
• use a consistent page title format across the application; and
• introduce the TitleAnnouncer utility component.

[isaacdurazo]

@jkva one question: I noticed that when the home link is clicked, the active state stays until you click anywhere on the page, is this behavior intentional?

[jkva]

@jkva one question: I noticed that when the home link is clicked, the active state stays until you click anywhere on the page, is this behavior intentional?

Hi @isaacdurazo, yes - this is consistent behaviour within the navigation elements in the navbar (the skiplink to main content notwithstanding), so as it is an SPA, this is intentional.

[isaacdurazo]

Cool! Thanks for clarifying, @jkva