Skip to content

menu-button-needs-labelling.md

Latest commit

 

History

History
37 lines (22 loc) · 958 Bytes

menu-button-needs-labelling.md

File metadata and controls

37 lines (22 loc) · 958 Bytes

Accessibility: MenuButton must have an accessible name via aria-label, text content, aria-labelledby, etc (@microsoft/fluentui-jsx-a11y/menu-button-needs-labelling)

💼 This rule is enabled in the ✅ recommended config.

MenuButton components must have accessible labelling for screen readers.

Rule Details

This rule enforces that MenuButton components have proper accessible names through aria-label, aria-labelledby, or text content.

Noncompliant

<MenuButton />

Compliant

<MenuButton aria-label="Menu options" />

<MenuButton aria-labelledby="menu-label">
  <span id="menu-label">Options</span>
</MenuButton>

<MenuButton>Options</MenuButton>

When Not To Use

This rule should always be used for MenuButton components as they are interactive elements.

Accessibility guidelines