From d3dbbe57e1301173e371688508b2e0315af740ca Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Wed, 15 Apr 2026 10:02:05 +0200
Subject: [PATCH] docs-ui: add missing aria-labels to toolbar controls

Add aria-labels to the theme select, color scheme toggle group,
and the individual light/dark toggle buttons.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 docs-ui/src/components/Toolbar/Toolbar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs-ui/src/components/Toolbar/Toolbar.tsx b/docs-ui/src/components/Toolbar/Toolbar.tsx
index ea094b2a81..3eb711558d 100644
--- a/docs-ui/src/components/Toolbar/Toolbar.tsx
+++ b/docs-ui/src/components/Toolbar/Toolbar.tsx
@@ -78,6 +78,7 @@ export const Toolbar = ({ version }: ToolbarProps) => {
           defaultValue="backstage"
           value={selectedThemeName}
           onChange={setSelectedThemeName}
+          aria-label="Theme"
         >
           <Button className={styles.bubble}>
             <SelectValue />
@@ -128,11 +129,12 @@ export const Toolbar = ({ version }: ToolbarProps) => {
           onSelectionChange={setSelectedTheme}
           disallowEmptySelection
           className={styles.buttonGroup}
+          aria-label="Color scheme"
         >
-          <ToggleButton id="light">
+          <ToggleButton id="light" aria-label="Light theme">
             <RiSunLine aria-hidden="true" size={16} />
           </ToggleButton>
-          <ToggleButton id="dark">
+          <ToggleButton id="dark" aria-label="Dark theme">
             <RiMoonLine aria-hidden="true" size={16} />
           </ToggleButton>
         </ToggleButtonGroup>