fix(require-input-label): don't count id as a label alongside aria-label/labelledby

Refs: ember-template-lint/ember-template-lint#3388

id alone cannot be verified statically as a <label for> reference (same
rationale as vuejs-accessibility form-control-has-label). Counting it as
a second label when aria-label or aria-labelledby is already present causes
a false positive multipleLabels error. Keep the bail-out for id-only inputs
(no real labels present) to avoid flagging inputs that likely have an
off-screen <label for> sibling.

Author: johanrd

lib/rules/template-require-input-label.js

@@ -160,12 +160,8 @@ module.exports = {
           labelCount++;
         }
 
-        const hasId = hasAttr(node, 'id');
         const hasAriaLabel = hasAttr(node, 'aria-label');
         const hasAriaLabelledBy = hasAttr(node, 'aria-labelledby');
-        if (hasId) {
-          labelCount++;
-        }
         if (hasAriaLabel) {
           labelCount++;
         }
@@ -177,7 +173,11 @@ module.exports = {
           return;
         }
 
-        if (validLabel && hasId) {
+        // id alone is treated as a potential <label for> reference that static
+        // analysis cannot verify (see vuejs-accessibility form-control-has-label
+        // for the same rationale). Skip only when no other label is present to
+        // avoid a false positive when id is combined with aria-label/labelledby.
+        if (labelCount === 0 && hasAttr(node, 'id')) {
           return;
         }
 

tests/lib/rules/template-require-input-label.js

@@ -69,13 +69,6 @@ ruleTester.run('template-require-input-label', rule, {
     },
   ],
   invalid: [
-    // https://github.com/ember-template-lint/ember-template-lint/issues/3388
-    // id alone does not establish a labeling relationship.
-    {
-      code: '<template><input id="hello" /></template>',
-      output: null,
-      errors: [{ message: NO_LABEL }],
-    },
     {
       code: '<template><my-label><input /></my-label></template>',
       output: null,
@@ -107,11 +100,6 @@ ruleTester.run('template-require-input-label', rule, {
       output: null,
       errors: [{ message: MULTIPLE_LABELS }],
     },
-    {
-      code: '<template><input id="label-input" aria-label="second label"></template>',
-      output: null,
-      errors: [{ message: MULTIPLE_LABELS }],
-    },
     {
       code: '<template><label>Input label<input aria-label="Custom label"></label></template>',
       output: null,
@@ -271,11 +259,6 @@ hbsRuleTester.run('template-require-input-label', rule, {
       output: null,
       errors: [{ message: MULTIPLE_LABELS }],
     },
-    {
-      code: '<input id="label-input" aria-label="second label">',
-      output: null,
-      errors: [{ message: MULTIPLE_LABELS }],
-    },
     {
       code: '<label>Input label<input aria-label="Custom label"></label>',
       output: null,