Add visually hidden text to theme switcher

Curetix · Jun 8, 2024 · a2bd5af · a2bd5af
1 parent 0214403
commit a2bd5af
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/src/components/settings-modal.tsx b/src/components/settings-modal.tsx
@@ -12,6 +12,7 @@ import {
   Stack,
   Switch,
   Text,
+  VisuallyHidden,
   rem,
   useMantineColorScheme,
 } from "@mantine/core";
@@ -89,6 +90,10 @@ function SettingsModal({ opened, onClose }: SettingsModalProps) {
     setLocale(locale);
   };
 
+  const themeIconProps = {
+    style: { width: rem(16), height: rem(16), display: "block" },
+  };
+
   const settingsItems: SettingsItem[] = [
     {
       title: LL.THEME(),
@@ -99,25 +104,28 @@ function SettingsModal({ opened, onClose }: SettingsModalProps) {
             {
               value: "light",
               label: (
-                <Center>
-                  <IconBrightnessUp style={{ width: rem(16), height: rem(16) }} />
-                </Center>
+                <>
+                  <IconBrightnessUp {...themeIconProps} />
+                  <VisuallyHidden>{LL.THEME_LIGHT()}</VisuallyHidden>
+                </>
               ),
             },
             {
               value: "dark",
               label: (
-                <Center>
-                  <IconMoonStars style={{ width: rem(16), height: rem(16) }} />
-                </Center>
+                <>
+                  <IconMoonStars {...themeIconProps} />
+                  <VisuallyHidden>{LL.THEME_DARK()}</VisuallyHidden>
+                </>
               ),
             },
             {
               value: "auto",
               label: (
-                <Center>
-                  <IconBrightness style={{ width: rem(16), height: rem(16) }} />
-                </Center>
+                <>
+                  <IconBrightness {...themeIconProps} />
+                  <VisuallyHidden>{LL.THEME_AUTO()}</VisuallyHidden>
+                </>
               ),
             },
           ]}