Project

Under Construction

A set of eslint rules against FluentUI to prevent common accessibility issues.

ESLint

This plugin was generated with The ESLint generator for Yeoman: eslint/generator-eslint.

eslint:plugin

yo eslint:plugin

eslint:rule

If you want to create a new ESLint rule, make sure you're in the top-level directory of an ESLint repo clone or an ESLint plugin and type:

yo eslint:rule

Installation

Before installing, make sure to authenticate with GitHub Package Registry or using a .npmrc file. See "Configuring npm for use with GitHub Package Registry."

$ npm install -D @microsoft/fluentui-eslint-plugin-jsx-a11y

Or add this package to your package.json file:

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

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

🔧 Automatically fixable by the --fix CLI option.

Name	Description	🔧
icon-text-content-button-does-not-need-aria	Accessibility: an image button with text content does not need aria labelling. The button already has an accessible name and the aria-label or aria-labelledby will override the text content for screen reader users.
image-button-missing-aria	Accessibility: Image buttons must have accessible labelling: aria-label, aria-labelledby, aria-describedby
image-button-prefer-aria-over-title-attribute	Accessibility: prefer wai-aria over title or placeholder attributes. Title/placeholder can be used in addition to wai-aria. aria-label, aria-labelledby, aria-describedby
image-link-missing-aria-v9	Accessibility: Image links must have an accessible name	🔧
no-empty-buttons	Accessibility: buttons must either text content or accessible labelling
object-literal-button-no-missing-aria	Accessibility: Object literal image buttons must have accessible labelling: aria-label, aria-labelledby, aria-describedby
text-area-missing-label-v9	Accessibility: Textarea must have an accessible name
text-content-button-does-not-need-aria	Accessibility: a button with text content does not need aria labelling. The button already has an accessible name and the aria-label will override the text content for screen reader users.