Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-09 20:12:26 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(homepage): add accessible names to footer language button and theme toggle buttons

Browse Source
This commit is contained in:
Moamal-2000
2025-05-10 12:45:13 +03:00
parent cd21860535
commit 78eefe9da1
5 changed files with 10 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/components/locale-switch.tsx
View File

@ -1,3 +1,4 @@
import { t } from "@lingui/macro";
import { useLingui } from "@lingui/react";
import { Translate } from "@phosphor-icons/react";
import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
@ -13,7 +14,7 @@ export const LocaleSwitch = () => {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button size="icon" variant="ghost">
<Button size="icon" variant="ghost" aria-label={t`Change Language`}>
<Translate size={20} />
</Button>
</PopoverTrigger>

7
apps/client/src/components/theme-switch.tsx
View File

@ -1,3 +1,4 @@
import { t } from "@lingui/macro";
import { CloudSun, Moon, Sun } from "@phosphor-icons/react";
import { useTheme } from "@reactive-resume/hooks";
import { Button } from "@reactive-resume/ui";
@ -25,9 +26,9 @@ export const ThemeSwitch = ({ size = 20, className }: Props) => {
<Button size="icon" variant="ghost" className={className} onClick={toggleTheme}>
<div className="cursor-pointer overflow-hidden" style={{ width: size, height: size }}>
<motion.div animate={theme} variants={variants} className="flex">
<Sun size={size} className="shrink-0" />
<CloudSun size={size} className="shrink-0" />
<Moon size={size} className="shrink-0" />
<Sun size={size} className="shrink-0" aria-label={t`Switch to Light Mode`} />
<CloudSun size={size} className="shrink-0" aria-label={t`Use System Theme`} />
<Moon size={size} className="shrink-0" aria-label={t`Switch to Dark Mode`} />
</motion.div>
</div>
</Button>