Added a rule for Tablist component

README.md

@@ -173,6 +173,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 | [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 either aria-label or label, aria-live and aria-busy attributes                                                        | ✅  |    |    |
 | [switch-needs-labelling](docs/rules/switch-needs-labelling.md)                                         | Accessibility: Switch must have an accessible label                                                                                                    | ✅  |    |    |
+| [tablist-and-tabs-need-labelling](docs/rules/tablist-and-tabs-need-labelling.md)                       | This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled.                         | ✅  |    |    |
 | [toolbar-missing-aria](docs/rules/toolbar-missing-aria.md)                                             | Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby                                                                       | ✅  |    |    |
 | [tooltip-not-recommended](docs/rules/tooltip-not-recommended.md)                                       | Accessibility: Prefer text content or aria over a tooltip for these components MenuItem, SpinButton                                                    | ✅  |    |    |
 

dist/lib/index.js

@@ -42,7 +42,8 @@ module.exports = {
         "dialogsurface-needs-aria": require("./rules/dialogsurface-needs-aria"),
         "spinner-needs-labelling": require("./rules/spinner-needs-labelling"),
         "badge-needs-accessible-name": require("./rules/badge-needs-accessible-name"),
-        "progressbar-needs-labelling": require("./rules/progressbar-needs-labelling")
+        "progressbar-needs-labelling": require("./rules/progressbar-needs-labelling"),
+        "tablist-and-tabs-need-labelling": require("./rules/tablist-and-tabs-need-labelling"),
     },
     configs: {
         recommended: {
@@ -72,7 +73,8 @@ module.exports = {
                 "@microsoft/fluentui-jsx-a11y/dialogbody-needs-title-content-and-actions": "error",
                 "@microsoft/fluentui-jsx-a11y/dialogsurface-needs-aria": "error",
                 "@microsoft/fluentui-jsx-a11y/spinner-needs-labelling": "error",
-                "@microsoft/fluentui-jsx-a11y/progressbar-needs-labelling": "error"
+                "@microsoft/fluentui-jsx-a11y/progressbar-needs-labelling": "error",
+                "@microsoft/fluentui-jsx-a11y/tablist-and-tabs-need-labelling": "error",
             }
         }
     }

dist/lib/rules/tablist-and-tabs-need-labelling.d.ts

@@ -0,0 +1,16 @@
+export namespace meta {
+    namespace messages {
+        let missingTabLabel: string;
+        let missingTablistLabel: string;
+    }
+    let type: string;
+    namespace docs {
+        let description: string;
+        let recommended: boolean;
+        let url: string;
+    }
+    let schema: never[];
+}
+export function create(context: any): {
+    JSXOpeningElement(node: any): void;
+};

dist/lib/rules/tablist-and-tabs-need-labelling.js

@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled.',
+            recommended: true,
+            url: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabs/', // URL to the documentation page for this rule
+        },
+        fixable: null,
+        schema: [],
+        messages: {
+            missingTabLabel: 'Accessibility: Tab elements must have an aria-label attribute is there is no visiable text content',
+            missingTablistLabel: 'Accessibility: Tablist must have an accessible label'
+        },
+    },
+
+  create(context) {
+    const { hasTextContentChild } = require('../util/hasTextContentChild');
+    const { hasNonEmptyProp } = require('../util/hasNonEmptyProp');
+    const { hasAssociatedLabelViaAriaLabelledBy } = require('../util/labelUtils');
+
+    var elementType = require("jsx-ast-utils").elementType;
+
+    return {
+
+      // visitor functions for different types of nodes
+        JSXOpeningElement(node) {
+            const elementTypeValue = elementType(node);
+
+            // if it is not a Tablist or Tab, return
+            if (elementTypeValue !== 'Tablist' && elementTypeValue !== 'Tab') {
+                return;
+            }
+
+            // Check for Tablist elements
+            if (elementTypeValue === "Tablist") {
+                if (
+                    // if the Tablist has a label, if the Tablist has an associated label, return
+                    hasNonEmptyProp(node.attributes, 'aria-label') || //aria-label
+                    hasAssociatedLabelViaAriaLabelledBy(node, context) // aria-labelledby
+                ) {
+                    return;
+                }
+                context.report({
+                    node,
+                    messageId: 'missingTablistLabel'
+                });
+            }
+
+            // Check for Tab elements
+            if (elementTypeValue === 'Tab') {
+                if (
+                    hasTextContentChild(node.parent) || // text content
+                    hasNonEmptyProp(node.attributes, 'aria-label') // aria-label
+                ) {
+                    return;
+                }
+                context.report({
+                    node,
+                    messageId: 'missingTabLabel'
+                });
+            }
+        }
+    };
+  },
+};

docs/rules/tablist-and-tabs-need-labelling.md

@@ -0,0 +1,63 @@
+# This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled (`@microsoft/fluentui-jsx-a11y/tablist-and-tabs-need-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+Accessibility:
+1. If the Tab is represented by an icon, it must have an 'aria-label' to describe the Tab.
+2. If the Tablist has a visible label, it should use aria-labelledby to reference that label. If there is no visible label, the Tablist should have a label provided by aria-label.
+
+<https://www.w3.org/WAI/ARIA/apg/patterns/tabs/>
+
+## Ways to fix
+1. Add an 'aria-label' to the Tab when it is represented by icon
+2. Add an 'aria-labelledby' to the Tablist to reference a visible label
+3. If there is no visible label, add an 'aria-label' to the Tablist
+
+## Rule Details
+
+This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Tab icon={<SettingsIcon />} />
+
+<Tab icon={<SettingsIcon />}></Tab>
+
+<Tablist>
+    <Tab>Settings Tab</Tab>
+</Tablist>
+
+<Tablist>
+    <Label id="tablist-settings">Settings Label</Label>
+    <Tab>Settings Tab</Tab>
+</Tablist>
+
+<Tablist>
+    <Label>Settings Label</Label>
+    <Tab>Settings Tab</Tab>
+</Tablist>
+
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+
+<Tab icon={<SettingsIcon />} aria-label="Settings" />
+
+<Tab icon={<SettingsIcon />}>Settings</Tab>
+
+<Tab>Settings</Tab>
+
+<Tablist aria-label="settings">
+    <Tab>Settings Tab</Tab>
+</Tablist>
+
+<Tablist aria-labelledby="tablist-settings">
+    <Label id="tablist-settings">Settings Label</Label>
+    <Tab>Settings Tab</Tab>
+</Tablist>
+
+```

lib/index.ts

@@ -40,7 +40,8 @@ module.exports = {
         "dialogsurface-needs-aria": require("./rules/dialogsurface-needs-aria"),
         "spinner-needs-labelling": require("./rules/spinner-needs-labelling"),
         "badge-needs-accessible-name": require("./rules/badge-needs-accessible-name"),
-        "progressbar-needs-labelling": require("./rules/progressbar-needs-labelling")
+        "progressbar-needs-labelling": require("./rules/progressbar-needs-labelling"),
+        "tablist-and-tabs-need-labelling": require("./rules/tablist-and-tabs-need-labelling"),
     },
     configs: {
         recommended: {
@@ -70,7 +71,8 @@ module.exports = {
                 "@microsoft/fluentui-jsx-a11y/dialogbody-needs-title-content-and-actions": "error",
                 "@microsoft/fluentui-jsx-a11y/dialogsurface-needs-aria": "error",
                 "@microsoft/fluentui-jsx-a11y/spinner-needs-labelling": "error",
-                "@microsoft/fluentui-jsx-a11y/progressbar-needs-labelling": "error"
+                "@microsoft/fluentui-jsx-a11y/progressbar-needs-labelling": "error",
+                "@microsoft/fluentui-jsx-a11y/tablist-and-tabs-need-labelling": "error",
             }
         }
     }

lib/rules/tablist-and-tabs-need-labelling.js

@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled.',
+            recommended: true,
+            url: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabs/', // URL to the documentation page for this rule
+        },
+        fixable: null,
+        schema: [],
+        messages: {
+            missingTabLabel: 'Accessibility: Tab elements must have an aria-label attribute is there is no visiable text content',
+            missingTablistLabel: 'Accessibility: Tablist must have an accessible label'
+        },
+    },
+
+  create(context) {
+    const { hasTextContentChild } = require('../util/hasTextContentChild');
+    const { hasNonEmptyProp } = require('../util/hasNonEmptyProp');
+    const { hasAssociatedLabelViaAriaLabelledBy } = require('../util/labelUtils');
+
+    var elementType = require("jsx-ast-utils").elementType;
+
+    return {
+
+      // visitor functions for different types of nodes
+        JSXOpeningElement(node) {
+            const elementTypeValue = elementType(node);
+
+            // if it is not a Tablist or Tab, return
+            if (elementTypeValue !== 'Tablist' && elementTypeValue !== 'Tab') {
+                return;
+            }
+
+            // Check for Tablist elements
+            if (elementTypeValue === "Tablist") {
+                if (
+                    // if the Tablist has a label, if the Tablist has an associated label, return
+                    hasNonEmptyProp(node.attributes, 'aria-label') || //aria-label
+                    hasAssociatedLabelViaAriaLabelledBy(node, context) // aria-labelledby
+                ) {
+                    return;
+                }
+                context.report({
+                    node,
+                    messageId: 'missingTablistLabel'
+                });
+            }
+
+            // Check for Tab elements
+            if (elementTypeValue === 'Tab') {
+                if (
+                    hasTextContentChild(node.parent) || // text content
+                    hasNonEmptyProp(node.attributes, 'aria-label') // aria-label
+                ) {
+                    return;
+                }
+                context.report({
+                    node,
+                    messageId: 'missingTabLabel'
+                });
+            }
+        }
+    };
+  },
+};