Address Incorrect Mark-Up for Test Navigator Landmark (#362)

* Remove complementary role from nav; add aria-labelledby association to nav and ol * Use non-repeating "Test" label for test steps navigation; use "Test Navigation" as signpost heading text. * Position "Test Navigation" heading as first child in nav.
w3c · Feb 1, 2022 · f903e88 · f903e88
1 parent 4bbdc17
commit f903e88
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/client/components/TestRun/TestNavigator.jsx b/client/components/TestRun/TestNavigator.jsx
@@ -39,11 +39,14 @@ const TestNavigator = ({
                         <FontAwesomeIcon icon={faAlignLeft} />
                     </button>
                 </div>
-                {show && <h2>Test Navigator</h2>}
             </div>
             {show && (
-                <nav role="complementary">
-                    <ol className="test-navigator-list">
+                <nav aria-label="Test">
+                    <h2 id="test-navigator-heading">Test Navigation</h2>
+                    <ol
+                        aria-labelledby="test-navigator-heading"
+                        className="test-navigator-list"
+                    >
                         {tests.map(test => {
                             let resultClassName = 'not-started';
                             let resultStatus = 'Not Started';