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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user