14 |
15 | ## Rule Details
16 |
17 | This rule aims to ensure that dismissible Tag components have an aria-label on the dismiss button.
18 |
19 | Examples of **incorrect** code for this rule:
20 |
21 | ```jsx
22 | Dismissible tag
23 | ```
24 |
25 | ```jsx
26 | Dismissible tag
27 | ```
28 |
29 | ```jsx
30 | Dismissible tag
31 | ```
32 |
33 | Examples of **correct** code for this rule:
34 |
35 | ```jsx
36 | Regular tag
37 | ```
38 |
39 | ```jsx
40 | Dismissible tag
45 | ```
46 |
47 | ```jsx
48 | Product Product Label name
19 | Label name
26 | Label name
33 | Label name
59 |
60 | ```
61 |
62 | or
63 |
64 | ```jsx
65 | Medium Slider
66 |
73 |
75 | ```
76 |
--------------------------------------------------------------------------------
/scripts/boilerplate/rule.js:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | const { withCRLF } = require("./util");
5 |
6 | const ruleBoilerplate = (name, description) =>
7 | withCRLF(`// Copyright (c) Microsoft Corporation.
8 | // Licensed under the MIT License.
9 |
10 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
11 |
12 | //------------------------------------------------------------------------------
13 | // Rule Definition
14 | //------------------------------------------------------------------------------
15 |
16 | // RuleCreator requires a URL or documentation link, but it can be a placeholder
17 | const createRule = ESLintUtils.RuleCreator(name => "https://example.com/rule/${name}");
18 |
19 | const rule = createRule({
20 | name: "${name}",
21 | meta: {
22 | type: "suggestion", // could be "problem", "suggestion", or "layout"
23 | docs: {
24 | description: "${description}",
25 | recommended: "error" // could also be "warn"
26 | },
27 | messages: {
28 | errorMessage: "" // describe the issue
29 | },
30 | schema: [] // no options for this rule
31 | },
32 | defaultOptions: [], // no options needed
33 | create(context) {
34 | return {
35 | // Listen for variable declarations
36 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
37 | context.report({
38 | node,
39 | messageId: "errorMessage"
40 | });
41 | }
42 | };
43 | }
44 | });
45 |
46 | export default rule;
47 | `);
48 | module.exports = ruleBoilerplate;
49 |
--------------------------------------------------------------------------------
/docs/rules/compound-button-needs-labelling.md:
--------------------------------------------------------------------------------
1 | # Accessibility: Compound buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/compound-button-needs-labelling`)
2 |
3 | 💼 This rule is enabled in the ✅ `recommended` config.
4 |
5 |
6 |
7 | All interactive elements must have an accessible name.
8 | Please add title, aria-label, aria-labelledby, aria-describedBy, secondaryContent etc.
9 |
10 | Start date
25 | Compound example
35 | Compound example
38 |
42 |
44 | ```
45 |
--------------------------------------------------------------------------------
/lib/util/hasDefinedProp.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { TSESTree } from "@typescript-eslint/utils";
5 | import { JSXOpeningElement } from "estree-jsx";
6 | import { hasProp, getPropValue, getProp } from "jsx-ast-utils";
7 |
8 | /**
9 | * Determines if the property exists and has a non-nullish value.
10 | * @param attributes The attributes on the visited node
11 | * @param name The name of the prop to check
12 | * @returns Whether the specified prop exists and is not null or undefined
13 | * @example
14 | * // Breadcrumb default example
',
21 | 'Breadcrumb default example
'
22 | ],
23 | invalid: [
24 | {
25 | code: 'Breadcrumb default example
',
26 | errors: [{ messageId: "noUnlabelledBreadcrumb" }]
27 | },
28 | {
29 | code: "Breadcrumb default example ",
30 | errors: [{ messageId: "noUnlabelledBreadcrumb" }]
31 | },
32 | {
33 | code: "
23 | Test
24 |
25 | Close
26 | Do Something
27 |
28 |
29 | ```
30 |
31 | ```jsx
32 |
33 | Dialog title
34 |
35 | Close
36 | Do Something
37 |
38 |
39 | ```
40 |
41 | ```jsx
42 |
43 | Dialog title
44 | Test
45 |
46 | ```
47 |
48 | Examples of **correct** code for this rule:
49 |
50 | ```jsx
51 |
52 | Dialog title
53 | Test
54 |
55 | Close
56 | Do Something
57 |
58 |
59 | ```
60 |
--------------------------------------------------------------------------------
/docs/rules/link-missing-labelling.md:
--------------------------------------------------------------------------------
1 | # Accessibility: Image links must have an accessible name. Add either text content, labelling to the image or labelling to the link itself (`@microsoft/fluentui-jsx-a11y/link-missing-labelling`)
2 |
3 | 💼 This rule is enabled in the ✅ `recommended` config.
4 |
5 | 🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
6 |
7 |
8 |
9 | All interactive elements must have an accessible name.
10 |
11 | Links that contain Images without additional text content lack an accessible name.
12 |
13 | Ways to fix:
14 |
15 | 1. Add a title, aria-label or aria-labelledby attribute or text content to the Link element.
16 | 2. Add a alt text, title, aria-label or aria-labelledby attribute to the Image element.
17 |
18 | Options `,
20 | `<>Options This is a switch.
30 | This is a Radio.
39 |
48 |
51 | ```
52 |
53 | ```jsx
54 |
55 |
56 |
59 |
60 | ```
61 |
--------------------------------------------------------------------------------
/tests/lib/rules/tag-needs-labelling.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { Rule } from "eslint";
5 | import ruleTester from "./helper/ruleTester";
6 | import rule from "../../../lib/rules/tag-needs-labelling";
7 |
8 | //------------------------------------------------------------------------------
9 | // Requirements
10 | //------------------------------------------------------------------------------
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("tag-needs-name", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | // Valid cases for Tag component
19 | "Tag with some text ",
20 | "Some text ",
21 | 'Some text ',
23 | "
12 |
13 |
14 |
15 | ## Ways to fix
16 |
17 | - Make sure that Spinner component has following attributes:
18 | - aria-live
19 | - aria-busy
20 | - either label or aria-label
21 |
22 | ## Rule Details
23 |
24 | This rule aims to make Spinners accessible.
25 |
26 | Examples of **incorrect** code for this rule:
27 |
28 | ```jsx
29 | 5 `,
22 | `
`
23 | ],
24 |
25 | invalid: [
26 | {
27 | code: `Heading 1
31 | Accordion Header 1
38 | ```
39 |
40 | ```jsx
41 |
29 | Settings Tab
30 |
31 |
32 |
33 | Settings Label
34 | Settings Tab
35 |
36 |
37 |
38 | Settings Label
39 | Settings Tab
40 |
41 |
42 | ```
43 |
44 | Examples of **correct** code for this rule:
45 |
46 | ```jsx
47 |
48 | Settings
53 |
54 |
55 | Settings Tab
56 |
57 |
58 |
59 | Settings Label
60 | Settings Tab
61 |
62 |
63 | ```
64 |
--------------------------------------------------------------------------------
/tests/lib/rules/utils/hasValidNestedProp.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | jest.mock("jsx-ast-utils", () => ({
5 | getProp: jest.fn(),
6 | getPropValue: jest.fn()
7 | }));
8 |
9 | import { getProp, getPropValue } from "jsx-ast-utils";
10 | import { hasValidNestedProp } from "../../../../lib/util/hasValidNestedProp";
11 |
12 | describe("hasValidNestedProp", () => {
13 | const opening = { attributes: [] } as any;
14 |
15 | beforeEach(() => {
16 | (getProp as jest.Mock).mockReset();
17 | (getPropValue as jest.Mock).mockReset();
18 | });
19 |
20 | test("returns false when the prop is not present (e.g. 999+
47 | ```
48 |
49 | ## Further Reading
50 |
51 |
52 |
--------------------------------------------------------------------------------
/tests/lib/rules/avatar-needs-name.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/avatar-needs-name";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("avatar-needs-name", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | // give me some code that won't trigger a warning
19 | 'Jane Doe Jane Doe Settings ",
21 | 'More option
',
22 | 'More option
',
23 | 'Settings
",
37 | errors: [{ messageId: "noUnlabelledMenuItem" }]
38 | },
39 | {
40 | code: "Settings ",
41 | errors: [{ messageId: "noUnlabelledMenuItem" }]
42 | }
43 | ]
44 | });
45 |
--------------------------------------------------------------------------------
/tests/lib/rules/avoid-using-aria-describedby-for-primary-labelling.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/avoid-using-aria-describedby-for-primary-labelling";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("avoid-using-aria-describedby-for-primary-labelling", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | '<>Click to submit your form. This will save your data. ',
19 | '<>Submit Click to submit your form. This will save your data. ',
20 | '<>Name This field is for your full legal name. '
21 | ],
22 | invalid: [
23 | {
24 | code: '<>Click to submit your form. This will save your data. ',
25 | errors: [{ messageId: "noAriaDescribedbyAsLabel" }]
26 | },
27 | {
28 | code: '<>Name ',
29 | errors: [{ messageId: "noAriaDescribedbyAsLabel" }]
30 | },
31 | {
32 | code: '<>Name ',
33 | errors: [{ messageId: "noAriaDescribedbyAsLabel" }]
34 | }
35 | ]
36 | });
37 |
--------------------------------------------------------------------------------
/tests/lib/rules/accordion-item-needs-header-and-panel.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/accordion-item-needs-header-and-panel";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("accordion-item-needs-header-and-panel", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | `Accordion Header 1 Accordion Panel 1
Accordion Header 2 Accordion Panel 3
Accordion Header 1 Accordion Header 2 Accordion Panel 3
Accordion Header 1 Accordion Panel 1
Accordion Panel 2
Some Label <${componentName} id="some-id"/>`,
21 | `<>Some Label <${componentName} id="some-id" aria-labelledby="test-span"/>`,
22 | `test<${componentName} /> `,
23 | `<>This is the visual label <${componentName} aria-labelledby="id1" />`
24 | ],
25 | invalid: [
26 | {
27 | code: `<${componentName} aria-label="This is a component with aria-label" />`,
28 | errors: [{ messageId: "visualLabelSuggestion" }]
29 | }
30 | ]
31 | };
32 | };
33 |
34 | // Collect all test cases for all applicable components
35 | const allTestCases = applicableComponents.flatMap(component => generateTestCases(component));
36 |
37 | //------------------------------------------------------------------------------
38 | // Tests
39 | //------------------------------------------------------------------------------
40 |
41 | ruleTester.run("visual-label-better-than-aria-suggestion", rule as unknown as Rule.RuleModule, {
42 | valid: allTestCases.flatMap(test => test.valid),
43 | invalid: allTestCases.flatMap(test => test.invalid)
44 | });
45 |
--------------------------------------------------------------------------------
/tests/lib/rules/toolbar-missing-aria.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/toolbar-missing-aria";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("toolbar-missing-aria", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | 'Some Label Some Label Some Label Settings Tab Settings Label Settings Tab Settings "
25 | ],
26 |
27 | invalid: [
28 | // Invalid cases for Tablist
29 | {
30 | code: "Settings Tab Settings Label Settings Tab Settings Label Settings Tab Example ',
22 | "Close Close
19 | Dialog title
20 | Test
21 |
22 | Close
23 | Do Something
24 |
25 | `,
26 | `
32 | Test
33 |
34 | Close
35 | Do Something
36 |
37 | `,
38 | errors: [{ messageId: "dialogBodyOneTitleOneContentOneFooter" }]
39 | },
40 | {
41 | code: `
42 | Dialog title
43 |
44 | Close
45 | Do Something
46 |
47 | `,
48 | errors: [{ messageId: "dialogBodyOneTitleOneContentOneFooter" }]
49 | },
50 | {
51 | code: `
52 | Dialog title
53 | Test
54 | `,
55 | errors: [{ messageId: "dialogBodyOneTitleOneContentOneFooter" }]
56 | }
57 | ]
58 | });
59 |
--------------------------------------------------------------------------------
/tests/lib/rules/infolabel-needs-labelling.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/infolabel-needs-labelling";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("infolabel-needs-labelling", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | `Help text `,
20 | `? `,
21 | `ℹ️ `,
22 | `<>Information Information Example ",
19 | 'Compound Example Compound Example Compound Example
23 |
24 | Accordion Header 1
25 | Accordion Header 2
26 |
27 | Accordion Panel 1
28 |
29 |
30 |
31 | ```
32 |
33 | ```jsx
34 |
35 |
36 | Accordion Header 1
37 |
38 | Accordion Panel 1
39 |
40 |
41 | Accordion Panel 2
42 |
43 |
44 |
45 | ```
46 |
47 | Examples of **correct** code for this rule:
48 |
49 | ```jsx
50 |
51 |
52 | Accordion Header 1
53 |
54 | Accordion Panel 1
55 |
56 |
57 |
58 | ```
59 |
60 | ## Further Reading
61 |
62 | [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
63 |
--------------------------------------------------------------------------------
/lib/rules/visual-label-better-than-aria-suggestion.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
5 | import { applicableComponents } from "../applicableComponents/inputBasedComponents";
6 | import { dropdownBasedComponents } from "../applicableComponents/dropdownBasedComponents";
7 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
8 | import { elementType } from "jsx-ast-utils";
9 | import { JSXOpeningElement } from "estree-jsx";
10 |
11 | //------------------------------------------------------------------------------
12 | // Rule Definition
13 | //------------------------------------------------------------------------------
14 |
15 | const rule = ESLintUtils.RuleCreator.withoutDocs({
16 | defaultOptions: [],
17 | meta: {
18 | // possible warning messages for the lint rule
19 | messages: {
20 | visualLabelSuggestion: `Visual label is better than an aria-label`
21 | },
22 | type: "suggestion", // `problem`, `suggestion`, or `layout`
23 | docs: {
24 | description: "Visual label is better than an aria-label because sighted users can't read the aria-label text.",
25 | recommended: "strict",
26 | url: undefined // URL to the documentation page for this rule
27 | },
28 | fixable: undefined, // Or `code` or `whitespace`
29 | schema: [] // Add a schema if the rule has options
30 | },
31 |
32 | // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
33 | create(context) {
34 | return {
35 | // visitor functions for different types of nodes
36 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
37 | // if it is not a listed component, return
38 | if (![dropdownBasedComponents, ...applicableComponents].includes(elementType(node as unknown as JSXOpeningElement))) {
39 | return;
40 | }
41 |
42 | // if the element contains aria-label, show the warning message
43 | if (hasNonEmptyProp(node.attributes, "aria-label")) {
44 | context.report({
45 | node,
46 | messageId: `visualLabelSuggestion`
47 | });
48 | }
49 | }
50 | };
51 | }
52 | });
53 |
54 | export default rule;
55 |
--------------------------------------------------------------------------------
/lib/rules/rating-needs-name.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | "use strict";
5 |
6 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
7 | import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
8 | import { elementType } from "jsx-ast-utils";
9 | import { hasAssociatedLabelViaAriaLabelledBy } from "../util/labelUtils";
10 | import { JSXOpeningElement } from "estree-jsx";
11 |
12 | const rule = ESLintUtils.RuleCreator.withoutDocs({
13 | defaultOptions: [],
14 | meta: {
15 | // possible error messages for the rule
16 | messages: {
17 | missingAriaLabel: "Accessibility - ratings must have an accessible name or an itemLabel that generates an aria label"
18 | },
19 | // "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
20 | type: "problem",
21 | // docs for the rule
22 | docs: {
23 | description:
24 | "Accessibility: Ratings must have accessible labelling: name, aria-label, aria-labelledby or itemLabel which generates aria-label",
25 | recommended: "strict",
26 | url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
27 | },
28 | schema: []
29 | },
30 |
31 | create(context) {
32 | return {
33 | // visitor functions for different types of nodes
34 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
35 | // if it is not a listed component, return
36 | if (elementType(node as JSXOpeningElement) !== "Rating") {
37 | return;
38 | }
39 |
40 | // wrapped in Label tag, labelled with htmlFor, labelled with aria-labelledby
41 | if (
42 | hasNonEmptyProp(node.attributes, "itemLabel") ||
43 | hasNonEmptyProp(node.attributes, "name") ||
44 | hasNonEmptyProp(node.attributes, "aria-label") ||
45 | hasAssociatedLabelViaAriaLabelledBy(node, context)
46 | ) {
47 | return;
48 | }
49 |
50 | context.report({
51 | node,
52 | messageId: `missingAriaLabel`
53 | });
54 | }
55 | };
56 | }
57 | });
58 |
59 | export default rule;
60 |
--------------------------------------------------------------------------------
/lib/rules/spin-button-unrecommended-labelling.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
5 | import { elementType } from "jsx-ast-utils";
6 | import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
7 | import { hasToolTipParent } from "../util/hasTooltipParent";
8 | import { JSXOpeningElement } from "estree-jsx";
9 |
10 | //------------------------------------------------------------------------------
11 | // Rule Definition
12 | //------------------------------------------------------------------------------
13 |
14 | const rule = ESLintUtils.RuleCreator.withoutDocs({
15 | defaultOptions: [],
16 | meta: {
17 | // possible suggestion messages for the rule
18 | messages: {
19 | unRecommendedlabellingSpinButton: "Accessibility: Unrecommended accessibility labelling - SpinButton"
20 | },
21 | // "problem" means the rule is identifying something that could be done in a better way but no errors will occur if the code isn’t changed: https://eslint.org/docs/latest/developer-guide/working-with-rules
22 | type: "suggestion",
23 | // docs for the rule
24 | docs: {
25 | description: "Accessibility: Unrecommended accessibility labelling - SpinButton",
26 | recommended: "strict",
27 | url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
28 | },
29 | schema: []
30 | },
31 | // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
32 | create(context) {
33 | return {
34 | // visitor functions for different types of nodes
35 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
36 | // if it is not a SpinButton, return
37 | if (elementType(node as JSXOpeningElement) !== "SpinButton") {
38 | return;
39 | }
40 |
41 | // if the SpinButton has an aria-label or is wrapped in a Tooltip, show warning
42 | if (hasNonEmptyProp(node.attributes, "aria-label") || hasToolTipParent(context)) {
43 | context.report({
44 | node,
45 | messageId: `unRecommendedlabellingSpinButton`
46 | });
47 | }
48 | }
49 | };
50 | }
51 | });
52 |
53 | export default rule;
54 |
--------------------------------------------------------------------------------
/lib/rules/breadcrumb-needs-labelling.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
5 | import { elementType } from "jsx-ast-utils";
6 | import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
7 | import { hasAssociatedLabelViaAriaLabelledBy } from "../util/labelUtils";
8 | import { JSXOpeningElement } from "estree-jsx";
9 |
10 | //------------------------------------------------------------------------------
11 | // Rule Definition
12 | //------------------------------------------------------------------------------
13 |
14 | const rule = ESLintUtils.RuleCreator.withoutDocs({
15 | defaultOptions: [],
16 | meta: {
17 | // possible error messages for the rule
18 | messages: {
19 | noUnlabelledBreadcrumb: "Accessibility: Breadcrumb must have an accessible label"
20 | },
21 | // "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
22 | type: "problem",
23 | docs: {
24 | description: "All interactive elements must have an accessible name",
25 | recommended: false,
26 | url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
27 | },
28 | schema: [] // Add a schema if the rule has options
29 | },
30 |
31 | create(context) {
32 | return {
33 | // visitor functions for different types of nodes
34 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
35 | // if it is not a Breadcrumb, return
36 | if (elementType(node as JSXOpeningElement) !== "Breadcrumb") {
37 | return;
38 | }
39 |
40 | // if the Breadcrumb has a label, if the Breadcrumb has an associated label, return
41 | if (
42 | hasNonEmptyProp(node.attributes, "aria-label") || //aria-label
43 | hasAssociatedLabelViaAriaLabelledBy(node, context) // aria-labelledby
44 | ) {
45 | return;
46 | }
47 |
48 | // if it has no visual labelling, report error
49 | context.report({
50 | node,
51 | messageId: `noUnlabelledBreadcrumb`
52 | });
53 | }
54 | };
55 | }
56 | });
57 |
58 | export default rule;
59 |
--------------------------------------------------------------------------------
/tests/lib/rules/utils/hasDefinedProp.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { TSESTree } from "@typescript-eslint/utils";
5 | import { getProp, getPropValue, hasProp } from "jsx-ast-utils";
6 | import { hasDefinedProp } from "../../../../lib/util/hasDefinedProp";
7 |
8 | // Mocking getProp, getPropValue, and hasProp
9 | jest.mock("jsx-ast-utils", () => ({
10 | hasProp: jest.fn(),
11 | getProp: jest.fn(),
12 | getPropValue: jest.fn()
13 | }));
14 |
15 | describe("hasDefinedProp", () => {
16 | const attributes: TSESTree.JSXOpeningElement["attributes"] = [];
17 | const propName = "testProp";
18 |
19 | beforeEach(() => {
20 | jest.clearAllMocks();
21 | });
22 |
23 | it("should return false if the property does not exist", () => {
24 | (hasProp as jest.Mock).mockReturnValue(false);
25 | const result = hasDefinedProp(attributes, propName);
26 | expect(result).toBe(false);
27 | });
28 |
29 | it("should return false if the property is falsy", () => {
30 | (hasProp as jest.Mock).mockReturnValue(true);
31 | (getProp as jest.Mock).mockReturnValue(null);
32 | const result = hasDefinedProp(attributes, propName);
33 | expect(result).toBe(false);
34 | });
35 |
36 | it("should return false if the property value is undefined", () => {
37 | (hasProp as jest.Mock).mockReturnValue(true);
38 | (getProp as jest.Mock).mockReturnValue({});
39 | (getPropValue as jest.Mock).mockReturnValue(undefined);
40 | const result = hasDefinedProp(attributes, propName);
41 | expect(result).toBe(false);
42 | });
43 |
44 | it("should return false if the property value is null", () => {
45 | (hasProp as jest.Mock).mockReturnValue(true);
46 | (getProp as jest.Mock).mockReturnValue({});
47 | (getPropValue as jest.Mock).mockReturnValue(null);
48 | const result = hasDefinedProp(attributes, propName);
49 | expect(result).toBe(false);
50 | });
51 |
52 | ["non-empty string", "", 1, 0, true, false, [], {}].forEach(value => {
53 | it(`should return true if the property value is: ${JSON.stringify(value)}`, () => {
54 | (hasProp as jest.Mock).mockReturnValue(true);
55 | (getProp as jest.Mock).mockReturnValue({});
56 | (getPropValue as jest.Mock).mockReturnValue(value);
57 | const result = hasDefinedProp(attributes, propName);
58 | expect(result).toBe(true);
59 | });
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/tests/lib/rules/switch-needs-labelling.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/switch-needs-labelling";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("switch-needs-labelling", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | "<>This is a Switch ",
19 | `This is a switch This is a switch This is a switch This is a switch This is a switch This is a switch This is a switch This is a switch This is a switch This is a switch This is a Radio ",
19 | `<>This is a Radio This is a Radio This is a Radio This is a Radio This is a Radio This is a Radio This is a Radio This is a Radio This is a Radio ;
14 |
15 | beforeEach(() => {
16 | mockContext = {
17 | getAncestors: jest.fn()
18 | } as unknown as TSESLint.RuleContext;
19 | });
20 |
21 | test("should return false when there are no ancestors", () => {
22 | (mockContext.getAncestors as jest.Mock).mockReturnValue([]);
23 |
24 | const result = hasToolTipParent(mockContext);
25 | expect(result).toBe(false);
26 | });
27 |
28 | test("should return false when no Tooltip ancestor exists", () => {
29 | const mockAncestors = [
30 | {
31 | type: "JSXElement",
32 | openingElement: {
33 | type: "JSXOpeningElement",
34 | name: { name: "Button" } // Not a Tooltip
35 | }
36 | },
37 | {
38 | type: "JSXElement",
39 | openingElement: {
40 | type: "JSXOpeningElement",
41 | name: { name: "Div" } // Not a Tooltip
42 | }
43 | }
44 | ];
45 | (mockContext.getAncestors as jest.Mock).mockReturnValue(mockAncestors);
46 |
47 | const result = hasToolTipParent(mockContext);
48 | expect(result).toBe(false);
49 | });
50 |
51 | test("should return true when a Tooltip ancestor exists", () => {
52 | const mockAncestors = [
53 | {
54 | type: "JSXElement",
55 | openingElement: {
56 | type: "JSXOpeningElement",
57 | name: { name: "Div" } // Not a Tooltip
58 | }
59 | },
60 | {
61 | type: "JSXElement",
62 | openingElement: {
63 | type: "JSXOpeningElement",
64 | name: { name: "Tooltip" } // This is a Tooltip
65 | }
66 | }
67 | ];
68 | (mockContext.getAncestors as jest.Mock).mockReturnValue(mockAncestors);
69 |
70 | const result = hasToolTipParent(mockContext);
71 | expect(result).toBe(true);
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/lib/rules/avatar-needs-name.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
5 | import { JSXOpeningElement } from "estree-jsx";
6 | import { elementType } from "jsx-ast-utils";
7 | import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
8 | import { hasAssociatedLabelViaAriaLabelledBy } from "../util/labelUtils";
9 |
10 | //------------------------------------------------------------------------------
11 | // Rule Definition
12 | //------------------------------------------------------------------------------
13 |
14 | const rule = ESLintUtils.RuleCreator.withoutDocs({
15 | defaultOptions: [],
16 | meta: {
17 | // possible error messages for the rule
18 | messages: {
19 | missingAriaLabel: "Accessibility: Avatar must have an accessible name"
20 | },
21 | // "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
22 | type: "problem",
23 | // docs for the rule
24 | docs: {
25 | // DONE
26 | description: "Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby",
27 | recommended: "strict",
28 | url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
29 | },
30 | schema: []
31 | },
32 | // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
33 | create(context) {
34 | return {
35 | // visitor functions for different types of nodes
36 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
37 | // if it is not an Avatar, return
38 | if (elementType(node as JSXOpeningElement) !== "Avatar") {
39 | return;
40 | }
41 |
42 | // if the Avatar has a name, aria-label or aria-labelledby, return
43 | if (
44 | hasNonEmptyProp(node.attributes, "name") ||
45 | hasNonEmptyProp(node.attributes, "aria-label") ||
46 | hasAssociatedLabelViaAriaLabelledBy(node, context)
47 | ) {
48 | return;
49 | }
50 |
51 | // no aria
52 | context.report({
53 | node,
54 | messageId: `missingAriaLabel`
55 | });
56 | }
57 | };
58 | }
59 | });
60 |
61 | export default rule;
62 |
--------------------------------------------------------------------------------
/lib/rules/accordion-item-needs-header-and-panel.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { AST_NODE_TYPES, ESLintUtils, TSESTree } from "@typescript-eslint/utils";
5 |
6 | //------------------------------------------------------------------------------
7 | // Rule Definition
8 | //------------------------------------------------------------------------------
9 |
10 | const rule = ESLintUtils.RuleCreator.withoutDocs({
11 | defaultOptions: [],
12 | meta: {
13 | messages: {
14 | accordionItemOneHeaderOnePanel: "ensure AccordionItem has exactly one header and one panel"
15 | },
16 | type: "problem", // `problem`, `suggestion`, or `layout`
17 | docs: {
18 | description: "An AccordionItem needs exactly one header and one panel",
19 | recommended: "strict",
20 | url: "https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" // URL to the documentation page for this rule
21 | },
22 | schema: [] // Add a schema if the rule has options
23 | },
24 |
25 | create(context) {
26 | return {
27 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
28 | const isAccordionItem = node.name.type === AST_NODE_TYPES.JSXIdentifier && node.name.name === "AccordionItem";
29 |
30 | if (!isAccordionItem) return;
31 |
32 | if (!(node.parent && node.parent.type === AST_NODE_TYPES.JSXElement)) {
33 | return;
34 | }
35 |
36 | const children = node.parent.children.filter(child => child.type === "JSXElement");
37 |
38 | const hasOneHeader =
39 | children.filter(
40 | child =>
41 | child.openingElement.name.type === AST_NODE_TYPES.JSXIdentifier &&
42 | child.openingElement.name.name === "AccordionHeader"
43 | ).length === 1;
44 |
45 | const hasOnePanel =
46 | children.filter(
47 | child =>
48 | child.openingElement.name.type === AST_NODE_TYPES.JSXIdentifier &&
49 | child.openingElement.name.name === "AccordionPanel"
50 | ).length === 1;
51 |
52 | if (!hasOneHeader || !hasOnePanel || children.length !== 2) {
53 | context.report({
54 | node,
55 | messageId: "accordionItemOneHeaderOnePanel"
56 | });
57 | }
58 | }
59 | };
60 | }
61 | });
62 |
63 | export default rule;
64 |
--------------------------------------------------------------------------------
/docs/rules/avoid-using-aria-describedby-for-primary-labelling.md:
--------------------------------------------------------------------------------
1 | # Aria-describedby provides additional context and is not meant for primary labeling (`@microsoft/fluentui-jsx-a11y/avoid-using-aria-describedby-for-primary-labelling`)
2 |
3 | 💼 This rule is enabled in the ✅ `recommended` config.
4 |
5 |
6 |
7 | You should avoid using `aria-describedby` as a primary labeling mechanism because it is intended to provide supplementary or additional information, not to act as the main label for an element.
8 |
9 | **Purpose:** `aria-describedby` is designed to describe an element in more detail beyond the primary label, such as offering extended help text, usage instructions, or explanations. It’s meant to be used alongside a label, not to replace it.
10 |
11 | **Accessibility and User Experience:** Some screen readers may not announce content associated with `aria-describedby`, or users might disable this feature for various reasons, such as reducing verbosity or simplifying their experience. This makes relying on `aria-describedby` as the primary labeling mechanism risky because it can lead to critical information being missed by users who need it. Screen readers treat `aria-describedby` differently than `aria-labelledby`. The `aria-labelledby` attribute is explicitly used for primary labeling, and it ensures that the name of an element is read in the expected order and with the right emphasis. On the other hand, `aria-describedby` provides additional context that may be read after the main label, so it may confuse users if used as the primary label.
12 |
13 | ## Rule Details
14 |
15 | Examples of **incorrect** code for this rule:
16 |
17 | ```jsx
18 | Click to submit your form. This will save your data.
20 | ```
21 |
22 | ```jsx
23 | Name
25 | ```
26 |
27 | Examples of **correct** code for this rule:
28 |
29 | ```jsx
30 | Click to submit your form. This will save your data.
32 | ```
33 |
34 | ```jsx
35 | Name
36 | This field is for your full legal name.
38 | ```
39 |
40 | ## Further Reading
41 |
42 | - [ARIA Describedby: Definition & Examples for Screen Readers](https://accessiblyapp.com/blog/aria-describedby/)
43 | - [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)
44 |
45 |
--------------------------------------------------------------------------------
/tests/lib/rules/radioGroup-missing-label.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/radiogroup-missing-label";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("radioGroup-missing-label", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | "<>This is a RadioGroup ",
19 | `<>This is a RadioGroup This is a RadioGroup This is a RadioGroup This is a RadioGroup This is a RadioGroup This is a RadioGroup This is a RadioGroup This is a RadioGroup This is a RadioGroup 999+
`
21 | ],
22 |
23 | invalid: [
24 | {
25 | code: `
16 | `,
19 |
20 | // Field wrapper with label prop
21 | `
22 |
23 |
24 |
26 |
28 | `,
29 |
30 | // tooltip parent
31 | `
32 |
33 |
34 |
36 |
38 | `,
39 |
40 | // htmlFor
41 | `
42 | <>
43 | red
44 | red `,
50 |
51 | // text content child
52 | `red `
53 | ],
54 |
55 | invalid: [
56 | {
57 | // no labels
58 | code: `
59 |
60 |
62 | `,
63 | errors: [{ messageId: "noUnlabeledColorSwatch" }]
64 | },
65 | {
66 | // aria-labelledby
67 | code: `
68 | <>
69 | red
70 |
71 |
73 |
74 | `,
75 | errors: [{ messageId: "noUnlabeledColorSwatch" }]
76 | }
77 | ]
78 | });
79 |
--------------------------------------------------------------------------------
/tests/lib/rules/spin-button-needs-labelling.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | //------------------------------------------------------------------------------
5 | // Requirements
6 | //------------------------------------------------------------------------------
7 |
8 | import { Rule } from "eslint";
9 | import ruleTester from "./helper/ruleTester";
10 | import rule from "../../../lib/rules/spin-button-needs-labelling";
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 |
16 | ruleTester.run("spin-button-needs-labelling", rule as unknown as Rule.RuleModule, {
17 | valid: [
18 | "<>This is a SpinButton ",
19 | `<>This is a spin button This is a spin button This is a spin button This is a spin button This is a spin button This is a spin button This is a spin button This is a spin button This is a spin button This is a spin button This is a Checkbox ",
19 | `<>This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox This is a Checkbox
46 | ```
47 |
48 | Examples of **correct** code for this rule:
49 |
50 | The aria-label will override the title attribute but the title will still display when a mouse is hovered over it.
51 |
52 | ```jsx
53 |
54 | ```
55 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Security
4 |
5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
6 |
7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
8 |
9 | ## Reporting Security Issues
10 |
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 |
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
14 |
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
16 |
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc).
18 |
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 |
21 | - Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 | - Full paths of source file(s) related to the manifestation of the issue
23 | - The location of the affected source code (tag/branch/commit or direct URL)
24 | - Any special configuration required to reproduce the issue
25 | - Step-by-step instructions to reproduce the issue
26 | - Proof-of-concept or exploit code (if possible)
27 | - Impact of the issue, including how an attacker might exploit the issue
28 |
29 | This information will help us triage your report more quickly.
30 |
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
32 |
33 | ## Preferred Languages
34 |
35 | We prefer all communications to be in English.
36 |
37 | ## Policy
38 |
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
40 |
41 |
42 |
--------------------------------------------------------------------------------
/lib/rules/switch-needs-labelling.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
5 | import { elementType } from "jsx-ast-utils";
6 | import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
7 | import { hasAssociatedLabelViaAriaLabelledBy, isInsideLabelTag, hasAssociatedLabelViaHtmlFor } from "../util/labelUtils";
8 | import { hasFieldParent } from "../util/hasFieldParent";
9 | import { JSXOpeningElement } from "estree-jsx";
10 |
11 | //------------------------------------------------------------------------------
12 | // Rule Definition
13 | //------------------------------------------------------------------------------
14 |
15 | const rule = ESLintUtils.RuleCreator.withoutDocs({
16 | defaultOptions: [],
17 | meta: {
18 | // possible error messages for the rule
19 | messages: {
20 | noUnlabelledSwitch: "Accessibility: Switch must have an accessible label"
21 | },
22 | // "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
23 | type: "problem",
24 | // docs for the rule
25 | docs: {
26 | description: "Accessibility: Switch must have an accessible label",
27 | recommended: "strict",
28 | url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
29 | },
30 | schema: []
31 | },
32 | // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
33 | create(context) {
34 | return {
35 | // visitor functions for different types of nodes
36 | JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
37 | // if it is not a Switch, return
38 | if (elementType(node as JSXOpeningElement) !== "Switch") {
39 | return;
40 | }
41 |
42 | // if the Switch has a label, if the Switch has an associated label, return
43 | if (
44 | hasNonEmptyProp(node.attributes, "label") ||
45 | hasFieldParent(context) ||
46 | isInsideLabelTag(context) ||
47 | hasAssociatedLabelViaHtmlFor(node, context) ||
48 | hasAssociatedLabelViaAriaLabelledBy(node, context)
49 | ) {
50 | return;
51 | }
52 |
53 | // if it has no visual labelling, report error
54 | context.report({
55 | node,
56 | messageId: `noUnlabelledSwitch`
57 | });
58 | }
59 | };
60 | }
61 | });
62 |
63 | export default rule;
64 |
--------------------------------------------------------------------------------
/tests/lib/rules/tag-dismissible-needs-labelling.test.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 |
4 | import { Rule } from "eslint";
5 | import ruleTester from "./helper/ruleTester";
6 | import rule from "../../../lib/rules/tag-dismissible-needs-labelling";
7 |
8 | //------------------------------------------------------------------------------
9 | // Requirements
10 | //------------------------------------------------------------------------------
11 |
12 | //------------------------------------------------------------------------------
13 | // Tests
14 | //------------------------------------------------------------------------------
15 | ruleTester.run("tag-dismissible-needs-labelling", rule as unknown as Rule.RuleModule, {
16 | valid: [
17 | // Valid cases for dismissible Tag component
18 | // Non-dismissible tags should be ignored
19 | "Regular tag ",
20 | "Dismissible tag ',
23 | 'Dismissible tag '
26 | ],
27 |
28 | invalid: [
29 | // Invalid cases for dismissible Tag component
30 | {
31 | code: "Dismissible tag ",
32 | errors: [{ messageId: "missingDismissLabel" }]
33 | },
34 | {
35 | code: "Dismissible tag ",
36 | errors: [{ messageId: "missingDismissLabel" }]
37 | },
38 | {
39 | code: 'Dismissible tag ',
40 | errors: [{ messageId: "missingDismissLabel" }]
41 | },
42 | // Missing aria-label on Tag when dismissIcon has role
43 | {
44 | code: 'Dismissible tag ',
45 | errors: [{ messageId: "missingDismissLabel" }]
46 | },
47 | // Empty aria-label on Tag with dismissIcon role
48 | {
49 | code: 'Dismissible tag ',
50 | errors: [{ messageId: "missingDismissLabel" }]
51 | },
52 | // Tag has aria-label but dismissIcon has empty role
53 | {
54 | code: 'Dismissible tag ',
55 | errors: [{ messageId: "missingDismissLabel" }]
56 | }
57 | ]
58 | });
59 |
--------------------------------------------------------------------------------