From bdcd0c7e20beeb4cdd120a0a0d40e8b58070ad99 Mon Sep 17 00:00:00 2001
From: Eirik Lillebo <erlillebo@gmail.com>
Date: Thu, 3 Oct 2024 15:25:59 +0200
Subject: [PATCH] fix(project): improved language selector accessibility

---
 libs/ui/src/lib/language-switcher/index.tsx | 33 +++++++++++----------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/libs/ui/src/lib/language-switcher/index.tsx b/libs/ui/src/lib/language-switcher/index.tsx
index 56c0c488..be3808a8 100644
--- 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>
     );
 };