Address Incorrect Mark-Up for Test Navigator Landmark

[jkva]

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

The landmark wrapping the "Test Navigator" is marked up as a <nav>, but has been given a role of "complementary". This is incorrect; the entire section is used for navigation and as such, the default role implied by the <nav> would be more semantically accurate.

Meanwhile, the <nav> has no accessible name, and doesn't encompass the " Test Navigator" heading or toggle button. We recommend changing the heading to "Test Navigation", moving it and button inside the <nav>, removing the role attribute from the <nav>, and then applying an aria-label attribute to the <nav> with a value of "Test". The <ol> of tests should also be aria-labelledby the heading.

---

Effective changes:

• the complementary role on the nav element has been removed;
• the nav element is labelled by its leading h2 via aria-labelledby IDREF; and
• the ol element containing the tests is similarly labelled by this h2.

[jscholes]

@jkva Can we change the heading text to "Test Navigation", rather than "Navigator"? Then, because users will hear "Test Navigation navigation" (owing to the word "Navigation" in the heading and accessible role of the nav), exchange aria-labelledby on the nav for aria-label="Test". aria-labelledby can stay on the list.

[jscholes]

@jkva Sorry, missed this before: the heading needs to be inside the nav.