Refactor Tag rules to use ruleFactory

Author: Iryna Vasylenko

lib/rules/tag-needs-name.ts

@@ -1,59 +1,26 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
-import { elementType } from "jsx-ast-utils";
-import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
-import { hasTextContentChild } from "../util/hasTextContentChild";
-import { hasAssociatedLabelViaAriaLabelledBy } from "../util/labelUtils";
-import { JSXOpeningElement } from "estree-jsx";
+import { ESLintUtils } from "@typescript-eslint/utils";
+import { makeLabeledControlRule } from "../util/ruleFactory";
 
 //------------------------------------------------------------------------------
 // Rule Definition
 //------------------------------------------------------------------------------
 
-const rule = ESLintUtils.RuleCreator.withoutDocs({
-    defaultOptions: [],
-    meta: {
-        type: "problem",
-        docs: {
-            description:
-                "This rule aims to ensure that Tag component have an accessible name via text content, aria-label, or aria-labelledby.",
-            recommended: "strict",
-            url: "https://react.fluentui.dev/?path=/docs/components-tag-tag--docs"
-        },
-        fixable: undefined,
-        schema: [],
-        messages: {
-            missingAriaLabel: "Accessibility: Tag must have an accessible name"
-        }
-    },
-    create(context) {
-        return {
-            // visitor functions for different types of nodes
-            JSXElement(node: TSESTree.JSXElement) {
-                const openingElement = node.openingElement;
-
-                // if it is not a Tag, return
-                if (elementType(openingElement as JSXOpeningElement) !== "Tag") {
-                    return;
-                }
-
-                // Check if tag has any accessible name
-                const hasTextContent = hasTextContentChild(node);
-                const hasAriaLabel = hasNonEmptyProp(openingElement.attributes, "aria-label");
-                const hasAriaLabelledBy = hasAssociatedLabelViaAriaLabelledBy(openingElement, context);
-                const hasAccessibleName = hasTextContent || hasAriaLabel || hasAriaLabelledBy;
-
-                if (!hasAccessibleName) {
-                    context.report({
-                        node,
-                        messageId: `missingAriaLabel`
-                    });
-                }
-            }
-        };
-    }
-});
-
-export default rule;
+export default ESLintUtils.RuleCreator.withoutDocs(
+    makeLabeledControlRule({
+        component: "Tag",
+        messageId: "missingAriaLabel",
+        description: "Accessibility: Tag must have an accessible name",
+        labelProps: ["aria-label"],
+        allowFieldParent: false,
+        allowHtmlFor: false,
+        allowLabelledBy: true,
+        allowWrappingLabel: false,
+        allowTooltipParent: false,
+        allowDescribedBy: false,
+        allowLabeledChild: false,
+        allowTextContentChild: true
+    })
+);

lib/util/hasTriggerProp.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { TSESTree } from "@typescript-eslint/utils";
+import { hasProp } from "jsx-ast-utils";
+import { JSXAttribute } from "estree-jsx";
+
+/**
+ * Checks if a component has a specific trigger prop.
+ * This is useful for rules that only apply when certain props are present
+ * (e.g., dismissible, expandable, collapsible, etc.)
+ */
+export const hasTriggerProp = (openingElement: TSESTree.JSXOpeningElement, triggerProp: string): boolean => {
+    return hasProp(openingElement.attributes as JSXAttribute[], triggerProp);
+};

lib/util/hasValidNestedProp.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { TSESTree } from "@typescript-eslint/utils";
+import { getProp, getPropValue } from "jsx-ast-utils";
+import { JSXAttribute } from "estree-jsx";
+
+/**
+ * Checks if a value is a non-empty string
+ */
+const isNonEmptyString = (value: any): boolean => {
+    return typeof value === "string" && value.trim().length > 0;
+};
+
+/**
+ * Validates nested properties within a complex prop (object prop).
+ * This is useful for props like dismissIcon={{ "aria-label": "close", role: "button" }}
+ * where you need to check specific properties within the object.
+ */
+export const hasValidNestedProp = (openingElement: TSESTree.JSXOpeningElement, propName: string, nestedKey: string): boolean => {
+    const prop = getProp(openingElement.attributes as JSXAttribute[], propName);
+    if (!prop) {
+        return false;
+    }
+
+    const propValue = getPropValue(prop);
+    return Boolean(propValue && typeof propValue === "object" && isNonEmptyString((propValue as any)[nestedKey]));
+};

lib/util/ruleFactory.ts

@@ -14,26 +14,31 @@ import { elementType } from "jsx-ast-utils";
 import { JSXOpeningElement } from "estree-jsx";
 import { hasToolTipParent } from "./hasTooltipParent";
 import { hasLabeledChild } from "./hasLabeledChild";
+import { hasTextContentChild } from "./hasTextContentChild";
+import { hasTriggerProp } from "./hasTriggerProp";
 
 export type LabeledControlConfig = {
     component: string | RegExp;
     messageId: string;
     description: string;
     labelProps: string[]; // e.g. ["aria-label", "title", "label"]
-    /** Accept a parent <Field label="..."> wrapper as providing the label. */
-    allowFieldParent: boolean; // default false
-    allowHtmlFor: boolean /** Accept <label htmlFor="..."> association. */;
-    allowLabelledBy: boolean /** Accept aria-labelledby association. */;
-    allowWrappingLabel: boolean /** Accept being wrapped in a <label> element. */;
-    allowTooltipParent: boolean /** Accept a parent <Tooltip content="..."> wrapper as providing the label. */;
+    allowFieldParent: boolean; // Accept a parent <Field label="..."> wrapper as providing the label.
+    allowHtmlFor: boolean; // Accept <label htmlFor="..."> association.
+    allowLabelledBy: boolean; // Accept aria-labelledby association.
+    allowWrappingLabel: boolean; // Accept being wrapped in a <label> element.
+    allowTooltipParent: boolean; // Accept a parent <Tooltip content="..."> wrapper as providing the label.
     /**
      * Accept aria-describedby as a labeling strategy.
      * NOTE: This is discouraged for *primary* labeling; prefer text/aria-label/labelledby.
      * Keep this off unless a specific component (e.g., Icon-only buttons) intentionally uses it.
      */
     allowDescribedBy: boolean;
-    // NEW: treat labeled child content (img alt, svg title, aria-label on role="img") as the name
-    allowLabeledChild: boolean;
+    allowLabeledChild: boolean; // Accept labeled child elements to provide the label e.g. <Button><img alt="..." /></Button>
+    allowTextContentChild?: boolean; // Accept text children to provide the label e.g. <Button>Click me</Button>
+    /** Only apply rule when this trigger prop is present (e.g., "dismissible", "disabled") */
+    triggerProp?: string;
+    /** Custom validation function for complex scenarios */
+    customValidator?: Function;
 };
 
 /**
@@ -49,6 +54,8 @@ export type LabeledControlConfig = {
  *  6) Parent <Tooltip content="..."> context .......................... (allowTooltipParent)
  *  7) aria-describedby association (opt-in; discouraged as primary) .... (allowDescribedBy)
  *  8) treat labeled child content (img alt, svg title, aria-label on role="img") as the name
+ *  9) Conditional application based on trigger prop ................... (triggerProp)
+ * 10) Custom validation for complex scenarios ......................... (customValidator)
  *
  * This checks for presence of an accessible *name* only; not contrast or UX.
  */
@@ -92,19 +99,52 @@ export function makeLabeledControlRule(config: LabeledControlConfig): TSESLint.R
         defaultOptions: [],
 
         create(context: TSESLint.RuleContext<string, []>) {
-            return {
-                JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
-                    // elementType expects an ESTree JSX node — cast is fine
-                    const name = elementType(node as unknown as JSXOpeningElement);
-                    const matches = typeof config.component === "string" ? name === config.component : config.component.test(name);
+            const validateElement = (node: TSESTree.JSXOpeningElement, parentElement?: TSESTree.JSXElement) => {
+                // elementType expects an ESTree JSX node — cast is fine
+                const name = elementType(node as unknown as JSXOpeningElement);
+                const matches = typeof config.component === "string" ? name === config.component : config.component.test(name);
 
-                    if (!matches) return;
+                if (!matches) return;
 
-                    if (!hasAccessibleLabel(node, context, config)) {
-                        context.report({ node, messageId: config.messageId });
+                // If trigger prop is specified, only apply rule when it's present
+                if (config.triggerProp && !hasTriggerProp(node, config.triggerProp)) {
+                    return;
+                }
+
+                // Use custom validator if provided, otherwise use standard accessibility check
+                let isValid: boolean;
+                if (config.customValidator) {
+                    isValid = config.customValidator(node);
+                } else {
+                    // For text content checking, we need the parent element
+                    if (config.allowTextContentChild && parentElement) {
+                        // Create a modified config for hasAccessibleLabel that includes text content checking
+                        const modifiedConfig = { ...config };
+                        isValid = hasAccessibleLabel(node, context, modifiedConfig) || hasTextContentChild(parentElement);
+                    } else {
+                        isValid = hasAccessibleLabel(node, context, config);
                     }
                 }
+
+                if (!isValid) {
+                    context.report({ node, messageId: config.messageId });
+                }
             };
+
+            // If we need text content checking, we must visit JSXElement to get access to children
+            if (config.allowTextContentChild) {
+                return {
+                    JSXElement(node: TSESTree.JSXElement) {
+                        validateElement(node.openingElement, node);
+                    }
+                };
+            } else {
+                return {
+                    JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
+                        validateElement(node);
+                    }
+                };
+            }
         }
     };
 }