Skip to content

fix: accessibility of the mobile nav bar #7427

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.

Sign up for GitHub

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

Merged
ovflowd merged 9 commits into from
Feb 1, 2025
Merged

fix: accessibility of the mobile nav bar #7427

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9103534
fix: accessibility of the mobile nav bar
aduh95 Jan 26, 2025
7f8982a
fixup! fix: accessibility of the mobile nav bar
aduh95 Jan 26, 2025
4d39403
fixup! fix: accessibility of the mobile nav bar
aduh95 Jan 26, 2025
39d57a6
fixup! fix: accessibility of the mobile nav bar
aduh95 Jan 26, 2025
2fcc021
fixup! fix: accessibility of the mobile nav bar
aduh95 Jan 26, 2025
ee62fd9
fixup! fix: accessibility of the mobile nav bar
aduh95 Jan 26, 2025
237abde
Update packages/i18n/locales/en.json
aduh95 Jan 26, 2025
ae3f2d7
useTranslations
aduh95 Jan 27, 2025
be1724a
Apply suggestion from code review
aduh95 Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/site/components/Containers/NavBar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,18 @@
dark:border-neutral-900;
}

.sidebarItemToggler {
@apply absolute right-4 -z-10 appearance-none opacity-0;
Comment thread
aduh95 marked this conversation as resolved.
Outdated
transform: translateY(-200%);
Comment thread
aduh95 marked this conversation as resolved.
Outdated
}

.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
View file
Open in desktop
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
Comment thread
ovflowd marked this conversation as resolved.
className={classNames(['peer', style.sidebarItemToggler])}
id="sidebarItemToggler"
Comment thread
ovflowd marked this conversation as 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