Comments addressed

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

@@ -0,0 +1,44 @@
+# Accessibility: Dropdown mising label or missing aria-labelledby (`@microsoft/fluentui-jsx-a11y/dropdown-needs-labelling-v9`)
+
+<!-- end auto-generated rule header -->
+
+Accessibility: Dropdown menu must have a visual label and it needs to be linked via htmlFor aria-labelledby of Label Or Dropdown mush have aria-label
+Dropdown having label linked via htmlFor in Label is recommended
+
+<https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA16>
+
+## Ways to fix
+
+-   Add a label with htmlFor, add the id having same value as htmlFor to dropdown.
+-   Add a label with id, add the aria-labelledby having same value as id to dropdown.
+-   Add a aria-label to dropdown
+
+## Rule Details
+
+This rule aims to make dropdown accessible
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Dropdown />
+<Dropdown aria-labelledby="dropdown-id"></Dropdown>
+<>
+<Label />
+<Dropdown aria-labelledby="dropdown-id"></Dropdown>
+</>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<>
+<Label htmlFor="dropdown-id" />
+<Dropdown id="dropdown-id"></Dropdown>
+</>
+<>
+<Label id="dropdown-id" />
+<Dropdown aria-labelledby="dropdown-id"></Dropdown>
+</>
+<Dropdown aria-label="dropdown-label"></Dropdown>
+</>
+```

lib/rules/dropdown-needs-arialabeledby-and-label-v9.js → lib/rules/dropdown-needs-labelling-v9.js

@@ -4,7 +4,8 @@
 "use strict";
 
 var elementType = require("jsx-ast-utils").elementType;
-const { hasAssociatedLabelViaAriaLabelledBy } = require("../util/labelUtils");
+const { hasAssociatedLabelViaAriaLabelledBy, hasAssociatedLabelViaHtmlFor } = require("../util/labelUtils");
+const { hasNonEmptyProp } = require("../util/hasNonEmptyProp");
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -20,7 +21,7 @@ module.exports = {
         type: "problem",
         // docs for the rule
         docs: {
-            description: "Accessibility: Dropdown menu must have a visual label and it needs to be linked via aria-labelledby",
+            description: "Accessibility: Dropdown menu must have an id and it needs to be linked via htmlFor of a Label",
             recommended: true,
             url: null
         },
@@ -37,8 +38,14 @@ module.exports = {
                     return;
                 }
 
-                // if the dropdown has a aria-LabeledBy with same valye  return
-                if (hasAssociatedLabelViaAriaLabelledBy(node, context)) {
+                // if the dropdown has a aria-LabeledBy with same value present in id of Label, return (Most recommended)
+                // if the dropdown has an id and a label with htmlFor with sanme value as id, return
+                // if the dropdown has an associated label, return
+                if (
+                    hasAssociatedLabelViaHtmlFor(node, context) ||
+                    hasAssociatedLabelViaAriaLabelledBy(node, context) ||
+                    hasNonEmptyProp(node.attributes, "aria-label")
+                ) {
                     return;
                 }
 

lib/rules/index.js

@@ -16,5 +16,6 @@ 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"),
+    "dropdown-needs-labelling-v9": require("./dropdown-needs-labelling-v9")
 };

tests/lib/rules/dropdown-needs-arialabeledby-and-label-v9.js → tests/lib/rules/dropdown-needs-labelling-v9.js

@@ -9,7 +9,7 @@
 
 const RuleTester = require("eslint").RuleTester;
 
-const rule = require("../../../lib/rules/dropdown-needs-arialabeledby-and-label-v9");
+const rule = require("../../../lib/rules/dropdown-needs-labelling-v9");
 
 RuleTester.setDefaultConfig({
     parserOptions: {
@@ -25,8 +25,10 @@ RuleTester.setDefaultConfig({
 //------------------------------------------------------------------------------
 
 const ruleTester = new RuleTester();
-ruleTester.run("dropdown-needs-arialabeledby-and-label-v9", rule, {
+ruleTester.run("dropdown-needs-labelling-v9", rule, {
     valid: [
+        `<><Label htmlFor={comboId}>Best pet</Label> <Dropdown id={comboId} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
+        `<><Label id="my-dropdownid" /><Dropdown aria-labelledby="my-dropdownid" /></>`,
         `<><Label id={comboId}>Best pet</Label> <Dropdown aria-labelledby={comboId} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
         `<><Label id={comboId2}>This is a Dropdown</Label><Dropdown aria-labelledby={comboId2} /></>`
     ],
@@ -46,6 +48,10 @@ ruleTester.run("dropdown-needs-arialabeledby-and-label-v9", rule, {
         {
             code: `<><Label id="another-id">This is a Dropdown</Label><Dropdown aria-labelledby={comboId} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
             errors: [{ messageId: "missingLabelOrAriaLabeledByInDropdown" }]
+        },
+        {
+            code: `<><Label htmlFor="id1">This is a Dropdown</Label><Dropdown aria-labelledby={id1} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
+            errors: [{ messageId: "missingLabelOrAriaLabeledByInDropdown" }]
         }
     ]
 });