-
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 #108 from Harsh-Modi278/user/harshmodi/FieldLintRule
feat: Add lint rule for Field component
- Loading branch information
Showing
9 changed files
with
246 additions
and
6 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
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,15 @@ | ||
| export namespace meta { | ||
| namespace messages { | ||
| let noUnlabelledField: string; | ||
| } | ||
| let type: string; | ||
| namespace docs { | ||
| let description: string; | ||
| let recommended: boolean; | ||
| let url: string; | ||
| } | ||
| let schema: never[]; | ||
| } | ||
| export function create(context: any): { | ||
| JSXOpeningElement(node: any): void; | ||
| }; |
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,46 @@ | ||
| // 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: { | ||
| noUnlabelledField: "Accessibility: Field must have either label, validationMessage and hint 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: Field must have either label, validationMessage and hint 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) !== "Field") { | ||
| return; | ||
| } | ||
| if (hasNonEmptyProp(node.attributes, "label", true) && | ||
| (hasNonEmptyProp(node.attributes, "validationMessage", true) || hasNonEmptyProp(node.attributes, "hint", true))) { | ||
| return; | ||
| } | ||
| // if it has no visual labelling, report error | ||
| context.report({ | ||
| node, | ||
| messageId: `noUnlabelledField` | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
| }; |
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,61 @@ | ||
| # Accessibility: Field must have either label, validationMessage and hint attributes (`@microsoft/fluentui-jsx-a11y/field-needs-labelling`) | ||
|
|
||
| 💼 This rule is enabled in the ✅ `recommended` config. | ||
|
|
||
| <!-- end auto-generated rule header --> | ||
|
|
||
| Field must have `label` prop and either `validationMessage` or `hint` prop. | ||
|
|
||
| <https://www.w3.org/TR/html-aria/> | ||
|
|
||
| ## Ways to fix | ||
|
|
||
| - Make sure that Field component has following props: | ||
| - `label` | ||
| - `validationMessage` or `hint` | ||
|
|
||
| ## Rule Details | ||
|
|
||
| This rule aims to make Field component accessible. | ||
|
|
||
| Examples of **incorrect** code for this rule: | ||
|
|
||
| ```jsx | ||
| <Field | ||
| label="Example field" | ||
| validationState="success" | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Field | ||
| validationState="success" | ||
| hint="This is a hint." | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field> | ||
| ``` | ||
|
|
||
| Examples of **correct** code for this rule: | ||
|
|
||
| ```jsx | ||
| <Field | ||
| label="Example field" | ||
| validationState="success" | ||
| validationMessage="This is a success message." | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <Field | ||
| label="Example field" | ||
| validationState="success" | ||
| hint="This is a hint." | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field> | ||
| ``` |
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: { | ||
| noUnlabelledField: "Accessibility: Field must have either label, validationMessage and hint 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: Field must have either label, validationMessage and hint 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) !== "Field") { | ||
| return; | ||
| } | ||
|
|
||
| if ( | ||
| hasNonEmptyProp(node.attributes, "label", true) && | ||
| (hasNonEmptyProp(node.attributes, "validationMessage", true) || hasNonEmptyProp(node.attributes, "hint", true)) | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| // if it has no visual labelling, report error | ||
| context.report({ | ||
| node, | ||
| messageId: `noUnlabelledField` | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
|
|
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,56 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| "use strict"; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Requirements | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const rule = require("../../../lib/rules/field-needs-labelling"), | ||
| RuleTester = require("eslint").RuleTester; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Tests | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const ruleTester = new RuleTester(); | ||
| ruleTester.run("field-needs-labelling", rule, { | ||
| valid: [ | ||
| `<Field | ||
| label="Example field" | ||
| validationState="success" | ||
| validationMessage="This is a success message." | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field>`, | ||
| `<Field | ||
| label="Example field" | ||
| validationState="success" | ||
| hint="This is a hint." | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field>` | ||
| ], | ||
| invalid: [ | ||
| { | ||
| code: `<Field | ||
| label="Example field" | ||
| validationState="success" | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field>`, | ||
| errors: [{ messageId: "noUnlabelledField" }] | ||
| }, | ||
| { | ||
| code: `<Field | ||
| validationState="success" | ||
| hint="This is a hint." | ||
| > | ||
| <ProgressBar value={0.5} max={1} /> | ||
| </Field>`, | ||
| errors: [{ messageId: "noUnlabelledField" }] | ||
| } | ||
| ] | ||
| }); | ||
|
|