Add accessibility props to NavMenu

Author: JamesDoingStuff

changelog.md

@@ -6,8 +6,8 @@
 
 - New _Progress_ component based on Diamond Light added.
 - New _ProgressDelayed_ component so that the progress isn't shown at all when it's a small wait.
-- NavMenu component added for creating dropdown menus in the NavBar
-  - NavMenuLink component extends NavLink to work in the NavMenu
+- _NavMenu_ component added for creating dropdown menus in the Navbar
+  - _NavMenuLink_ component extends NavLink to work in the NavMenu
 
 ### Fixed
 

src/components/navigation/NavMenu.test.tsx

@@ -18,11 +18,13 @@ describe("NavMenu", () => {
         <NavMenuLink href="#test2">Link 2</NavMenuLink>
       </NavMenu>,
     );
-
+    const menuButton = screen.getByRole("button");
     expect(screen.queryByText("Link 1")).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button"));
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+    await user.click(menuButton);
     expect(screen.getByText("Link 1")).toBeVisible();
     expect(screen.getByText("Link 2")).toBeVisible();
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
   });
 
   it("should open when selected using keyboard", async () => {
@@ -52,6 +54,17 @@ describe("NavMenu", () => {
     const link2 = screen.getByRole("menuitem", { name: "Link 2" });
     expect(document.activeElement).toBe(link2);
   });
+
+  it("should render with accessibility props", async () => {
+    renderWithProviders(<NavMenu label="Navmenu" />);
+
+    const menuButton = screen.getByRole("button");
+    const buttonControlsId = menuButton.getAttribute("aria-controls");
+    expect(menuButton).toHaveAttribute("aria-haspopup", "menu");
+    await user.click(menuButton);
+    const menuId = screen.getByRole("presentation").getAttribute("id");
+    expect(buttonControlsId).toEqual(menuId);
+  });
 });
 
 describe("NavMenuLink", () => {

src/components/navigation/NavMenu.tsx

@@ -7,7 +7,7 @@ import {
   MenuItem,
   type MenuItemProps,
 } from "@mui/material";
-import React, { useState, forwardRef } from "react";
+import React, { useState, forwardRef, useId } from "react";
 import { ExpandMore } from "@mui/icons-material";
 import { NavLink, NavLinkProps } from "./Navbar";
 
@@ -54,6 +54,7 @@ const NavMenu = ({ label, children }: NavMenuProps) => {
   const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorElement);
   const [menuWidth, setMenuWidth] = useState(0);
+  const menuId = useId();
 
   const openMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (!open) {
@@ -71,6 +72,9 @@ const NavMenu = ({ label, children }: NavMenuProps) => {
   return (
     <>
       <Button
+        aria-controls={menuId}
+        aria-expanded={open}
+        aria-haspopup="menu"
         onClick={(e) => openMenu(e)}
         disableFocusRipple
         sx={{
@@ -108,6 +112,7 @@ const NavMenu = ({ label, children }: NavMenuProps) => {
         />
       </Button>
       <Menu
+        id={menuId}
         open={open}
         onClose={closeMenu}
         anchorEl={anchorElement}