[Tech Debt] Fix accessibility concern for nested focusable elements

18F · Nov 22, 2024 · 66a8638 · 66a8638
1 parent bd0561c
commit 66a8638
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 51 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -73,6 +73,10 @@ module.exports = [
     ],
     rules: {
       ...jsxA11y.configs.recommended.rules,
+      // This doesn't allow anchor tags without HREF attributes, which are
+      // sometimes required to avoid other accessibility concerns like needing
+      // non-focusable buttons.
+      "jsx-a11y/anchor-is-valid": "off",
     },
   },
   {

diff --git a/js/components/dashboard_content/SidebarContent.js b/js/components/dashboard_content/SidebarContent.js
@@ -44,28 +44,13 @@ function SidebarContent({ dataHrefBase, agency }) {
       <Tabs>
         <TabList className="sidebar__tab-select__button-group usa-button-group usa-button-group--segmented">
           <Tab className="sidebar__tab-select__button-group__item usa-button-group__item">
-            <button
-              type="button"
-              className="sidebar__tab-select__button usa-button"
-            >
-              30 mins
-            </button>
+            <a className="sidebar__tab-select__button usa-button" aria-label="30 mins">30 mins</a>
           </Tab>
           <Tab className="sidebar__tab-select__button-group__item usa-button-group__item">
-            <button
-              type="button"
-              className="sidebar__tab-select__button usa-button"
-            >
-              7 days
-            </button>
+            <a className="sidebar__tab-select__button usa-button" aria-label="7 days">7 days</a>
           </Tab>
           <Tab className="sidebar__tab-select__button-group__item usa-button-group__item">
-            <button
-              type="button"
-              className="sidebar__tab-select__button usa-button"
-            >
-              30 days
-            </button>
+            <a className="sidebar__tab-select__button usa-button" aria-label="30 days">30 days</a>
           </Tab>
         </TabList>
 

diff --git a/js/components/dashboard_content/__tests__/SidebarContent.spec.js b/js/components/dashboard_content/__tests__/SidebarContent.spec.js
@@ -14,7 +14,7 @@ describe("SidebarContent", () => {
           agency="Department of Interior"
         />,
       );
-      await waitFor(() => screen.getByRole("button", { name: "30 mins" }));
+      await waitFor(() => screen.getByRole("generic", { name: "30 mins" }));
     });
 
     it("renders a component with top pages realtime, and top downloads yesterday", () => {
@@ -32,8 +32,8 @@ describe("SidebarContent", () => {
           agency="Department of Interior"
         />,
       );
-      await waitFor(() => screen.getByRole("button", { name: "7 days" }));
-      await user.click(screen.getByRole("button", { name: "7 days" }));
+      await waitFor(() => screen.getByRole("generic", { name: "7 days" }));
+      await user.click(screen.getByRole("generic", { name: "7 days" }));
     });
 
     it("renders a component with top pages for 7 days, and top downloads for 7 days", () => {
@@ -51,8 +51,8 @@ describe("SidebarContent", () => {
           agency="Department of Interior"
         />,
       );
-      await waitFor(() => screen.getByRole("button", { name: "30 days" }));
-      await user.click(screen.getByRole("button", { name: "30 days" }));
+      await waitFor(() => screen.getByRole("generic", { name: "30 days" }));
+      await user.click(screen.getByRole("generic", { name: "30 days" }));
     });
 
     it("renders a component with top pages for 30 days, and top downloads for 30 days", () => {

diff --git a/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap
@@ -35,12 +35,12 @@ exports[`SidebarContent when 7 days tab is selected renders a component with top
           id="tab:r1:0"
           role="tab"
         >
-          <button
+          <a
+            aria-label="30 mins"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             30 mins
-          </button>
+          </a>
         </li>
         <li
           aria-controls="panel:r1:1"
@@ -52,12 +52,12 @@ exports[`SidebarContent when 7 days tab is selected renders a component with top
           role="tab"
           tabindex="0"
         >
-          <button
+          <a
+            aria-label="7 days"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             7 days
-          </button>
+          </a>
         </li>
         <li
           aria-controls="panel:r1:2"
@@ -68,12 +68,12 @@ exports[`SidebarContent when 7 days tab is selected renders a component with top
           id="tab:r1:2"
           role="tab"
         >
-          <button
+          <a
+            aria-label="30 days"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             30 days
-          </button>
+          </a>
         </li>
       </ul>
       <div
@@ -201,12 +201,12 @@ exports[`SidebarContent when 30 days tab is selected renders a component with to
           id="tab:r2:0"
           role="tab"
         >
-          <button
+          <a
+            aria-label="30 mins"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             30 mins
-          </button>
+          </a>
         </li>
         <li
           aria-controls="panel:r2:1"
@@ -217,12 +217,12 @@ exports[`SidebarContent when 30 days tab is selected renders a component with to
           id="tab:r2:1"
           role="tab"
         >
-          <button
+          <a
+            aria-label="7 days"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             7 days
-          </button>
+          </a>
         </li>
         <li
           aria-controls="panel:r2:2"
@@ -234,12 +234,12 @@ exports[`SidebarContent when 30 days tab is selected renders a component with to
           role="tab"
           tabindex="0"
         >
-          <button
+          <a
+            aria-label="30 days"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             30 days
-          </button>
+          </a>
         </li>
       </ul>
       <div
@@ -374,12 +374,12 @@ exports[`SidebarContent when 30 minutes tab is selected renders a component with
           role="tab"
           tabindex="0"
         >
-          <button
+          <a
+            aria-label="30 mins"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             30 mins
-          </button>
+          </a>
         </li>
         <li
           aria-controls="panel:r0:1"
@@ -390,12 +390,12 @@ exports[`SidebarContent when 30 minutes tab is selected renders a component with
           id="tab:r0:1"
           role="tab"
         >
-          <button
+          <a
+            aria-label="7 days"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             7 days
-          </button>
+          </a>
         </li>
         <li
           aria-controls="panel:r0:2"
@@ -406,12 +406,12 @@ exports[`SidebarContent when 30 minutes tab is selected renders a component with
           id="tab:r0:2"
           role="tab"
         >
-          <button
+          <a
+            aria-label="30 days"
             class="sidebar__tab-select__button usa-button"
-            type="button"
           >
             30 days
-          </button>
+          </a>
         </li>
       </ul>
       <div

diff --git a/sass/pages/root/_secondary-data.scss b/sass/pages/root/_secondary-data.scss
@@ -29,7 +29,7 @@
     width: 33.3333%;
 
     &[aria-selected="false"] {
-      button {
+      .sidebar__tab-select__button {
         background-color: transparent;
         box-shadow: inset 0 0 0 2px colors.$palette-color-1;
         color: colors.$palette-color-1;