From 70ba50c515a25906481746c0b01aeae6e6284c0c Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Fri, 30 Oct 2026 22:54:18 +0100
Subject: [PATCH] Hide decorative flags from screen readers in the language
 selector

The flags had titles that repeated the button text. Also mark each
language name with its own lang so it's pronounced correctly.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/languageSelector.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/languageSelector.tsx b/src/components/ui/languageSelector.tsx
index c9634e6..ef8791e 100644
--- a/src/components/ui/languageSelector.tsx
+++ b/src/components/ui/languageSelector.tsx
@@ -24,13 +24,13 @@ const LanguageSelector = () => {
     <div className={styles.languageSwitcher}>
       {locale === "no" ? (
         <button onClick={() => changeLocale("en")} className={styles.button}>
-          <GB className={styles.flag} title="English flag" />
-          English
+          <GB className={styles.flag} aria-hidden="true" />
+          <span lang="en">English</span>
         </button>
       ) : (
         <button onClick={() => changeLocale("no")} className={styles.button}>
-          <NO className={styles.flag} title="Norwegian flag" />
-          Norsk
+          <NO className={styles.flag} aria-hidden="true" />
+          <span lang="no">Norsk</span>
         </button>
       )}
     </div>