From 3c4bcdbd5312bd2440a175c71482ed9b2744a7c0 Mon Sep 17 00:00:00 2001 From: elisa lee Date: Mon, 11 Sep 2023 15:34:01 -0500 Subject: [PATCH] Fix nav header accessibility issues --- .../src/app/commonComponents/ChangeUser.tsx | 14 +- .../src/app/commonComponents/Dropdown.tsx | 3 + frontend/src/app/commonComponents/Header.scss | 4 +- .../src/app/commonComponents/Header.test.tsx | 56 ++++ frontend/src/app/commonComponents/Header.tsx | 20 +- .../__snapshots__/Header.test.tsx.snap | 302 ++++++++++++++++++ 6 files changed, 385 insertions(+), 14 deletions(-) create mode 100644 frontend/src/app/commonComponents/Header.test.tsx create mode 100644 frontend/src/app/commonComponents/__snapshots__/Header.test.tsx.snap diff --git a/frontend/src/app/commonComponents/ChangeUser.tsx b/frontend/src/app/commonComponents/ChangeUser.tsx index b787d2a2c7..2b50d80708 100644 --- a/frontend/src/app/commonComponents/ChangeUser.tsx +++ b/frontend/src/app/commonComponents/ChangeUser.tsx @@ -4,12 +4,14 @@ const ChangeUser = () => { } const getLink = (email: string, name: string) => ( - - Login as {name} - +
  • + + Login as {name} + +
    • ); return ( diff --git a/frontend/src/app/commonComponents/Dropdown.tsx b/frontend/src/app/commonComponents/Dropdown.tsx index 356c348418..0216ac3084 100644 --- a/frontend/src/app/commonComponents/Dropdown.tsx +++ b/frontend/src/app/commonComponents/Dropdown.tsx @@ -16,6 +16,7 @@ export interface Option { interface Props { options: Option[]; label?: string | React.ReactNode; + ariaLabel?: string; name?: string; onChange?: (e: React.ChangeEvent) => void; selectedValue: string; @@ -36,6 +37,7 @@ type SelectProps = JSX.IntrinsicElements["select"]; const Dropdown: React.FC = ({ options, label, + ariaLabel, name, onChange, disabled, @@ -91,6 +93,7 @@ const Dropdown: React.FC = ({ )} name={name} id={id} + aria-label={ariaLabel} aria-required={required || "false"} onChange={onChange} value={selectedValue || defaultOption || ""} diff --git a/frontend/src/app/commonComponents/Header.scss b/frontend/src/app/commonComponents/Header.scss index 998964f2e4..b696b60ba6 100644 --- a/frontend/src/app/commonComponents/Header.scss +++ b/frontend/src/app/commonComponents/Header.scss @@ -25,9 +25,11 @@ } .role-tag { + border-bottom: 1px #dfe1e2 solid; // $theme-color-prime-gray: color: #71767a; margin-top: 0.5rem; + padding-bottom: 1rem; } .header-link-icon { @@ -100,7 +102,7 @@ .navlink__support { display: flex; align-items: center; - margin-top: 0.75rem !important; + margin-top: 0.75rem; button { color: #005ea2; diff --git a/frontend/src/app/commonComponents/Header.test.tsx b/frontend/src/app/commonComponents/Header.test.tsx new file mode 100644 index 0000000000..9e8dbfb5d1 --- /dev/null +++ b/frontend/src/app/commonComponents/Header.test.tsx @@ -0,0 +1,56 @@ +import { render } from "@testing-library/react"; +import "../../i18n"; +import { Provider } from "react-redux"; +import { MemoryRouter } from "react-router-dom"; +import { MockedProvider } from "@apollo/client/testing"; +import configureStore from "redux-mock-store"; +import { configureAxe } from "jest-axe"; + +import Header from "./Header"; + +const axe = configureAxe({ + rules: { + // disable landmark rules when testing isolated components. + region: { enabled: false }, + }, +}); +const mockStore = configureStore([]); +const store = mockStore({ + organization: { + name: "Organization Name", + }, + user: { + firstName: "Kim", + lastName: "Mendoza", + roleDescription: "Admin user", + }, + facilities: [ + { id: "1", name: "Facility One" }, + { id: "2", name: "Facility Two" }, + ], +}); + +const mockNavigate = jest.fn(); +jest.mock("react-router-dom", () => { + const original = jest.requireActual("react-router-dom"); + return { + ...original, + useNavigate: () => mockNavigate, + }; +}); + +describe("Header", () => { + it("displays correctly", async () => { + render( + + + +
    + + + + ); + expect(document.body).toMatchSnapshot(); + expect(await axe(document.body)).toHaveNoViolations(); + }); +}); diff --git a/frontend/src/app/commonComponents/Header.tsx b/frontend/src/app/commonComponents/Header.tsx index 02a52f922c..98a1bdc671 100644 --- a/frontend/src/app/commonComponents/Header.tsx +++ b/frontend/src/app/commonComponents/Header.tsx @@ -230,7 +230,6 @@ const Header: React.FC<{}> = () => {
  • {formatRole(user.roleDescription)}
    • -
  • = () => { className={item.className} data-testid={`${deviceType}-${item.dataTestId}`} id={`${deviceType}-${item.dataTestId}`} + role={item.hasSubmenu ? "button" : "link"} + aria-expanded={item.hasSubmenu ? staffDetailsVisible : undefined} + aria-controls={ + item.hasSubmenu + ? `${deviceType}-${item.dataTestId}-submenu` + : undefined + } > {deviceType === "desktop" ? item.icon : item.mobileDisplayText} @@ -288,8 +294,9 @@ const Header: React.FC<{}> = () => { staffDetailsVisible && deviceType === "desktop" ? (