fix(ui): make mobile nav toggle keyboard accessible

Author: abhijeetnardele24-hash

packages/ui-components/src/Containers/NavBar/__tests__/index.test.jsx

@@ -0,0 +1,54 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import NavBar from '..';
+
+const Logo = () => <span>Node.js</span>;
+
+describe('NavBar', () => {
+  it('uses a keyboard-accessible button to toggle the mobile navigation', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <NavBar
+        as="a"
+        Logo={Logo}
+        pathname="/"
+        sidebarItemTogglerAriaLabel="Toggle navigation menu"
+        navItems={[
+          { text: 'Learn', link: '/learn' },
+          { text: 'About', link: '/about' },
+        ]}
+      >
+        <a href="/search">Search</a>
+      </NavBar>
+    );
+
+    const menuButton = screen.getByRole('button', {
+      name: 'Toggle navigation menu',
+    });
+    const navigation = screen
+      .getByRole('navigation')
+      .querySelector('#navbar-navigation');
+
+    assert.ok(menuButton);
+    assert.ok(navigation);
+    assert.equal(menuButton.tagName, 'BUTTON');
+    assert.equal(menuButton.getAttribute('tabindex'), null);
+    assert.equal(menuButton.getAttribute('aria-expanded'), 'false');
+    assert.match(navigation.className, /\bhidden\b/);
+
+    await user.click(menuButton);
+
+    assert.equal(menuButton.getAttribute('aria-expanded'), 'true');
+    assert.match(navigation.className, /\bflex\b/);
+
+    await user.click(menuButton);
+
+    assert.equal(menuButton.getAttribute('aria-expanded'), 'false');
+    assert.match(navigation.className, /\bhidden\b/);
+  });
+});

packages/ui-components/src/Containers/NavBar/index.module.css

@@ -41,6 +41,10 @@
       .sidebarItemTogglerLabel {
         @apply block
           cursor-pointer
+          appearance-none
+          border-0
+          bg-transparent
+          p-0
           xl:hidden;
 
         .navInteractionIcon {
@@ -49,16 +53,6 @@
       }
     }
 
-    .sidebarItemToggler {
-      @apply absolute
-        right-4
-        -z-10
-        size-6
-        -translate-y-[200%]
-        appearance-none
-        opacity-0;
-    }
-
     .main {
       @apply flex-1
         flex-col

packages/ui-components/src/Containers/NavBar/index.tsx

@@ -1,6 +1,5 @@
 import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
 import XMark from '@heroicons/react/24/solid/XMarkIcon';
-import * as Label from '@radix-ui/react-label';
 import classNames from 'classnames';
 import { useState } from 'react';
 
@@ -55,25 +54,22 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
             <Logo />
           </Component>
 
-          <Label.Root
+          <button
             className={styles.sidebarItemTogglerLabel}
-            htmlFor="sidebarItemToggler"
-            role="button"
+            type="button"
             aria-label={sidebarItemTogglerAriaLabel}
+            aria-controls="navbar-navigation"
+            aria-expanded={isMenuOpen}
+            onClick={() => setIsMenuOpen(previousState => !previousState)}
           >
             {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
-          </Label.Root>
+          </button>
         </div>
 
-        <input
-          className={classNames('peer', styles.sidebarItemToggler)}
-          id="sidebarItemToggler"
-          type="checkbox"
-          onChange={e => setIsMenuOpen(() => e.target.checked)}
-          aria-label={sidebarItemTogglerAriaLabel}
-          tabIndex={-1}
-        />
-        <div className={classNames(styles.main, `hidden peer-checked:flex`)}>
+        <div
+          id="navbar-navigation"
+          className={classNames(styles.main, isMenuOpen ? 'flex' : 'hidden')}
+        >
           {navItems && navItems.length > 0 && (
             <div className={styles.navItems}>
               {navItems.map(({ text, link, target }) => (