Rule: allow input nested in label (#1170)

- treat input nested in label as implicitly labeled
  - add tests for nested, multi-input, and edge cases
  - document the nested form

  Per HTML spec, a label's labeled control is either what for= points
  to, or its first labelable descendant. The rule previously only
  honored for/id matching.

  Fixes #1170

Author: ShivaniNR

src/core/rules/input-requires-label.ts

@@ -10,7 +10,13 @@ export default {
       col: number
       forValue?: string
     }> = []
-    const inputTags: Array<{ event: Block; col: number; id?: string }> = []
+    const inputTags: Array<{
+      event: Block
+      col: number
+      id?: string
+      nested: boolean
+    }> = []
+    let labelDepth = 0
 
     parser.addListener('tagstart', (event) => {
       const tagName = event.tagName.toLowerCase()
@@ -20,20 +26,35 @@ export default {
       if (tagName === 'input') {
         // label is not required for hidden input
         if (mapAttrs['type'] !== 'hidden') {
-          inputTags.push({ event: event, col: col, id: mapAttrs['id'] })
+          inputTags.push({
+            event: event,
+            col: col,
+            id: mapAttrs['id'],
+            nested: labelDepth > 0,
+          })
         }
       }
 
       if (tagName === 'label') {
+        // a self-closing <label/> opens no scope and emits no tagend
+        if (!event.close) {
+          labelDepth++
+        }
         if ('for' in mapAttrs && mapAttrs['for'] !== '') {
           labelTags.push({ event: event, col: col, forValue: mapAttrs['for'] })
         }
       }
     })
 
+    parser.addListener('tagend', (event) => {
+      if (event.tagName.toLowerCase() === 'label' && labelDepth > 0) {
+        labelDepth--
+      }
+    })
+
     parser.addListener('end', () => {
       inputTags.forEach((inputTag) => {
-        if (!hasMatchingLabelTag(inputTag)) {
+        if (!inputTag.nested && !hasMatchingLabelTag(inputTag)) {
           reporter.warn(
             'No matching [ label ] tag found.',
             inputTag.event.line,

test/rules/input-requires-label.spec.js

@@ -38,6 +38,35 @@ describe(`Rules: ${ruleId}`, () => {
       const messages = HTMLHint.verify(code, ruleOptions)
       expect(messages.length).toBe(0)
     })
+
+    it('Input tag nested inside label tag should result in no error', () => {
+      const code = '<label><input type="password" /></label>'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(0)
+    })
+
+    it('Input nested in label whose for points elsewhere should result in no error', () => {
+      const code = '<label for="other-id"><input type="password" /></label>'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(0)
+    })
+
+    // Multiple inputs inside one label are all accepted. The HTML spec
+    // associates only the first labelable descendant with the label, but
+    // this rule is about "every input has a label nearby" for a11y, not
+    // strict spec conformance.
+    it('Multiple inputs nested inside one label should result in no error', () => {
+      const code =
+        '<label><input type="password" /><input type="text" /></label>'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(0)
+    })
+
+    it('Hidden input nested inside label should result in no error', () => {
+      const code = '<label><input type="hidden" /></label>'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(0)
+    })
   })
 
   describe('Error cases', () => {
@@ -81,5 +110,29 @@ describe(`Rules: ${ruleId}`, () => {
       expect(messages[0].col).toBe(7)
       expect(messages[0].type).toBe('warning')
     })
+
+    it('Input after a closed label should still result in error', () => {
+      const code = '<label></label><input type="password" />'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(1)
+      expect(messages[0].rule.id).toBe(ruleId)
+      expect(messages[0].type).toBe('warning')
+    })
+
+    it('Input after self-closing label should still result in error', () => {
+      const code = '<label /><input type="password" />'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(1)
+      expect(messages[0].rule.id).toBe(ruleId)
+      expect(messages[0].type).toBe('warning')
+    })
+
+    it('Unbalanced closing label tags should not break depth tracking', () => {
+      const code = '</label></label><input type="password" />'
+      const messages = HTMLHint.verify(code, ruleOptions)
+      expect(messages.length).toBe(1)
+      expect(messages[0].rule.id).toBe(ruleId)
+      expect(messages[0].type).toBe('warning')
+    })
   })
 })

website/src/content/docs/rules/input-requires-label.mdx

@@ -33,6 +33,7 @@ Level: <Badge text="Warning" variant="caution" />
 ```html
 <label for="some-id"/><input id="some-id" type="password" />
 <input id="some-id" type="password" /> <label for="some-id"/>
+<label><input type="password" /></label>
 ```
 
 ### Why this rule is important