Sync with template-lint

NullVoxPopuli · NullVoxPopuli · commit 29f41dff062f · 2026-03-20T10:11:15.000-04:00
diff --git a/docs/rules/template-require-input-label.md b/docs/rules/template-require-input-label.md
@@ -2,48 +2,101 @@
 
 <!-- end auto-generated rule header -->
 
-Require form input elements to have an associated label for accessibility.
+Users with assistive technology need user-input form elements to have
+associated labels.
 
-## Rule Details
+The rule applies to the following HTML tags:
 
-This rule enforces that input, textarea, and select elements have a way to be labeled, either through an `id` attribute (which can be referenced by a `<label for="...">`) or through `aria-label` or `aria-labelledby` attributes.
+- `<input>`
+- `<textarea>`
+- `<select>`
+
+The rule also applies to the following ember components:
+
+- `<Textarea />`
+- `<Input />`
+- `{{textarea}}`
+- `{{input}}`
+
+The label is **essential** for users. Leaving it out will cause **three**
+different WCAG criteria to fail:
+
+- [1.3.1, Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
+- [3.3.2, Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html)
+- [4.1.2, Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
+
+It is also associated with this common failure:
+
+- [#68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name](https://www.w3.org/WAI/WCAG21/Techniques/failures/F68)
+
+This rule checks to see if the input is contained by a label element. If it is
+not, it checks to see if the input has any of these three attributes: `id`,
+`aria-label`, or `aria-labelledby`. While the `id` element on the input is not
+a concrete indicator of the presence of an associated `<label>` element with a
+`for` attribute, it is a good indicator that one likely exists.
+
+This rule does not allow an input to use a `title` attribute for a valid label.
+This is because implementation by browsers is unreliable and incomplete.
+
+This rule is unable to determine if a valid label is present if `...attributes`
+is used, and must allow it to pass. However, developers are encouraged to write
+tests to ensure that a valid label is present for each input element present.
 
 ## Examples
 
-Examples of **incorrect** code for this rule:
+This rule **forbids** the following:
 
 ```gjs
 <template>
-  <input type="text" />
+  <div><input /></div>
 </template>
+```
 
+```gjs
 <template>
-  <textarea></textarea>
+  <input title="some label text" />
 </template>
+```
 
+```gjs
 <template>
-  <select>
-    <option>Option 1</option>
-  </select>
+  <textarea />
 </template>
 ```
 
-Examples of **correct** code for this rule:
+This rule **allows** the following:
 
 ```gjs
 <template>
-  <label for="name">Name:</label>
-  <input id="name" type="text" />
+  <label>Some Label Text<input /></label>
 </template>
+```
 
+```gjs
 <template>
-  <input aria-label="Name" type="text" />
+  <input id="someId" />
 </template>
+```
+
+```gjs
+<template>
+  <input aria-label="Label Text Here" />
+</template>
+```
+
+```gjs
+<template>
+  <input aria-labelledby="someButtonId" />
+</template>
+```
 
+```gjs
 <template>
-  <input aria-labelledby="name-label" type="text" />
+  <input ...attributes />
 </template>
+```
 
+```gjs
 <template>
   <input type="hidden" />
 </template>
@@ -55,13 +108,19 @@ Examples of **correct** code for this rule:
 - another option is to add an aria-label to the input element.
 - wrapping the input element in a label element is also allowed; however this is less flexible for styling purposes, so use with awareness.
 
-## Options
+## Configuration
 
-| Name        | Type       | Default | Description                                                          |
-| ----------- | ---------- | ------- | -------------------------------------------------------------------- |
-| `labelTags` | `string[]` | `[]`    | Additional tag names to treat as label elements (besides `<label>`). |
+- boolean - `true` to enable / `false` to disable
+- object -- An object with the following keys:
+  - `labelTags` -- An array of component names for that may be used as label replacements (in addition to the HTML `label` tag)
 
 ## References
 
-- [WCAG 2.1 - Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html)
-- [MDN - aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
+- [Understanding Success Criterion 3.3.2: Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html)
+- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
+- [Using label elements to associate text labels and form controls](https://www.w3.org/WAI/WCAG21/Techniques/html/H44.html)
+- [Using aria-labelledby to provide a name for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
+- [Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14.html)
+- [Failure due to a user interface control not having a programmatically determined name](https://www.w3.org/WAI/WCAG21/Techniques/failures/F68)
+- [Failure due to visually formatting a set of phone number fields but not including a text label](https://www.w3.org/WAI/WCAG21/Techniques/failures/F82)
diff --git a/lib/rules/template-require-input-label.js b/lib/rules/template-require-input-label.js
@@ -2,6 +2,40 @@ function hasAttr(node, name) {
   return node.attributes?.some((a) => a.name === name);
 }
 
+function isString(value) {
+  return typeof value === 'string';
+}
+
+function isRegExp(value) {
+  return value instanceof RegExp;
+}
+
+function allowedFormat(value) {
+  return isString(value) || isRegExp(value);
+}
+
+function parseConfig(config) {
+  if (config === false) {
+    return false;
+  }
+
+  if (config === true || config === undefined) {
+    return { labelTags: ['label'] };
+  }
+
+  if (config && typeof config === 'object' && Array.isArray(config.labelTags)) {
+    return {
+      labelTags: ['label', ...config.labelTags.filter(allowedFormat)],
+    };
+  }
+
+  return { labelTags: ['label'] };
+}
+
+function matchesLabelTag(tag, configuredTag) {
+  return isRegExp(configuredTag) ? configuredTag.test(tag) : configuredTag === tag;
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -14,19 +48,23 @@ module.exports = {
     },
     schema: [
       {
-        type: 'object',
-        properties: {
-          labelTags: {
-            type: 'array',
-            items: { type: 'string' },
+        anyOf: [
+          { type: 'boolean' },
+          {
+            type: 'object',
+            properties: {
+              labelTags: {
+                type: 'array',
+              },
+            },
+            additionalProperties: false,
           },
-        },
-        additionalProperties: false,
+        ],
       },
     ],
     messages: {
-      requireLabel: 'Input elements should have an associated label.',
-      multipleLabels: 'Input element has multiple labelling mechanisms.',
+      requireLabel: 'form elements require a valid associated label.',
+      multipleLabels: 'form elements should not have multiple labels.',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -37,20 +75,27 @@ module.exports = {
   },
 
   create(context) {
-    const options = context.options[0] || {};
-    const customLabelTags = options.labelTags || [];
-    const labelTags = new Set(['label', ...customLabelTags]);
+    const config = parseConfig(context.options[0]);
+    if (config === false) {
+      return {};
+    }
+
+    const filename = context.getFilename();
+    const isStrictMode = filename.endsWith('.gjs') || filename.endsWith('.gts');
     const elementStack = [];
 
     function hasValidLabelParent() {
       for (let i = elementStack.length - 1; i >= 0; i--) {
         const entry = elementStack[i];
-        if (labelTags.has(entry.tag)) {
-          // Custom label tags (not 'label') are always considered valid
+        const hasMatchingLabelTag = config.labelTags.some((configuredTag) =>
+          matchesLabelTag(entry.tag, configuredTag)
+        );
+
+        if (hasMatchingLabelTag) {
           if (entry.tag !== 'label') {
             return true;
           }
-          // For 'label' tag, valid only if it has more than one child (text content + input)
+
           const children = entry.node.children || [];
           return children.length > 1;
         }
@@ -62,6 +107,10 @@ module.exports = {
       GlimmerElementNode(node) {
         elementStack.push({ tag: node.tag, node });
 
+        if (isStrictMode && (node.tag === 'Input' || node.tag === 'Textarea')) {
+          return;
+        }
+
         const tagName = node.tag?.toLowerCase();
         if (tagName !== 'input' && tagName !== 'textarea' && tagName !== 'select') {
           return;
@@ -101,7 +150,6 @@ module.exports = {
           return;
         }
 
-        // Special case: label parent + id is OK (common pattern)
         if (validLabel && hasId) {
           return;
         }
diff --git a/tests/lib/rules/template-require-input-label.js b/tests/lib/rules/template-require-input-label.js
