Skip to content

Latest commit

 

History

History
36 lines (25 loc) · 1.09 KB

toolbar-missing-aria.md

File metadata and controls

36 lines (25 loc) · 1.09 KB
Raw

Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby (@microsoft/fluentui-jsx-a11y/toolbar-missing-aria)

💼 This rule is enabled in the ✅ recommended config.

The toolbar role needs an accessible name, especially if there are multiple toolbars on a screen.

Rule Details

This rule aims to prevent a confusing user experience for tool bars.

Examples of incorrect code for this rule:

<Toolbar>
    <ToolbarToggleButton appearance="subtle" aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
</Toolbar>

Examples of correct code for this rule:

<Toolbar aria-label="Subtle">
    <ToolbarToggleButton appearance="subtle" aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
</Toolbar>
<Label id="my-label">Subtle</Label>
<Toolbar aria-labelledby="my-label">
    <ToolbarToggleButton appearance="subtle" aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
</Toolbar>