diff --git a/COVERAGE.md b/COVERAGE.md
index e2b4e3c..1d0113e 100644
--- 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
index 6226710..68cde77 100644
--- 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
index 314f4c4..2685a1a 100644
--- 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`)
@@ -24,6 +24,19 @@ or
```
+or
+
+```jsx
+
+
+```
+
+or
+
+```jsx
+
+```
+
Examples of **correct** code for this rule:
```jsx
@@ -36,3 +49,10 @@ or
```
+
+or
+
+```jsx
+
+
+```
diff --git a/lib/rules/input-missing-label-v9.js b/lib/rules/input-missing-label-v9.js
index d8ce8b4..e8d3885 100644
--- 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
index 0d0cbfd..d53d237 100644
--- 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, {
'<>>',
"",
"",
- ""
+ "",
+ '<>>',
+ '<>>',
+ '',
+ ''
],
invalid: [
@@ -54,6 +58,22 @@ ruleTester.run("input-missing-label-v9", rule, {
{
code: '<>>',
errors: [{ messageId: "missingLabelOnInput" }]
+ },
+ {
+ code: '<>>',
+ errors: [{ messageId: "missingLabelOnInput" }]
+ },
+ {
+ code: '<>>',
+ errors: [{ messageId: "missingLabelOnInput" }]
+ },
+ {
+ code: '',
+ errors: [{ messageId: "missingLabelOnInput" }]
+ },
+ {
+ code: '<>>',
+ errors: [{ messageId: "missingLabelOnInput" }]
}
]
});