From 40b2f03b4a750d10989dd7703f584f752ee5779f Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 4 Feb 2026 15:32:46 +0100
Subject: [PATCH] Use flag emoji entries in language menu

---
 wwwroot/index.html |  8 ++++----
 wwwroot/styles.css | 11 +++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/wwwroot/index.html b/wwwroot/index.html
index 4bb9d63..4e9c38f 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -24,8 +24,8 @@
       <div class="lang-switch" id="lang-switch-auth">
         <button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
         <div class="lang-menu hidden">
-          <button type="button" data-lang="en">🇬🇧 English</button>
-          <button type="button" data-lang="de">🇩🇪 Deutsch</button>
+          <button type="button" data-lang="en" title="English" data-i18n-attr="title">🇺🇸 <span class="sr-only" data-i18n="lang.en">English</span></button>
+          <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title">🇩🇪 <span class="sr-only" data-i18n="lang.de">Deutsch</span></button>
         </div>
       </div>
     </div>
@@ -79,8 +79,8 @@
       <div class="lang-switch" id="lang-switch-status">
         <button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
         <div class="lang-menu hidden">
-          <button type="button" data-lang="en">🇬🇧 English</button>
-          <button type="button" data-lang="de">🇩🇪 Deutsch</button>
+          <button type="button" data-lang="en" title="English" data-i18n-attr="title">🇺🇸 <span class="sr-only" data-i18n="lang.en">English</span></button>
+          <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title">🇩🇪 <span class="sr-only" data-i18n="lang.de">Deutsch</span></button>
         </div>
       </div>
     </div>
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 93d8e06..419ca95 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -83,6 +83,17 @@ html {
     text-align: left;
     cursor: pointer;
 }
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
 
 .status-bar {
     display: flex;