Merge pull request #69 from microsoft/users/aubreyquinn/slider

added lint coverage for the slider component
microsoft · Mar 14, 2024 · bbf967b · bbf967b
2 parents 8786477 + feb476a
commit bbf967b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 8 deletions.
diff --git a/COVERAGE.md b/COVERAGE.md
@@ -34,9 +34,9 @@ We currently cover the following components:
     -   [] Radio
     -   [] RadioGroup
     -   [] Select
+    -   [x] Slider
     -   [N/A] Skeleton
     -   [N/A] SkeletonItem
-    -   [] Slider
     -   [x] SpinButton
     -   [] Spinner
     -   [x] Switch

diff --git a/README.md b/README.md
@@ -168,7 +168,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 | [image-button-missing-aria-v9](docs/rules/image-button-missing-aria-v9.md)                                   | Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby                                                                                                      |    |
 | [image-button-prefer-aria-over-title-attribute](docs/rules/image-button-prefer-aria-over-title-attribute.md) | Accessibility: prefer wai-aria over title or placeholder attributes. Title/placeholder can be used in addition to wai-aria. aria-label, aria-labelledby, aria-describedby                                              |    |
 | [image-link-missing-aria-v9](docs/rules/image-link-missing-aria-v9.md)                                       | Accessibility: Image links must have an accessible name                                                                                                                                                                | 🔧 |
-| [input-missing-label-v9](docs/rules/input-missing-label-v9.md)                                               | Accessibility: Inputs must have accessible labelling: aria-label, aria-labelledby or an associated label                                                                                                               |    |
+| [input-missing-label-v9](docs/rules/input-missing-label-v9.md)                                               | Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label                                                                                                         |    |
 | [menu-item-needs-labelling-v9](docs/rules/menu-item-needs-labelling-v9.md)                                   | Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby                                                                                                                        |    |
 | [no-empty-buttons](docs/rules/no-empty-buttons.md)                                                           | Accessibility: buttons must either text content or accessible labelling                                                                                                                                                |    |
 | [no-empty-buttons-v9](docs/rules/no-empty-buttons-v9.md)                                                     | Accessibility: Button, ToggleButton, SplitButton, MenuButton, CompoundButton must either text content or icon or child component                                                                                       |    |

diff --git a/docs/rules/input-missing-label-v9.md b/docs/rules/input-missing-label-v9.md
@@ -1,4 +1,4 @@
-# Accessibility: Inputs must have accessible labelling: aria-label, aria-labelledby or an associated label (`@microsoft/fluentui-jsx-a11y/input-missing-label-v9`)
+# Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label (`@microsoft/fluentui-jsx-a11y/input-missing-label-v9`)
 
 <!-- end auto-generated rule header -->
 
@@ -24,6 +24,19 @@ or
 <Input/>
 ```
 
+or
+
+```jsx
+<Label htmlFor="input-id">Label name</Label>
+<Slider/>
+```
+
+or
+
+```jsx
+<Slider size="medium" defaultValue={20} />
+```
+
 Examples of **correct** code for this rule:
 
 ```jsx
@@ -36,3 +49,10 @@ or
 <Label htmlFor="input-id">Label name</Label>
 <Textarea id="input-id"/>
 ```
+
+or
+
+```jsx
+<Label htmlFor={mediumId}>Medium Slider</Label>
+<Slider size="medium" defaultValue={20} id={mediumId} />
+```
diff --git a/lib/rules/input-missing-label-v9.js b/lib/rules/input-missing-label-v9.js
@@ -7,6 +7,8 @@ const { elementType } = require("jsx-ast-utils");
 
 const { isInsideLabelTag, hasAssociatedLabelViaHtmlFor, hasAssociatedLabelViaAriaLabelledBy } = require("../util/labelUtils");
 
+const applicableComponents = ["Input", "Slider"];
+
 //------------------------------------------------------------------------------
 // Rule Definition
 //------------------------------------------------------------------------------
@@ -15,13 +17,15 @@ module.exports = {
     meta: {
         // possible error messages for the rule
         messages: {
-            missingLabelOnInput: "Input must have a aria label associated with it"
+            missingLabelOnInput: `Accessibility - input fields must have a aria label associated with it: ${applicableComponents.join(
+                ", "
+            )}`
         },
         // "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: Inputs must have accessible labelling: aria-label, aria-labelledby or an associated label",
+            description: "Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label",
             recommended: true,
             url: "https://www.w3.org/WAI/tutorials/forms/labels/" // URL to the documentation page for this rule
         },
@@ -32,8 +36,8 @@ module.exports = {
         return {
             // visitor functions for different types of nodes
             JSXOpeningElement(node) {
-                // if it is not an input, return
-                if (elementType(node) !== "Input") {
+                // if it is not a listed component, return
+                if (!applicableComponents.includes(elementType(node))) {
                     return;
                 }
 

diff --git a/tests/lib/rules/input-missing-label-v9.js b/tests/lib/rules/input-missing-label-v9.js
@@ -31,7 +31,11 @@ ruleTester.run("input-missing-label-v9", rule, {
         '<><Label id="test-span">Some Label</Label><Input id="some-id" aria-labelledby="test-span"/></>',
         "<Label>test</Label>",
         "<Label>test<Input/></Label>",
-        "<Label>test<SomeNesting><Input/></SomeNesting></Label>"
+        "<Label>test<SomeNesting><Input/></SomeNesting></Label>",
+        '<><Label htmlFor="some-id">Some Label</Label><Slider size="medium" defaultValue={20} id="some-id"/></>',
+        '<><Label id="test-span">Some Label</Label><Slider size="medium" defaultValue={20} id="some-id" aria-labelledby="test-span"/></>',
+        '<Label>test<Slider size="medium" defaultValue={20}/></Label>',
+        '<Label>test<SomeNesting><Slider size="medium" defaultValue={20}/></SomeNesting></Label>'
     ],
 
     invalid: [
@@ -54,6 +58,22 @@ ruleTester.run("input-missing-label-v9", rule, {
         {
             code: '<><Label>Some Label</Label><Input id="some-id"/></>',
             errors: [{ messageId: "missingLabelOnInput" }]
+        },
+        {
+            code: '<><Label/><Slider size="medium" defaultValue={20}/></>',
+            errors: [{ messageId: "missingLabelOnInput" }]
+        },
+        {
+            code: '<><Label htmlFor="id"/><Slider size="medium" defaultValue={20} /></>',
+            errors: [{ messageId: "missingLabelOnInput" }]
+        },
+        {
+            code: '<Slider id="some-id"/>',
+            errors: [{ messageId: "missingLabelOnInput" }]
+        },
+        {
+            code: '<><Label>Some Label</Label><Slider id="some-id"/></>',
+            errors: [{ messageId: "missingLabelOnInput" }]
         }
     ]
 });