svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the accessiblity of mobile menu toggle, and theme toggle.

Browse source
This commit is contained in:
Dorian Niemiec 2024-07-29 21:14:09 +02:00
parent 35cc40b487
commit 207958e0f7
2 changed files with 2 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/shared/MobileNav.tsx
View file

@ -19,6 +19,7 @@ const MobileNav = () => {
<ThemeToggle /> <ThemeToggle />
<Sheet> <Sheet>
<SheetTrigger> <SheetTrigger>
<span className="sr-only">Menu</span>
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</SheetTrigger> </SheetTrigger>
<SheetContent> <SheetContent>

1
components/ui/theme-toggle.tsx
View file

@ -30,6 +30,7 @@ const ThemeToggle = () => {
className="md:border-input border-transparent" className="md:border-input border-transparent"
onClick={handleTheme} onClick={handleTheme}
> >
<span className="sr-only">Toggle theme</span>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
</Button> </Button>