Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: accessibility of the mobile nav bar #7427

Merged
merged 9 commits into from
Feb 1, 2025
Merged
12 changes: 11 additions & 1 deletion apps/site/components/Containers/NavBar/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
14 changes: 12 additions & 2 deletions apps/site/components/Containers/NavBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -46,6 +48,7 @@ const NavBar: FC<NavbarProps> = ({
onThemeTogglerClick,
}) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const t = useTranslations();

return (
<nav className={`${style.container}`}>
Expand All @@ -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
ovflowd marked this conversation as resolved.
Show resolved Hide resolved
className={classNames(['peer', style.sidebarItemToggler])}
id="sidebarItemToggler"
ovflowd marked this conversation as resolved.
Show resolved Hide resolved
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}>
Expand Down
Loading
Loading