-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #90 from Harsh-Modi278/user/harshmodi/SpinnerLintRule
feat: Add lint rule for Spinner component
- Loading branch information
Showing
7 changed files
with
218 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| # 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. | ||
|
|
||
| <!-- end auto-generated rule header --> | ||
|
|
||
| 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: | ||
|
|
||
| ```jsx | ||
| <Spinner {...props} /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| {...props} | ||
| aria-label="some text" | ||
| /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| {...props} | ||
| aria-live="polite" | ||
| /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| size="large" | ||
| label="Large Spinner" | ||
| aria-live="polite" | ||
| /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| size="large" | ||
| label="Large Spinner" | ||
| aria-busy="true" | ||
| /> | ||
| ``` | ||
|
|
||
| Examples of **correct** code for this rule: | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| {...props} | ||
| aria-label="my screen reader text" | ||
| aria-live="polite" | ||
| aria-busy="false" | ||
| /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| {...props} | ||
| aria-label="my screen reader text" | ||
| aria-live="polite" | ||
| aria-busy="true" | ||
| /> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Spinner | ||
| {...props} | ||
| label="my text" | ||
| aria-live="polite" | ||
| aria-busy="true" | ||
| /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| "use strict"; | ||
|
|
||
| const { hasNonEmptyProp } = require("../util/hasNonEmptyProp"); | ||
| const elementType = require("jsx-ast-utils").elementType; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Rule Definition | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| // possible error messages for the rule | ||
| messages: { | ||
| noUnlabelledSpinner: "Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes" | ||
| }, | ||
| // "problem" means the rule is identifying code that either will cause an error or may cause a confusing behavior: https://eslint.org/docs/latest/developer-guide/working-with-rules | ||
| type: "problem", | ||
| // docs for the rule | ||
| docs: { | ||
| description: "Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes", | ||
| recommended: true, | ||
| url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule | ||
| }, | ||
| schema: [] | ||
| }, | ||
| // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree | ||
| create(context) { | ||
| return { | ||
| // visitor functions for different types of nodes | ||
| JSXOpeningElement(node) { | ||
| // if it is not a Spinner, return | ||
| if (elementType(node) !== "Spinner") { | ||
| return; | ||
| } | ||
|
|
||
| if (hasNonEmptyProp(node.attributes, "aria-busy") | ||
| && hasNonEmptyProp(node.attributes, "aria-live") | ||
| && (hasNonEmptyProp(node.attributes, "label") || hasNonEmptyProp(node.attributes, "aria-label")) | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| // if it has no visual labelling, report error | ||
| context.report({ | ||
| node, | ||
| messageId: `noUnlabelledSpinner` | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| "use strict"; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Requirements | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const rule = require("../../../lib/rules/spinner-needs-labelling"), | ||
| RuleTester = require("eslint").RuleTester; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Tests | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const ruleTester = new RuleTester(); | ||
| ruleTester.run("spinner-needs-labelling", rule, { | ||
| valid: [ | ||
| `<Spinner aria-label="my screen reader text" aria-live="polite" aria-busy="false" />`, | ||
| `<Spinner appearance="primary" label="Primary Spinner" aria-label="his screen reader text" aria-live="polite" aria-busy="true" />`, | ||
| `<Spinner appearance="primary" label="Secondary Spinner" aria-live="polite" aria-busy="false" />`, | ||
| `<Spinner appearance="primary" aria-label="your screen reader text" aria-live="polite" aria-busy="true" />`, | ||
| ], | ||
| invalid: [ | ||
| { | ||
| code: `<Spinner />`, | ||
| errors: [{ messageId: "noUnlabelledSpinner" }] | ||
| }, | ||
| { | ||
| code: `<Spinner appearance="primary" label="Primary Spinner" />`, | ||
| errors: [{ messageId: "noUnlabelledSpinner" }] | ||
| }, | ||
| { | ||
| code: `<Spinner size="large" aria-label="some text" />`, | ||
| errors: [{ messageId: "noUnlabelledSpinner" }] | ||
| }, | ||
| { | ||
| code: `<Spinner size="large" label="Large Spinner" aria-live="polite" />`, | ||
| errors: [{ messageId: "noUnlabelledSpinner" }] | ||
| }, | ||
| { | ||
| code: `<Spinner size="large" label="Large Spinner" aria-busy="true" />`, | ||
| errors: [{ messageId: "noUnlabelledSpinner" }] | ||
| }, | ||
| { | ||
| code : `<Spinner aria-label="my screen reader text" aria-live="polite" />`, | ||
| errors: [{ messageId: "noUnlabelledSpinner" }] | ||
| } | ||
| ] | ||
| }); | ||
|
|