Navigation Accessibility

frontends/main/src/page-components/Header/Header.tsx

@@ -7,7 +7,6 @@ import {
   AppBar,
   NavDrawer,
   Toolbar,
-  ClickAwayListener,
   ActionButtonLink,
 } from "ol-components"
 import {
@@ -54,8 +53,9 @@ const Bar = styled(AppBar)(({ theme }) => ({
   ".MuiToolbar-root": {
     minHeight: "auto",
   },
+  height: theme.custom.dimensions.headerHeight,
   [theme.breakpoints.down("sm")]: {
-    height: "60px",
+    height: theme.custom.dimensions.headerHeightSm,
     padding: "0",
   },
 }))
@@ -265,15 +265,8 @@ const navData: NavData = {
 
 const Header: FunctionComponent = () => {
   const [drawerOpen, toggleDrawer] = useToggle(false)
-  const toggler = (event: React.MouseEvent) => {
-    event.nativeEvent.stopImmediatePropagation() // Prevent clicking on "Explore MIT" button from triggering the ClickAwayHandler
-    toggleDrawer(!drawerOpen)
-  }
-  const closeDrawer = (event: MouseEvent | TouchEvent) => {
-    if (drawerOpen && event.type !== "touchstart") {
-      toggleDrawer(false)
-    }
-  }
+  const desktopTrigger = React.useRef<HTMLButtonElement>(null)
+  const mobileTrigger = React.useRef<HTMLButtonElement>(null)
 
   return (
     <div>
@@ -283,29 +276,30 @@ const Header: FunctionComponent = () => {
             <StyledMITLogoLink logo="learn" />
             <LeftSpacer />
             <MenuButton
+              ref={desktopTrigger}
               text="Explore MIT"
-              onClick={toggler}
-              drawerOpen={drawerOpen}
+              onClick={toggleDrawer.toggle}
             />
           </DesktopOnly>
           <MobileOnly>
-            <MenuButton onClick={toggler} drawerOpen={drawerOpen} />
+            <MenuButton ref={mobileTrigger} onClick={toggleDrawer.toggle} />
             <LeftSpacer />
             <StyledMITLogoLink logo="learn" />
           </MobileOnly>
           <Spacer />
           <UserView />
         </StyledToolbar>
       </Bar>
-      <ClickAwayListener
-        onClickAway={closeDrawer}
-        mouseEvent="onPointerDown"
-        touchEvent="onTouchStart"
-      >
-        <div role="presentation">
-          <NavDrawer navdata={navData} open={drawerOpen} />
-        </div>
-      </ClickAwayListener>
+
+      <NavDrawer
+        getClickAwayExcluded={() => [
+          desktopTrigger.current,
+          mobileTrigger.current,
+        ]}
+        navdata={navData}
+        open={drawerOpen}
+        onClose={toggleDrawer.off}
+      />
     </div>
   )
 }

frontends/main/src/page-components/Header/MenuButton.tsx

@@ -1,17 +1,13 @@
 "use client"
 
 import { styled } from "ol-components"
-import { RiMenuLine, RiCloseLargeLine } from "@remixicon/react"
+import { RiMenuLine } from "@remixicon/react"
 import React from "react"
 
 const MenuIcon = styled(RiMenuLine)(({ theme }) => ({
   color: theme.custom.colors.darkGray1,
 }))
 
-const CloseMenuIcon = styled(RiCloseLargeLine)(({ theme }) => ({
-  color: theme.custom.colors.darkGray1,
-}))
-
 const MenuButtonText = styled.div(({ theme }) => ({
   alignSelf: "center",
   paddingLeft: "16px",
@@ -53,20 +49,17 @@ const StyledMenuButton = styled.button(({ theme }) => ({
 interface MenuButtonProps {
   text?: string
   onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
-  drawerOpen: boolean
 }
 
-const MenuButton: React.FC<MenuButtonProps> = ({
-  text,
-  onClick,
-  drawerOpen,
-}) => (
-  <StyledMenuButton onPointerDown={onClick}>
-    <MenuButtonInner>
-      {drawerOpen ? <CloseMenuIcon /> : <MenuIcon />}
-      {text ? <MenuButtonText>{text}</MenuButtonText> : ""}
-    </MenuButtonInner>
-  </StyledMenuButton>
+const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
+  ({ onClick, text }, ref) => (
+    <StyledMenuButton ref={ref} onClick={onClick}>
+      <MenuButtonInner>
+        <MenuIcon />
+        {text ? <MenuButtonText>{text}</MenuButtonText> : ""}
+      </MenuButtonInner>
+    </StyledMenuButton>
+  ),
 )
 
 export { MenuButton }

frontends/ol-components/src/components/NavDrawer/NavDrawer.test.tsx

@@ -1,5 +1,6 @@
 import { NavData, NavDrawer } from "./NavDrawer"
 import { render, screen } from "@testing-library/react"
+import user from "@testing-library/user-event"
 import React from "react"
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
 
@@ -29,7 +30,7 @@ describe("NavDrawer", () => {
         },
       ],
     }
-    render(<NavDrawer navdata={navData} open={true} />, {
+    render(<NavDrawer onClose={jest.fn()} navdata={navData} open={true} />, {
       wrapper: ThemeProvider,
     })
     const links = screen.getAllByTestId("nav-link")
@@ -41,4 +42,80 @@ describe("NavDrawer", () => {
     expect(titles).toHaveLength(3)
     expect(descriptions).toHaveLength(2)
   })
+
+  const NAV_DATA: NavData = {
+    sections: [
+      {
+        title: "TEST 1",
+        items: [
+          {
+            title: "Title 1",
+            description: "Description 1",
+            href: "https://link.one",
+          },
+        ],
+      },
+      {
+        title: "TEST 2",
+        items: [
+          {
+            title: "Title 2",
+            description: "Description 2",
+            href: "https://link.two",
+          },
+        ],
+      },
+    ],
+  }
+
+  test("close button calls onClose", async () => {
+    const onClose = jest.fn()
+    render(<NavDrawer onClose={onClose} navdata={NAV_DATA} open={true} />, {
+      wrapper: ThemeProvider,
+    })
+    const close = screen.getByRole("button", { name: "Close Navigation" })
+    await user.click(close)
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  test("escape calls onClose", async () => {
+    const onClose = jest.fn()
+    render(<NavDrawer onClose={onClose} navdata={NAV_DATA} open={true} />, {
+      wrapper: ThemeProvider,
+    })
+    const links = screen.getAllByRole("link")
+    links[0].focus()
+    await user.keyboard("{Escape}")
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  test("click away calls onClose if target is not excluded", async () => {
+    const onClose = jest.fn()
+    const Component = () => {
+      const excluded = React.useRef<HTMLButtonElement>(null)
+      return (
+        <div>
+          <NavDrawer
+            getClickAwayExcluded={() => [excluded.current]}
+            onClose={onClose}
+            navdata={NAV_DATA}
+            open={true}
+          />
+          <button type="button">Outside</button>
+          <button ref={excluded} type="button">
+            Excluded
+            <svg data-testid="foo" />
+          </button>
+        </div>
+      )
+    }
+    render(<Component />, { wrapper: ThemeProvider })
+    await user.click(screen.getByRole("button", { name: "Outside" }))
+    expect(onClose).toHaveBeenCalled()
+    onClose.mockReset()
+
+    await user.click(screen.getByRole("button", { name: "Excluded" }))
+    await user.click(screen.getByTestId("foo"))
+    expect(onClose).not.toHaveBeenCalled()
+  })
 })