spinner-needs-labelling.md

Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes (@microsoft/fluentui-jsx-a11y/spinner-needs-labelling)

💼 This rule is enabled in the ✅ recommended config.

Spinner must have either aria-label or label, aria-live and aria-busy attributes.

https://www.w3.org/TR/html-aria/

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

Ways to fix

• Make sure that Spinner component has following attributes:
  • aria-live
  • aria-busy
  • either label or aria-label

Rule Details

This rule aims to make Spinners accessible.

Examples of incorrect code for this rule:

<Spinner {...props} />

<Spinner 
    {...props} 
    aria-label="some text"
/>

<Spinner 
    {...props} 
    aria-live="polite"
/>

<Spinner
    size="large"
    label="Large Spinner"
    aria-live="polite"
/>

<Spinner
    size="large"
    label="Large Spinner"
    aria-busy="true"
/>

Examples of correct code for this rule:

<Spinner
    {...props} 
    aria-label="my screen reader text"
    aria-live="polite"
    aria-busy="false"
/>

<Spinner
    {...props} 
    aria-label="my screen reader text"
    aria-live="polite"
    aria-busy="true"
/>

<Spinner
    {...props} 
    label="my text"
    aria-live="polite"
    aria-busy="true"
/>