Skip to content

microsoft/eslint-plugin-fluentui-jsx-a11y

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

eslint-plugin-fluentui-jsx-a11y npm versionCoverage Status

A set of eslint rules against Fluent UI React v9 to prevent common accessibility issues.

Covers hard-coded string props and variables for props.

<Label htmlFor="some-id">Some Label</Label>
<Input id="some-id" />
<Label htmlFor={someId}>Some Label</Label>
<Input id={someId} />

Installation

You'll first need to install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install @microsoft/eslint-plugin-fluentui-jsx-a11y:

# npm
npm install @microsoft/eslint-plugin-fluentui-jsx-a11y --save-dev

# yarn
yarn add @microsoft/eslint-plugin-fluentui-jsx-a11y --dev

Or add this package to your package.json file:

"devDependencies": {
    "@microsoft/eslint-plugin-fluentui-jsx-a11y": "1.0.0"
  }

And then you can run

  npm install

Usage

You will need to add the plugin to your .eslintrc configuration file.

Suggested Configuration:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "react-hooks",
    "@microsoft/fluentui-jsx-a11y"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@microsoft/fluentui-jsx-a11y/recommended"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/prop-types": "off",
  },

Why?

This plugin does a static code analysis of the React JSX to spot accessibility issues in apps built with FluentUI. That way, common accessibility issues are detected before the pull request stage and will be prevented from being checked into a code base.

As the plugin can only catch errors in static source code, please use it in combination with @axe-core/react to test the accessibility of the rendered DOM. Consider these tools just as one step of a larger a11y testing process and always test your apps with assistive technology.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

Rules

πŸ’Ό Configurations enabled in.
⚠️ Configurations set to warn in.
βœ… Set in the recommended configuration.
πŸ”§ Automatically fixable by the --fix CLI option.

Name                                               Description πŸ’Ό ⚠️ πŸ”§
accordion-header-needs-labelling The accordion header is a button and it needs an accessibile name e.g. text content, aria-label, aria-labelledby. βœ…
accordion-item-needs-header-and-panel An AccordionItem needs exactly one header and one panel βœ…
avatar-needs-name Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby βœ…
avoid-using-aria-describedby-for-primary-labelling aria-describedby provides additional context and is not meant for primary labeling. βœ…
badge-needs-accessible-name βœ… πŸ”§
breadcrumb-needs-labelling All interactive elements must have an accessible name βœ…
checkbox-needs-labelling Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby βœ…
combobox-needs-labelling All interactive elements must have an accessible name βœ…
compound-button-needs-labelling Accessibility: Compound buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby βœ…
counter-badge-needs-count βœ… πŸ”§
dialogbody-needs-title-content-and-actions A DialogBody should have a header(DialogTitle), content(DialogContent), and footer(DialogActions) βœ…
dialogsurface-needs-aria DialogueSurface need accessible labelling: aria-describedby on DialogueSurface and aria-label or aria-labelledby(if DialogueTitle is missing) βœ…
dropdown-needs-labelling Accessibility: Dropdown menu must have an id and it needs to be linked via htmlFor of a Label βœ…
field-needs-labelling Accessibility: Field must have label βœ…
image-button-missing-aria Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby βœ…
input-components-require-accessible-name Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label βœ…
link-missing-labelling Accessibility: Image links must have an accessible name. Add either text content, labelling to the image or labelling to the link itself. βœ… πŸ”§
menu-item-needs-labelling Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby βœ…
no-empty-buttons Accessibility: Button, ToggleButton, SplitButton, MenuButton, CompoundButton must either text content or icon or child component βœ…
no-empty-components FluentUI components should not be empty βœ…
prefer-aria-over-title-attribute The title attribute is not consistently read by screen readers, and its behavior can vary depending on the screen reader and the user's settings. βœ… πŸ”§
progressbar-needs-labelling Accessibility: Progressbar must have aria-valuemin, aria-valuemax, aria-valuenow, aria-describedby and either aria-label or aria-labelledby attributes βœ…
radio-button-missing-label Accessibility: Radio button without label must have an accessible and visual label: aria-labelledby βœ…
radiogroup-missing-label Accessibility: RadioGroup without label must have an accessible and visual label: aria-labelledby βœ…
rating-needs-name Accessibility: Ratings must have accessible labelling: name, aria-label, aria-labelledby or itemLabel which generates aria-label βœ…
spin-button-needs-labelling Accessibility: SpinButtons must have an accessible label βœ…
spin-button-unrecommended-labelling Accessibility: Unrecommended accessibility labelling - SpinButton βœ…
spinner-needs-labelling Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes βœ…
switch-needs-labelling Accessibility: Switch must have an accessible label βœ…
tablist-and-tabs-need-labelling This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled. βœ…
toolbar-missing-aria Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby βœ…
tooltip-not-recommended Accessibility: Prefer text content or aria over a tooltip for these components MenuItem, SpinButton βœ…
visual-label-better-than-aria-suggestion Visual label is better than an aria-label because sighted users can't read the aria-label text. βœ