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>
This commit is contained in:
Johan Persson
2026-04-15 10:02:05 +02:00
parent 88119c21c8
commit d3dbbe57e1
+4 -2
View File
@@ -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>