fix: accessibility of the mobile nav bar

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

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

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

@@ -3,6 +3,7 @@
 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 { useState } from 'react';
 import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from 'react';
@@ -55,15 +56,20 @@ 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={`${isMenuOpen ? 'Close' : 'Show'} navigation menu`}
+      />
 
       <div className={`${style.main} peer-checked:flex`}>
         <div className={style.navItems}>

apps/site/components/Icons/Logos/Nodejs.tsx

@@ -17,6 +17,7 @@ const Nodejs: FC<NodeJsLogoProps> = ({
     height="80"
     viewBox="0 0 267 80"
     fill="none"
+    aria-label="Node.js logo"
     xmlns="http://www.w3.org/2000/svg"
     className={classNames('fill-[#333333] dark:fill-white', className)}
     {...props}

packages/i18n/locales/en.json

@@ -12,6 +12,8 @@
       },
       "navBar": {
         "links": {
+          "open": "Show navigation menu",
+          "close": "Close navigation menu",
           "about": "About",
           "download": "Download",
           "docs": "Docs",
@@ -285,4 +287,4 @@
       }
     }
   }
-}
+}