From a7fbdd2fbf324c746f47c7d7422b898482f9876f Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 07:28:13 +0200
Subject: [PATCH] a11y: language-picker is now a labelled button group for
 screen readers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The language picker is a pair of <button aria-pressed=...> toggles (Deutsch / English) sitting inside a div, with a separate <label id="languageLabel">Sprache</label> directly above. Two issues:

- The <label> has no for= attribute because the actual control is a custom button-pair, not a single input. So the label was just floating text — present visually but not programmatically connected to the buttons it describes.

- The two buttons were a flat list with no group container, so a screen reader navigating button-by-button announced "Deutsch, pressed" / "English, not pressed" without any context that these are language alternatives.

Added role="group" and aria-labelledby="languageLabel" to the language-picker div. Screen readers now announce "Sprache, group, Deutsch button pressed" — the floating label becomes the group's accessible name and the relationship is exposed via the accessibility tree.

Kept the aria-pressed toggle pattern (rather than rewiring to role="radiogroup"+role="radio") because the JS state plumbing already aligns with the toggle semantics and the group label is enough to clarify the picker's intent.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 54c4bbd..622cf4f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -497,7 +497,7 @@
                         </div>
                         <div class="form-group">
                             <label id="languageLabel">Sprache</label>
-                            <div class="language-picker" id="languagePicker">
+                            <div class="language-picker" id="languagePicker" role="group" aria-labelledby="languageLabel">
                                 <button type="button" class="lang-option" id="langOptionDe" onclick="selectLanguageOption('de')" aria-pressed="false">
                                     <span class="flag-icon flag-de" aria-hidden="true"></span>
                                     <span id="languageDeText">Deutsch</span>