Add Test cases for additional coverage.

Author: sidhsharma1992

tests/lib/rules/combobox-needs-labelling.test.ts

@@ -22,6 +22,8 @@ ruleTester.run("combobox-needs-labelling", rule as unknown as Rule.RuleModule, {
         '<div><label id="my-label">Best pet</label><Combobox aria-labelledby="my-label" placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
         '<div><Label id="my-label">Best pet</Label><Combobox aria-labelledby="my-label" placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
         '<div><Label id={"my-label"}>Best pet</Label><Combobox aria-labelledby={"my-label"} placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
+        '<div><Label id={"my-label" + 1}>Best pet</Label><Combobox aria-labelledby={"my-label" + 1} placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
+        '<div><Label id={`my-label-${value}`}>Best pet</Label><Combobox aria-labelledby={`my-label-${value}`} placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
         '<div><label htmlFor="my-input">Best pet</label><Combobox id="my-input" placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
         '<div><Label htmlFor="my-input">Best pet</Label><Combobox id="my-input" placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
         '<div><Label htmlFor={myInputId}>Best pet</Label><Combobox id={myInputId} placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
@@ -39,6 +41,10 @@ ruleTester.run("combobox-needs-labelling", rule as unknown as Rule.RuleModule, {
         {
             code: "<><Field></Field><Combobox /></>",
             errors: [{ messageId: "noUnlabelledCombobox" }]
+        },
+        {
+            code: '<div><Label id={my-label}>Best pet</Label><Combobox aria-labelledby={my-label} placeholder="Select an animal" {...props}><Option>{"Cat"}</Option></Combobox></div>',
+            errors: [{ messageId: "noUnlabelledCombobox" }]
         }
     ]
 });

tests/lib/rules/dropdown-needs-labelling.test.ts

@@ -17,6 +17,11 @@ ruleTester.run("dropdown-needs-labelling", rule as unknown as Rule.RuleModule, {
     valid: [
         `<><Label htmlFor={comboId}>Best pet</Label> <Dropdown id={comboId} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
         `<><Label id="my-dropdownid" /><Dropdown aria-labelledby="my-dropdownid" /></>`,
+
+        // expression forms: binary concatenation and template literal (cover expression-literal forms)
+        `<><Label id={"my-label" + 1}>Best pet</Label> <Dropdown aria-labelledby={"my-label" + 1} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
+        `<><Label id={\`my-label-\${value}\`}>Best pet</Label> <Dropdown aria-labelledby={\`my-label-\${value}\`} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
+
         `<><Label id={comboId}>Best pet</Label> <Dropdown aria-labelledby={comboId} multiselect={true} placeholder="Select an animal" {...props} > {options.map((option) => ( <Option key={option} disabled={option === "Ferret"}> {option} </Option> ))}</Dropdown></>`,
         `<><Label id={comboId2}>This is a Dropdown</Label><Dropdown aria-labelledby={comboId2} /></>`,
         `<Dropdown aria-label="This is a Dropdown" />`,

tests/lib/rules/input-components-require-accessible-name.test.ts

@@ -17,7 +17,22 @@ import { labelBasedComponents, elementsUsedAsLabels } from "../../../lib/applica
 function generateTestCases(labelComponent: string, componentName: string) {
     return {
         valid: [
-            `<><${labelComponent} id="test-span">Some Label</${labelComponent}><${componentName} id="some-id" aria-labelledby="test-span"/></>`
+            `<><${labelComponent} id="test-span">Some Label</${labelComponent}><${componentName} id="some-id" aria-labelledby="test-span"/></>`,
+            // expression forms: binary concatenation and template literal (cover expression-literal forms)
+            "<><" +
+                labelComponent +
+                ' id={"my-label" + 1}>Some Label</' +
+                labelComponent +
+                "><" +
+                componentName +
+                ' aria-labelledby={"my-label" + 1}/></>',
+            "<><" +
+                labelComponent +
+                " id={`my-label-${value}`}>Some Label</" +
+                labelComponent +
+                "><" +
+                componentName +
+                " aria-labelledby={`my-label-${value}`}/></>"
         ],
         invalid: [
             {
@@ -38,7 +53,22 @@ function generateTestCasesLabel(labelComponent: string, componentName: string) {
             `<${labelComponent}>test<SomeNesting><${componentName} /></SomeNesting></${labelComponent}>`,
             `<Field label="this is my label"><${componentName} /></Field>`,
             `<${componentName} aria-label="this is my component" />`,
-            `<><${labelComponent} id="paragraph_label-2">type here</${labelComponent}><${componentName} aria-labelledby="paragraph_label-2"></${componentName}><${labelComponent} id="paragraph_label-3">type here</${labelComponent}><${componentName} aria-labelledby="paragraph_label-3"></${componentName}></>`
+            `<><${labelComponent} id="paragraph_label-2">type here</${labelComponent}><${componentName} aria-labelledby="paragraph_label-2"></${componentName}><${labelComponent} id="paragraph_label-3">type here</${labelComponent}><${componentName} aria-labelledby="paragraph_label-3"></${componentName}></>`,
+            // expression forms for htmlFor/id pairing
+            "<><" +
+                labelComponent +
+                ' htmlFor={"my-input" + 1}>Some Label</' +
+                labelComponent +
+                "><" +
+                componentName +
+                ' id={"my-input" + 1}/></>',
+            "<><" +
+                labelComponent +
+                " htmlFor={`my-input-${value}`}>Some Label</" +
+                labelComponent +
+                "><" +
+                componentName +
+                " id={`my-input-${value}`}/></>"
         ],
         invalid: [
             {