fix: accessibility of the mobile nav bar (#7427)

* fix: accessibility of the mobile nav bar

* fixup! fix: accessibility of the mobile nav bar

* fixup! fix: accessibility of the mobile nav bar

* fixup! fix: accessibility of the mobile nav bar

* fixup! fix: accessibility of the mobile nav bar

* fixup! fix: accessibility of the mobile nav bar

* Update packages/i18n/locales/en.json

Signed-off-by: Antoine du Hamel <[email protected]>

* useTranslations

* Apply suggestion from code review

---------

Signed-off-by: Antoine du Hamel <[email protected]>

Author: aduh95

apps/site/components/Containers/NavBar/index.module.css

@@ -28,12 +28,22 @@
     dark:border-neutral-900;
 }
 
+.sidebarItemToggler {
+  @apply absolute
+    right-4
+    -z-10
+    -translate-y-[200%]
+    appearance-none
+    opacity-0;
+}
+
 .nodeIconWrapper {
   @apply h-[30px]
     flex-1;
 }
 
-.navInteractionIcon {
+.navInteractionIcon,
+.sidebarItemToggler {
   @apply size-6;
 }
 

apps/site/components/Containers/NavBar/index.tsx

@@ -3,7 +3,9 @@
 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 dynamic from 'next/dynamic';
+import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from 'react';
 
@@ -46,6 +48,7 @@ const NavBar: FC<NavbarProps> = ({
   onThemeTogglerClick,
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const t = useTranslations();
 
   return (
     <nav className={`${style.container}`}>
@@ -55,15 +58,22 @@ const NavBar: FC<NavbarProps> = ({
         </Link>
 
         <Label.Root
-          onClick={() => setIsMenuOpen(prev => !prev)}
           className={style.sidebarItemTogglerLabel}
           htmlFor="sidebarItemToggler"
         >
           {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
         </Label.Root>
       </div>
 
-      <input className="peer hidden" id="sidebarItemToggler" type="checkbox" />
+      <input
+        className={classNames(['peer', style.sidebarItemToggler])}
+        id="sidebarItemToggler"
+        type="checkbox"
+        onChange={e => setIsMenuOpen(() => e.target.checked)}
+        aria-label={t(
+          `components.containers.navBar.controls.${isMenuOpen ? 'close' : 'open'}`
+        )}
+      />
 
       <div className={`${style.main} peer-checked:flex`}>
         <div className={style.navItems}>