Added a new rule for the Badge component

COVERAGE.md

@@ -6,6 +6,10 @@ We currently cover the following components:
     -   [x] Avatar
     -   [x] AvatarGroup
     -   [] Badge
+        -   [x] Badge
+        -   [] CounterBadge
+        -   [N/A] PresenceBadge
+    -   [x] Breadcrumb
     -   [x] Button
         -   [x] Button
         -   [X] CompoundButton
@@ -69,7 +73,6 @@ We currently cover the following components:
     -   [x] Toolbar
     -   [x] Tooltip
     -   [] Tree
-    -   [x] Breadcrumb
     -   [x] Datepicker
     -   [] Calendar
     -   [] Timepicker

README.md

@@ -151,6 +151,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 | [accordion-header-needs-labelling](docs/rules/accordion-header-needs-labelling.md)                     | The accordion header is a button and it needs an accessibile name e.g. text content, aria-label, aria-labelledby.                                 | ✅  |    |    |
 | [accordion-item-needs-header-and-panel](docs/rules/accordion-item-needs-header-and-panel.md)           | An AccordionItem needs exactly one header and one panel                                                                                           | ✅  |    |    |
 | [avatar-needs-name](docs/rules/avatar-needs-name.md)                                                   | Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby                                                        | ✅  |    |    |
+| [badge-needs-accessible-name](docs/rules/badge-needs-accessible-name.md)                               |                                                                                                                                                   | ✅  |    | 🔧 |
 | [breadcrumb-needs-labelling](docs/rules/breadcrumb-needs-labelling.md)                                 | All interactive elements must have an accessible name                                                                                             | ✅  |    |    |
 | [checkbox-needs-labelling](docs/rules/checkbox-needs-labelling.md)                                     | Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby                                                   | ✅  |    |    |
 | [combobox-needs-labelling](docs/rules/combobox-needs-labelling.md)                                     | All interactive elements must have an accessible name                                                                                             | ✅  |    |    |

docs/rules/badge-needs-accessible-name.md

@@ -0,0 +1,52 @@
+# @microsoft/fluentui-jsx-a11y/badge-needs-accessible-name
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+Badge information should be surfaced as part of the control that it is associated with, because, badges themselves do not receive focus meaning they are not directly accessible by screen readers. If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.
+
+Badge content is exposed as text, and is treated by screen readers as if it were inline content of the control it is associated with.
+
+## Rule Details
+
+Ensure that the `Badge` component is accessible.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Badge icon={<PasteIcon />} />
+```
+
+```jsx
+<Badge appearance="filled" color="brand" />} />
+```
+
+```jsx
+<Badge size="extra-large" />
+```
+
+Examples of **correct** code for this rule:
+
+If the badge contains a custom icon, that icon must be given alternative text with aria-label, unless it is purely presentational:
+
+```jsx
+<Badge icon={<PasteIcon aria-label="paste" />} />
+```
+
+Badge shouldn't rely only on color information. Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only ensure that non-visual information is included in the parent's label or description. Alternatively, mark up the Badge as an image with a label:
+
+```jsx
+<Badge role="img" aria-label="Active" appearance="filled" color="brand" />} />
+```
+
+```jsx
+<Badge appearance="tint">999+</Badge>
+```
+
+## Further Reading
+
+<https://react.fluentui.dev/?path=/docs/components-badge-badge--docs>
+

lib/index.js

@@ -40,7 +40,8 @@ module.exports = {
         "avoid-using-aria-describedby-for-primary-labelling": require("./rules/avoid-using-aria-describedby-for-primary-labelling"),
         "dialogbody-needs-title-content-and-actions": require("./rules/dialogbody-needs-title-content-and-actions"),
         "dialogsurface-needs-aria": require("./rules/dialogsurface-needs-aria"),
-        "spinner-needs-labelling": require("./rules/spinner-needs-labelling")
+        "spinner-needs-labelling": require("./rules/spinner-needs-labelling"),
+        "badge-needs-accessible-name": require("./rules/badge-needs-accessible-name")
     },
     configs: {
         recommended: {
@@ -68,13 +69,10 @@ module.exports = {
                 "@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",
-<<<<<<< HEAD
-                "@microsoft/fluentui-jsx-a11y/avoid-using-aria-describedby-for-primary-labelling": "warn"
-=======
+                "@microsoft/fluentui-jsx-a11y/avoid-using-aria-describedby-for-primary-labelling": "warn",
                 "@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"
->>>>>>> origin/main
             }
         }
     }
@@ -84,4 +82,3 @@ module.exports = {
 module.exports.processors = {
     // add your processors here
 };
-

lib/rules/badge-needs-accessible-name.js

@@ -0,0 +1,116 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+var elementType = require("jsx-ast-utils").elementType;
+const { getPropValue, getProp } = require("jsx-ast-utils");
+const { hasTextContentChild } = require("../util/hasTextContentChild");
+var hasProp = require("jsx-ast-utils").hasProp;
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        // possible error messages for the rule
+        messages: {
+            badgeNeedsAccessibleName: "Badge: needs accessible name. Add text content or a labelled image.",
+            colourOnlyBadgesNeedAttributes: 'Color-only <Badge> must have role="img" and an aria-label attribute.',
+            badgeIconNeedsLabelling: "The icon inside <Badge> must have an aria-label attribute."
+        },
+        type: "problem", // `problem`, `suggestion`, or `layout`
+        docs: {
+            description: "",
+            recommended: false,
+            url: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role" // URL to the documentation page for this rule
+        },
+        fixable: "code", // Or `code` or `whitespace`
+        schema: [] // Add a schema if the rule has options
+    },
+
+    create(context) {
+        return {
+            // visitor functions for different types of nodes
+            JSXElement(node) {
+                const openingElement = node.openingElement;
+
+                // If it's not a Badge component, return early
+                if (elementType(openingElement) !== "Badge") {
+                    return;
+                }
+
+                const hasTextContent = hasTextContentChild(node);
+
+                // Check if Badge has text content and return early if it does
+                if (hasTextContent) {
+                    return;
+                }
+
+                // Check if Badge has an icon
+                const hasIconProp = hasProp(openingElement.attributes, "icon");
+
+                if (hasIconProp) {
+                    const iconProp = getProp(openingElement.attributes, "icon");
+
+                    if (iconProp) {
+                        const iconElement = iconProp.value.expression;
+
+                        // Check if the icon has an aria-label
+                        const ariaLabelAttr = hasProp(iconElement.openingElement.attributes, "aria-label");
+
+                        // Report an error if aria-label is missing
+                        if (!ariaLabelAttr) {
+                            context.report({
+                                node,
+                                messageId: "badgeIconNeedsLabelling",
+                                fix(fixer) {
+                                    const ariaLabelFix = fixer.insertTextAfter(iconElement.openingElement.name, ' aria-label=""');
+                                    return ariaLabelFix;
+                                }
+                            });
+                        }
+                    }
+                }
+
+                // Simplified logic to check for a color-only Badge (no icon, no text)
+                const hasColorProp = hasProp(openingElement.attributes, "color");
+                const hasRole = getPropValue(getProp(openingElement.attributes, "role")) === "img";
+                const hasAriaLabel = hasProp(openingElement.attributes, "aria-label");
+
+                // If it's color-only, ensure it has role="img" and aria-label
+                if (!hasIconProp && !(hasRole && hasAriaLabel)) {
+                    if (hasColorProp) {
+                        context.report({
+                            node,
+                            messageId: "colourOnlyBadgesNeedAttributes",
+                            fix(fixer) {
+                                const fixes = [];
+
+                                // Fix role by adding role="img"
+                                if (!hasRole) {
+                                    fixes.push(fixer.insertTextAfter(openingElement.name, ' role="img"'));
+                                }
+
+                                // Fix aria-label by adding aria-label=""
+                                if (!hasAriaLabel) {
+                                    fixes.push(fixer.insertTextAfter(openingElement.name, ' aria-label=""'));
+                                }
+
+                                return fixes;
+                            }
+                        });
+                    } else {
+                        context.report({
+                            node,
+                            messageId: "badgeNeedsAccessibleName"
+                        });
+                    }
+                }
+            }
+        };
+    }
+};
+

tests/lib/rules/badge-needs-accessible-name.js

@@ -0,0 +1,72 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/badge-needs-accessible-name"),
+    RuleTester = require("eslint").RuleTester;
+
+RuleTester.setDefaultConfig({
+    parserOptions: {
+        ecmaVersion: 6,
+        ecmaFeatures: {
+            jsx: true
+        }
+    }
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+ruleTester.run("badge-needs-accessible-name", rule, {
+    valid: [
+        `<Badge role="img" aria-label="Active" appearance="filled" color="brand" />`,
+        `<Badge icon={<PasteIcon aria-label="paste" />} />`,
+        `<div><Badge appearance="filled">999+</Badge></div>`
+    ],
+
+    invalid: [
+        {
+            code: `<Badge appearance="filled" color="brand" />`,
+            errors: [{ messageId: "colourOnlyBadgesNeedAttributes" }],
+            output: `<Badge role="img" aria-label="" appearance="filled" color="brand" />`
+        },
+        {
+            code: `<Badge appearance="filled" color="brand" aria-label="Active" />`,
+            errors: [{ messageId: "colourOnlyBadgesNeedAttributes" }],
+            output: `<Badge role="img" appearance="filled" color="brand" aria-label="Active" />`
+        },
+        {
+            code: `<Badge appearance="filled" color="brand" role="img" />`,
+            errors: [{ messageId: "colourOnlyBadgesNeedAttributes" }],
+            output: `<Badge aria-label="" appearance="filled" color="brand" role="img" />`
+        },
+        {
+            code: `<Badge icon={<PasteIcon />} />`,
+            errors: [{ messageId: "badgeIconNeedsLabelling" }],
+            output: `<Badge icon={<PasteIcon aria-label="" />} />`
+        },
+        {
+            code: `<Badge appearance="filled" color="brand"></Badge>`,
+            errors: [{ messageId: "colourOnlyBadgesNeedAttributes" }],
+            output: `<Badge role="img" aria-label="" appearance="filled" color="brand"></Badge>`
+        },
+        {
+            code: `<Badge></Badge>`,
+            errors: [{ messageId: "badgeNeedsAccessibleName" }],
+            output: null
+        },
+        {
+            code: `<Badge size="medium" appearance="filled"  />`,
+            errors: [{ messageId: "badgeNeedsAccessibleName" }],
+            output: null
+        }
+    ]
+});
+