fix(project): improved language selector accessibility

Informasjonsforvaltning · Oct 4, 2024 · bdcd0c7 · bdcd0c7
1 parent 8cf52c4
commit bdcd0c7
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/libs/ui/src/lib/language-switcher/index.tsx b/libs/ui/src/lib/language-switcher/index.tsx
@@ -25,21 +25,24 @@ const LanguageSwitcher = ({ inverted }: LanguageSwitcherProps) => {
     };
 
     return (
-        <ToggleGroup
-            className={cn(styles.languageSwitcher, { [styles.inverted]: inverted })}
-            defaultValue={defaultCode}
-            size='sm'
-            onChange={(code) => onLanguageSelect(code as LocaleCodes)}
-        >
-            {i18n.locales.map((locale) => (
-                <ToggleGroup.Item
-                    value={locale.code}
-                    key={locale.code}
-                >
-                    {locale.flag} {locale.name}
-                </ToggleGroup.Item>
-            ))}
-        </ToggleGroup>
+        <nav aria-label="Select language">
+            <ToggleGroup
+                className={cn(styles.languageSwitcher, { [styles.inverted]: inverted })}
+                defaultValue={defaultCode}
+                size='sm'
+                onChange={(code) => onLanguageSelect(code as LocaleCodes)}
+                name="Select language"
+            >
+                {i18n.locales.map((locale) => (
+                    <ToggleGroup.Item
+                        value={locale.code}
+                        key={locale.code}
+                    >
+                        <span aria-hidden="true">{locale.flag}</span> {locale.name}
+                    </ToggleGroup.Item>
+                ))}
+            </ToggleGroup>
+        </nav>
     );
 };