Add additional edge cases and refactor code to handle them as needed.

Author: sidhsharma1992

lib/util/labelUtils.ts

@@ -8,6 +8,8 @@ import { TSESLint } from "@typescript-eslint/utils";
 import { JSXOpeningElement } from "estree-jsx";
 import { TSESTree } from "@typescript-eslint/utils";
 
+const validIdentifierRe = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
 /**
  * Checks if the element is nested within a Label tag.
  */
@@ -27,7 +29,8 @@ const isInsideLabelTag = (context: TSESLint.RuleContext<string, unknown[]>): boo
  * Capture groups (when the alternation matches) are in positions 2..6
  * (group 1 is the element/tag capture used in some surrounding regexes).
  */
-const idOrExprRegex = /(?:"([^"]*)"|'([^']*)'|\{\s*"([^"]*)"\s*\}|\{\s*'([^']*)'\s*\}|\{\s*([A-Za-z_$][A-ZaLign$0-9_$]*)\s*\})/i;
+// FIXED: typo in identifier character class (A-ZaLign -> A-Za-z)
+const idOrExprRegex = /(?:"([^"]*)"|'([^']*)'|\{\s*"([^"]*)"\s*\}|\{\s*'([^']*)'\s*\}|\{\s*([A-Za-z_$][A-Za-z0-9_$]*)\s*\})/i;
 
 const escapeForRegExp = (s: string): string => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
@@ -42,11 +45,54 @@ const extractCapturedId = (match: RegExpExecArray): string | undefined => {
 };
 
 /**
- * New small helper: normalize attribute value (string list vs identifier vs empty/none)
- * Keeps getProp/getPropValue usage isolated and provides a single place to trim/split.
- * Return shape (for consumers):
+ * Evaluate simple constant BinaryExpression concatenations (left/right are Literals or nested BinaryExpressions).
+ * Returns string when evaluation succeeds, otherwise undefined.
+ */
+const evalConstantString = (node: any): string | undefined => {
+    if (!node || typeof node !== "object") return undefined;
+    if (node.type === "Literal") {
+        return String(node.value);
+    }
+    if (node.type === "BinaryExpression" && node.operator === "+") {
+        const left = evalConstantString(node.left);
+        if (left === undefined) return undefined;
+        const right = evalConstantString(node.right);
+        if (right === undefined) return undefined;
+        return left + right;
+    }
+    return undefined;
+};
+
+/**
+ * Small renderer to reconstruct simple expression source text for BinaryExpressions and Literals.
+ * This provides a normalized textual form we can use to search the raw source for an exact expression match.
+ * For strings, we preserve quotes by using JSON.stringify; numbers use String(value).
+ */
+const renderSimpleExprSource = (node: any): string | undefined => {
+    if (!node || typeof node !== "object") return undefined;
+    if (node.type === "Literal") {
+        const val = (node as any).value;
+        if (typeof val === "string") return JSON.stringify(val); // keep the quotes "..."
+        return String(val);
+    }
+    if (node.type === "BinaryExpression" && node.operator === "+") {
+        const left = renderSimpleExprSource(node.left);
+        if (left === undefined) return undefined;
+        const right = renderSimpleExprSource(node.right);
+        if (right === undefined) return undefined;
+        return `${left} + ${right}`;
+    }
+    // Not attempting to render arbitrary expressions (Identifiers, MemberExpression, etc.)
+    return undefined;
+};
+
+/**
+ * New small helper: normalize attribute value (string list vs identifier vs empty/none vs template)
+ *
+ * Return shapes:
  *   { kind: "string", raw: string, tokens: string[] }
  *   { kind: "identifier", name: string }
+ *   { kind: "template", template: string } // template uses backticks and ${exprName} placeholders
  *   { kind: "empty" }
  *   { kind: "none" }
  */
@@ -57,18 +103,71 @@ const getAttributeValueInfo = (
 ): any => {
     const prop = getProp(openingElement.attributes as unknown as JSXOpeningElement["attributes"], attrName);
 
+    // Prefer inspecting the AST expression container directly when present
     if (prop && prop.value && (prop.value as any).type === "JSXExpressionContainer") {
         const expr = (prop.value as any).expression;
+
+        // Identifier: only accept valid JS identifiers
         if (expr && expr.type === "Identifier") {
-            return { kind: "identifier", name: expr.name as string };
+            if (typeof expr.name === "string" && validIdentifierRe.test(expr.name)) {
+                return { kind: "identifier", name: expr.name as string };
+            }
+            return { kind: "none" };
         }
+
+        // Literal inside expression container: {"x"} or {'x'}
         if (expr && expr.type === "Literal" && typeof (expr as any).value === "string") {
             const trimmed = ((expr as any).value as string).trim();
             if (trimmed === "") return { kind: "empty" };
-            return { kind: "string", raw: trimmed, tokens: trimmed.split(/\s+/) };
+            return { kind: "string", raw: trimmed, tokens: trimmed.split(/\s+/), exprText: JSON.stringify((expr as any).value) };
+        }
+
+        // BinaryExpression evaluation for constant concatenations: {"my-" + "label"} or {"my-" + 1}
+        if (expr && expr.type === "BinaryExpression") {
+            const v = evalConstantString(expr);
+            if (typeof v === "string") {
+                const trimmed = v.trim();
+                if (trimmed === "") return { kind: "empty" };
+                // Reconstruct simple source for the binary expression so we can search for an exact occurrence in raw source
+                const exprText = renderSimpleExprSource(expr);
+                if (exprText) {
+                    return { kind: "string", raw: trimmed, tokens: trimmed.split(/\s+/), exprText };
+                }
+                return { kind: "string", raw: trimmed, tokens: trimmed.split(/\s+/) };
+            }
+        }
+
+        // TemplateLiteral: reconstruct a canonical template string (preserve placeholders as ${name})
+        if (expr && expr.type === "TemplateLiteral") {
+            try {
+                const quasis = (expr as any).quasis || [];
+                const expressions = (expr as any).expressions || [];
+                let templateRaw = "`";
+                for (let i = 0; i < quasis.length; i++) {
+                    const q = quasis[i];
+                    const rawPart = (q && q.value && (q.value.raw ?? q.value.cooked)) || "";
+                    templateRaw += rawPart;
+                    if (i < expressions.length) {
+                        const e = expressions[i];
+                        if (e && e.type === "Identifier" && typeof e.name === "string") {
+                            templateRaw += "${" + e.name + "}";
+                        } else if (e && e.type === "Literal") {
+                            templateRaw += "${" + String((e as any).value) + "}";
+                        } else {
+                            // unknown expression placeholder — include empty placeholder
+                            templateRaw += "${}";
+                        }
+                    }
+                }
+                templateRaw += "`";
+                return { kind: "template", template: templateRaw };
+            } catch {
+                // if anything goes wrong, fall through
+            }
         }
     }
 
+    // Fallback: try to resolve via getPropValue (covers literal attrs and expression-literals and other resolvable forms)
     const resolved = prop ? getPropValue(prop) : undefined;
     if (typeof resolved === "string") {
         const trimmed = resolved.trim();
@@ -93,8 +192,6 @@ const hasBracedAttrId = (
 
 /**
  * Checks if a Label exists with htmlFor that matches idValue.
- * Handles:
- *  - htmlFor="id", htmlFor={'id'}, htmlFor={"id"}, htmlFor={idVar}
  */
 const hasLabelWithHtmlForId = (idValue: string, context: TSESLint.RuleContext<string, unknown[]>): boolean => {
     if (!idValue) return false;
@@ -112,7 +209,6 @@ const hasLabelWithHtmlForId = (idValue: string, context: TSESLint.RuleContext<st
 
 /**
  * Checks if a Label exists with id that matches idValue.
- * Handles: id="x", id={'x'}, id={"x"}, id={x}
  */
 const hasLabelWithHtmlId = (idValue: string, context: TSESLint.RuleContext<string, unknown[]>): boolean => {
     if (!idValue) return false;
@@ -146,12 +242,7 @@ const hasOtherElementWithHtmlId = (idValue: string, context: TSESLint.RuleContex
 };
 
 /**
- * Generic helper for aria-* attributes:
- * - if prop resolves to a string (literal or expression-literal) then we check labels/ids
- * - if prop is an identifier expression (aria-*= {someId}) we fall back to a narrow regex that checks
- *   other elements/labels with id={someId}
- *
- * This keeps the implementation compact and robust for the project's tests and common source patterns.
+ * Generic helper for aria-* attributes.
  */
 const hasAssociatedAriaText = (
     openingElement: TSESTree.JSXOpeningElement,
@@ -165,6 +256,14 @@ const hasAssociatedAriaText = (
             if (hasLabelWithHtmlId(id, context) || hasOtherElementWithHtmlId(id, context)) {
                 return true;
             }
+            // Fallback: if this string was produced by evaluating a BinaryExpression in the source,
+            // attempt to match the exact binary-expression source in other element id attributes.
+            if (info.exprText) {
+                const labelRe = new RegExp(`<(?:Label|label)[^>]*\\bid\\s*=\\s*\\{\\s*${escapeForRegExp(info.exprText)}\\s*\\}`, "i");
+                const otherRe = new RegExp(`<(?:div|span|p|h[1-6])[^>]*\\bid\\s*=\\s*\\{\\s*${escapeForRegExp(info.exprText)}\\s*\\}`, "i");
+                const src = getSourceText(context);
+                if (labelRe.test(src) || otherRe.test(src)) return true;
+            }
         }
         return false;
     }
@@ -174,6 +273,27 @@ const hasAssociatedAriaText = (
         return hasBracedAttrId("Label|label", "id", varName, context) || hasBracedAttrId("div|span|p|h[1-6]", "id", varName, context);
     }
 
+    if (info.kind === "template") {
+        const templ = info.template as string;
+        const src = getSourceText(context);
+        // Build a pattern which matches the template's literal parts but allows any expression
+        // inside `${...}` placeholders. This lets templates with non-Identifier expressions
+        // (e.g. `${a.b}`) match the canonicalized template produced from the AST.
+        const placeholderRe = /\$\{[^}]*\}/g;
+        let pattern = "";
+        let idx = 0;
+        let m: RegExpExecArray | null;
+        while ((m = placeholderRe.exec(templ)) !== null) {
+            pattern += escapeForRegExp(templ.slice(idx, m.index));
+            pattern += "\\$\\{[^}]*\\}";
+            idx = m.index + m[0].length;
+        }
+        pattern += escapeForRegExp(templ.slice(idx));
+        const labelRe = new RegExp(`<(?:Label|label)[^>]*\\bid\\s*=\\s*\\{\\s*${pattern}\\s*\\}`, "i");
+        const otherRe = new RegExp(`<(?:div|span|p|h[1-6])[^>]*\\bid\\s*=\\s*\\{\\s*${pattern}\\s*\\}`, "i");
+        return labelRe.test(src) || otherRe.test(src);
+    }
+
     return false;
 };
 
@@ -191,14 +311,28 @@ const hasAssociatedLabelViaHtmlFor = (openingElement: TSESTree.JSXOpeningElement
     const info = getAttributeValueInfo(openingElement, context, "id");
 
     if (info.kind === "string") {
-        return hasLabelWithHtmlForId(info.raw, context);
+        // primary: match literal/htmlFor forms
+        if (hasLabelWithHtmlForId(info.raw, context)) return true;
+        // fallback: match htmlFor written as a BinaryExpression / other expression that matches the same source text
+        if (info.exprText) {
+            const src = getSourceText(context);
+            const htmlForRe = new RegExp(`<(?:Label|label)[^>]*\\bhtmlFor\\s*=\\s*\\{\\s*${escapeForRegExp(info.exprText)}\\s*\\}`, "i");
+            if (htmlForRe.test(src)) return true;
+        }
+        return false;
     }
 
     if (info.kind === "identifier") {
         const varName = info.name;
         return hasBracedAttrId("Label|label", "htmlFor", varName, context);
     }
 
+    if (info.kind === "template") {
+        const templ = info.template as string;
+        const src = getSourceText(context);
+        return new RegExp(`<(?:Label|label)[^>]*\\bhtmlFor\\s*=\\s*\\{\\s*${escapeForRegExp(templ)}\\s*\\}`, "i").test(src);
+    }
+
     return false;
 };