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.

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

fix: accessibility of the mobile nav bar #7427

Merged
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 4 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
11 changes: 10 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,21 @@
dark:border-neutral-900;
}

.sidebarItemToggler {
position: absolute;
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
right: 1rem;
opacity: 0;
appearance: none;
transform: translateY(-200%);
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
}

.nodeIconWrapper {
@apply h-[30px]
flex-1;
}

.navInteractionIcon {
.navInteractionIcon,
.sidebarItemToggler {
@apply size-6;
}

Expand Down
10 changes: 7 additions & 3 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 @@ -53,17 +53,21 @@ const NavBar: FC<NavbarProps> = ({
<Link className={style.nodeIconWrapper} href="/" aria-label="Home">
<WithNodejsLogo />
</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={`peer ${style.sidebarItemToggler}`}
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
id="sidebarItemToggler"
ovflowd marked this conversation as resolved.
Show resolved Hide resolved
type="checkbox"
onChange={e => setIsMenuOpen(() => e.target.checked)}
aria-label={`${isMenuOpen ? 'Close' : 'Show'} navigation menu`}
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
/>

<div className={`${style.main} peer-checked:flex`}>
<div className={style.navItems}>
Expand Down
1 change: 1 addition & 0 deletions apps/site/components/Icons/Logos/Nodejs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const Nodejs: FC<NodeJsLogoProps> = ({
height="80"
viewBox="0 0 267 80"
fill="none"
aria-label="Node.js logo"
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
xmlns="http://www.w3.org/2000/svg"
className={classNames('fill-[#333333] dark:fill-white', className)}
{...props}
Expand Down
Loading