-
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 #61 from microsoft/joliveira/issue-60
Added rule for Avatar in FluentUI v9
- Loading branch information
Showing
6 changed files
with
161 additions
and
3 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,33 @@ | ||
| # Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby (`@microsoft/fluentui-jsx-a11y/avatar-needs-name-v9`) | ||
|
|
||
| <!-- end auto-generated rule header --> | ||
|
|
||
| All interactive elements must have an accessible name. | ||
|
|
||
| Avatar lacks an accessible name without a name or accessible labelling. | ||
|
|
||
| <https://www.w3.org/TR/html-aria/> | ||
|
|
||
| ## Rule Details | ||
|
|
||
| This rule aims to prevent an avatar from not having an accessible name. | ||
|
|
||
| Examples of **incorrect** code for this rule: | ||
|
|
||
| ```jsx | ||
| <Avatar image={{ src: "example-image" }} /> | ||
| <Avatar image={{ src: "example-image" }}></Avatar> | ||
|
|
||
| <Label>Start date</Label> | ||
| <Avatar image={{ src: "example-image" }} /> | ||
| ``` | ||
|
|
||
| Examples of **correct** code for this rule: | ||
|
|
||
| ```jsx | ||
| <Avatar image={{ src: "example-image" }} name="Jane Doe" /> | ||
| <Avatar image={{ src: "example-image" }} aria-label="Jane Doe" /> | ||
|
|
||
| <Label id="label-1">Jane Doe</Label> | ||
| <Avatar image={{ src: "example-image" }} aria-labelledby="label-1" /> | ||
| ``` |
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,58 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| "use strict"; | ||
|
|
||
| const { hasNonEmptyProp } = require("../util/hasNonEmptyProp"); | ||
| var elementType = require("jsx-ast-utils").elementType; | ||
| const { hasAssociatedLabelViaAriaLabelledBy } = require("../util/labelUtils"); | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Rule Definition | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| // possible error messages for the rule | ||
| messages: { | ||
| missingAriaLabel: "Accessibility: Avatar must have an accessible name" | ||
| }, | ||
| // "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: { | ||
| // DONE | ||
| description: "Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby", | ||
| 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 an Avatar, return | ||
| if (elementType(node) !== "Avatar") { | ||
| return; | ||
| } | ||
|
|
||
| // if the Avatar has a name, aria-label or aria-labelledby, return | ||
| if ( | ||
| hasNonEmptyProp(node.attributes, "name") || | ||
| hasNonEmptyProp(node.attributes, "aria-label") || | ||
| hasAssociatedLabelViaAriaLabelledBy(node, context) | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| // no aria | ||
| context.report({ | ||
| node, | ||
| messageId: `missingAriaLabel` | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
| }; |
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,65 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| "use strict"; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Requirements | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const RuleTester = require("eslint").RuleTester; | ||
|
|
||
| const rule = require("../../../lib/rules/avatar-needs-name-v9"); | ||
|
|
||
| RuleTester.setDefaultConfig({ | ||
| parserOptions: { | ||
| ecmaVersion: 6, | ||
| ecmaFeatures: { | ||
| jsx: true | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Tests | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const ruleTester = new RuleTester(); | ||
| ruleTester.run("avatar-needs-name-v9", rule, { | ||
| valid: [ | ||
| // give me some code that won't trigger a warning | ||
| '<Avatar name="Jane Doe" />', | ||
| '<Avatar aria-label="Jane Doe" />', | ||
| '<><Label id="label-id">Jane Doe</Label><Avatar aria-labelledby="label-id" /></>', | ||
| '<Avatar name="Jane Doe"></Avatar>', | ||
| '<Avatar aria-label="Jane Doe"></Avatar>', | ||
| '<><Label id="label-id">Jane Doe</Label><Avatar aria-labelledby="label-id"></Avatar></>' | ||
| ], | ||
|
|
||
| invalid: [ | ||
| { | ||
| code: "<Avatar />", | ||
| errors: [{ messageId: "missingAriaLabel" }] | ||
| }, | ||
| { | ||
| code: "<Avatar></Avatar>", | ||
| errors: [{ messageId: "missingAriaLabel" }] | ||
| }, | ||
| { | ||
| code: "<Avatar icon={<CloseIcon />}></Avatar>", | ||
| errors: [{ messageId: "missingAriaLabel" }] | ||
| }, | ||
| { | ||
| code: "<Avatar icon={<CloseIcon />} />", | ||
| errors: [{ messageId: "missingAriaLabel" }] | ||
| }, | ||
| { | ||
| code: "<Avatar image={{ src: \"example-image\" }}></Avatar>", | ||
| errors: [{ messageId: "missingAriaLabel" }] | ||
| }, | ||
| { | ||
| code: "<Avatar image={{ src: \"example-image\" }} />", | ||
| errors: [{ messageId: "missingAriaLabel" }] | ||
| } | ||
| ] | ||
| }); |