Label Breadcrumb Navigation and Item List (#369)

* Add "Breadcrumb" label to breadcrumb navigation; add sr-only heading and describe the nav item list. * Use `aria-label` to label breadcrumb nav and nav item list as opposed to non-nestable signpost heading.
w3c · Feb 2, 2022 · 9eea760 · 9eea760
1 parent cf60992
commit 9eea760
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/client/components/Reports/SummarizeTestPlanReport.jsx b/client/components/Reports/SummarizeTestPlanReport.jsx
@@ -47,7 +47,12 @@ const SummarizeTestPlanReport = ({ testPlanReport }) => {
                 {getTestPlanVersionTitle(testPlanVersion)}&nbsp;with&nbsp;
                 {getTestPlanTargetTitle(testPlanTarget)}
             </h1>
-            <Breadcrumb>
+            <Breadcrumb
+                label="Breadcrumb"
+                listProps={{
+                    'aria-label': 'Breadcrumb Navigation'
+                }}
+            >
                 <LinkContainer to="/reports">
                     <Breadcrumb.Item>
                         <FontAwesomeIcon icon={faHome} />

diff --git a/client/components/Reports/SummarizeTestPlanVersion.jsx b/client/components/Reports/SummarizeTestPlanVersion.jsx
@@ -26,7 +26,13 @@ const SummarizeTestPlanVersion = ({ testPlanVersion, testPlanReports }) => {
                 </title>
             </Helmet>
             <h1>{getTestPlanVersionTitle(testPlanVersion)}</h1>
-            <Breadcrumb>
+
+            <Breadcrumb
+                label="Breadcrumb"
+                listProps={{
+                    'aria-label': 'Breadcrumb Navigation'
+                }}
+            >
                 <LinkContainer to="/reports">
                     <Breadcrumb.Item>
                         <FontAwesomeIcon icon={faHome} />