Adds labelling for breadcrumb v9

COVERAGE.md

@@ -42,3 +42,4 @@ We currently cover the following components:
     -   [x] TextArea
     -   [x] Toolbar
     -   [] Tooltip
+    -   [x] Breadcrumb

README.md

@@ -157,6 +157,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 
 | Name                                                                                                         | Description                                                                                                                                                                                                            | 🔧 |
 | :----------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :- |
+| [breadcrumb-needs-labelling-v9](docs/rules/breadcrumb-needs-labelling-v9.md)                                 | All interactive elements must have an accessible name                                                                                                                                                                  |    |
 | [checkbox-needs-labelling-v9](docs/rules/checkbox-needs-labelling-v9.md)                                     | Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby                                                                                                                        |    |
 | [combobox-needs-labelling-v9](docs/rules/combobox-needs-labelling-v9.md)                                     | All interactive elements must have an accessible name                                                                                                                                                                  |    |
 | [icon-text-content-button-does-not-need-aria](docs/rules/icon-text-content-button-does-not-need-aria.md)     | 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. |    |

docs/rules/breadcrumb-needs-labelling-v9.md

@@ -0,0 +1,35 @@
+# All interactive elements must have an accessible name (`@microsoft/fluentui-jsx-a11y/breadcrumb-needs-labelling-v9`)
+
+<!-- end auto-generated rule header -->
+
+Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the label element.
+
+<https://www.w3.org/WAI/tutorials/forms/labels/>
+
+All interactive elements must have an accessible name.
+
+## Rule Details
+
+This rule aims to...
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<div>
+<label>Breadcrumb default example<label>
+<Breadcrumb ></BreadCrumb>
+</div>
+<Breadcrumb></Breadcrumb>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<Breadcrumb aria-label="Breadcrumb default example">
+<div>
+<label id="my-label">Breadcrumb default example<label>
+<Breadcrumb aria-labelledby="my-label"><BreadCrumb>
+</div>
+<label>Breadcrumb default example<Breadcrumb></Breadcrumb></label>
+```
+

docs/rules/no-empty-components-v9.md

@@ -20,6 +20,10 @@ Examples of **incorrect** code for this rule:
 <Label></Label>
 ```
 
+```jsx
+<Breadcrumb></Breadcrumb>
+```
+
 Examples of **correct** code for this rule:
 
 ```jsx
@@ -34,3 +38,6 @@ Examples of **correct** code for this rule:
 <Text>This is an example of the Text component's usage.</Text>
 ```
 
+```jsx
+<Breadcrumb><BreadcrumbItem><BreadcrumbButton>Item 1</BreadcrumbButton></BreadcrumbItem></Breadcrumb>
+```

lib/rules/breadcrumb-needs-labelling-v9.js

@@ -0,0 +1,59 @@
+// 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, isInsideLabelTag } = require("../util/labelUtils");
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        // possible error messages for the rule
+        messages: {
+            noUnlabelledBreadcrumb: "Accessibility: Breadcrumb must have an accessible label"
+        },
+        // "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: {
+            description: "All interactive elements must have an accessible name",
+            recommended: false,
+            url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
+        },
+        fixable: null, // Or `code` or `whitespace`
+        schema: [] // Add a schema if the rule has options
+    },
+
+    create(context) {
+        return {
+            // visitor functions for different types of nodes
+            JSXOpeningElement(node) {
+                // if it is not a Breadcrumb, return
+                if (elementType(node) !== "Breadcrumb") {
+                    return;
+                }
+
+                // if the Breadcrumb has a label, if the Breadcrumb has an associated label, return
+                if (
+                    hasNonEmptyProp(node.attributes, "aria-label") || //aria-label
+                    isInsideLabelTag(context) || // wrapped in label
+                    hasAssociatedLabelViaAriaLabelledBy(node, context) // aria-labelledby
+                ) {
+                    return;
+                }
+
+                // if it has no visual labelling, report error
+                context.report({
+                    node,
+                    messageId: `noUnlabelledBreadcrumb`
+                });
+            }
+        };
+    }
+};
+

lib/rules/index.js

@@ -16,5 +16,7 @@ module.exports = {
     "image-button-missing-aria-v9": require("./image-button-missing-aria-v9"),
     "toolbar-missing-aria-v9": require("./toolbar-missing-aria-v9"),
     "combobox-needs-labelling-v9": require("./combobox-needs-labelling-v9"),
-    "no-empty-components-v9": require("./no-empty-components-v9")
+    "no-empty-components-v9": require("./no-empty-components-v9"),
+    "breadcrumb-needs-labelling-v9": require("./breadcrumb-needs-labelling-v9")
 };
+

lib/rules/no-empty-components-v9.js

@@ -9,7 +9,7 @@ var elementType = require("jsx-ast-utils").elementType;
 // Rule Definition
 //------------------------------------------------------------------------------
 // Define an array of allowed component names
-const allowedComponents = ["Text", "Label", "Combobox"];
+const allowedComponents = ["Text", "Label", "Combobox", "Breadcrumb"];
 
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {

tests/lib/rules/breadcrumb-needs-labelling-v9.js

@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/breadcrumb-needs-labelling-v9"),
+    RuleTester = require("eslint").RuleTester;
+
+RuleTester.setDefaultConfig({
+    parserOptions: {
+        ecmaVersion: 6,
+        ecmaFeatures: {
+            jsx: true
+        }
+    }
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+ruleTester.run("breadcrumb-needs-labelling-v9", rule, {
+    valid: [
+        // give me some code that won't trigger a warning
+        '<Breadcrumb aria-label="Breadcrumb default example"></Breadcrumb>',
+        "<label>Breadcrumb default example<Breadcrumb></Breadcrumb></label>",
+        '<div><label id="my-label">Breadcrumb default example</label><Breadcrumb aria-labelledby="my-label"></Breadcrumb></div>',
+        '<div><Label id="my-label">Breadcrumb default example</Label><Breadcrumb aria-labelledby="my-label"></Breadcrumb></div>'
+    ],
+    invalid: [
+        {
+            code: '<div><Label id="my-label">Breadcrumb default example</Label><Breadcrumb></Breadcrumb></div>',
+            errors: [{ messageId: "noUnlabelledBreadcrumb" }]
+        },
+        {
+            code: "<Breadcrumb></Breadcrumb>",
+            errors: [{ messageId: "noUnlabelledBreadcrumb" }]
+        }
+    ]
+});
+

tests/lib/rules/no-empty-components-v9.js

@@ -30,6 +30,7 @@ ruleTester.run("no-empty-components-v9", rule, {
         "<Label>Hello</Label>",
         '<Text font="base">This is the default font</Text>',
         '<Label size="small">Small</Label>',
+        "<Breadcrumb><BreadcrumbItem><BreadcrumbButton>Item 1</BreadcrumbButton></BreadcrumbItem></Breadcrumb>",
         '<Combobox aria-labelledby={comboId} placeholder="Select an animal" {...props}>{options.map((option) => (<Option key={option} disabled={option === "Ferret"}>{option}</Option>))}</Combobox>'
     ],
 
@@ -38,6 +39,10 @@ ruleTester.run("no-empty-components-v9", rule, {
             code: "<Text></Text>",
             errors: [{ messageId: "noEmptyComponents" }]
         },
+        {
+            code: "<Breadcrumb></Breadcrumb>",
+            errors: [{ messageId: "noEmptyComponents" }]
+        },
         {
             code: "<Label></Label>",
             errors: [{ messageId: "noEmptyComponents" }]