feat: Add lint rule for Spinner component

COVERAGE.md

@@ -52,7 +52,7 @@ We currently cover the following components:
     -   [N/A] Skeleton
     -   [N/A] SkeletonItem
     -   [x] SpinButton
-    -   [] Spinner
+    -   [x] Spinner
     -   [] SwatchPicker
     -   [x] Switch
     -   [] Table

README.md

@@ -167,6 +167,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 | [radiogroup-missing-label](docs/rules/radiogroup-missing-label.md)                           | Accessibility: RadioGroup without label must have an accessible and visual label: aria-labelledby                                                 | ✅  |    |    |
 | [spin-button-needs-labelling](docs/rules/spin-button-needs-labelling.md)                     | Accessibility: SpinButtons must have an accessible label                                                                                          | ✅  |    |    |
 | [spin-button-unrecommended-labelling](docs/rules/spin-button-unrecommended-labelling.md)     | Accessibility: Unrecommended accessibility labelling - SpinButton                                                                                 | ✅  |    |    |
+| [spinner-needs-labelling](docs/rules/spinner-needs-labelling.md)                             | Accessibility: Spinner must have aria-label and aria-live                                                                                         | ✅  |    |    |
 | [switch-needs-labelling](docs/rules/switch-needs-labelling.md)                               | Accessibility: Switch must have an accessible label                                                                                               | ✅  |    |    |
 | [text-area-missing-label](docs/rules/text-area-missing-label.md)                             | Accessibility: Textarea must have an accessible name                                                                                              | ✅  |    |    |
 | [toolbar-missing-aria](docs/rules/toolbar-missing-aria.md)                                   | Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby                                                                  | ✅  |    |    |

docs/rules/spinner-needs-labelling.md

@@ -0,0 +1,53 @@
+# Accessibility: Spinner must have aria-label and aria-live (`@microsoft/fluentui-jsx-a11y/spinner-needs-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+All interactive elements must have an accessible name.
+
+Spinner must have aria-label and aria-live.
+
+<https://www.w3.org/TR/html-aria/>
+
+<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live>
+
+<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label>
+
+## Ways to fix
+
+-   Make sure that Spinner component has aria-live attribute and add aria-label attribute for screen reader text.
+
+## Rule Details
+
+This rule aims to make Spinners accessible.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Spinner {...props} />
+```
+
+```jsx
+<Spinner 
+    {...props} 
+    aria-label="some text"
+/>
+```
+
+```jsx
+<Spinner 
+    {...props} 
+    aria-live="polite"
+/>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<Spinner
+    {...props} 
+    aria-label="my screen reader text"
+    aria-live="polite"
+/>
+```

lib/index.js

@@ -36,7 +36,8 @@ module.exports = {
         "avatar-needs-name": require("./rules/avatar-needs-name"),
         "radio-button-missing-label": require("./rules/radio-button-missing-label"),
         "radiogroup-missing-label": require("./rules/radiogroup-missing-label"),
-        "prefer-aria-over-title-attribute": require("./rules/prefer-aria-over-title-attribute")
+        "prefer-aria-over-title-attribute": require("./rules/prefer-aria-over-title-attribute"),
+        "spinner-needs-labelling": require("./rules/spinner-needs-labelling")
     },
     configs: {
         recommended: {
@@ -63,7 +64,8 @@ module.exports = {
                 "@microsoft/fluentui-jsx-a11y/avatar-needs-name": "error",
                 "@microsoft/fluentui-jsx-a11y/radio-button-missing-label": "error",
                 "@microsoft/fluentui-jsx-a11y/radiogroup-missing-label": "error",
-                "@microsoft/fluentui-jsx-a11y/prefer-aria-over-title-attribute": "warn"
+                "@microsoft/fluentui-jsx-a11y/prefer-aria-over-title-attribute": "warn",
+                "@microsoft/fluentui-jsx-a11y/spinner-needs-labelling": "error"
             }
         }
     }

lib/rules/spinner-needs-labelling.js

@@ -0,0 +1,52 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+const { hasNonEmptyProp } = require("../util/hasNonEmptyProp");
+const elementType = require("jsx-ast-utils").elementType;
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+    meta: {
+        // possible error messages for the rule
+        messages: {
+            noUnlabelledSpinner: "Accessibility: Spinner must have aria-label and aria-live"
+        },
+        // "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: Spinner must have aria-label and aria-live",
+            recommended: true,
+            url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
+        },
+        schema: []
+    },
+    // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
+    create(context) {
+        return {
+            // visitor functions for different types of nodes
+            JSXOpeningElement(node) {
+                // if it is not a Spinner, return
+                if (elementType(node) !== "Spinner") {
+                    return;
+                }
+
+                if (hasNonEmptyProp(node.attributes, "aria-label") && hasNonEmptyProp(node.attributes, "aria-live")) {
+                    return;
+                }
+
+                // if it has no visual labelling, report error
+                context.report({
+                    node,
+                    messageId: `noUnlabelledSpinner`
+                });
+            }
+        };
+    }
+};
+

tests/lib/rules/spinner-needs-labelling.js

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/spinner-needs-labelling"),
+    RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+ruleTester.run("spinner-needs-labelling", rule, {
+    valid: [
+        `<Spinner aria-label="my screen reader text" aria-live="polite"/>`,
+        `<Spinner appearance="primary" label="Primary Spinner" aria-label="my screen reader text" aria-live="polite"/>`
+    ],
+    invalid: [
+        {
+            code: `<Spinner />`,
+            errors: [{ messageId: "noUnlabelledSpinner" }]
+        },
+        {
+            code: `<Spinner appearance="primary" label="Primary Spinner" />`,
+            errors: [{ messageId: "noUnlabelledSpinner" }]
+        },
+        {
+            code: `<Spinner size="large" label="Large Spinner" />`,
+            errors: [{ messageId: "noUnlabelledSpinner" }]
+        }
+    ]
+});
+