diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 915941d280..ffcf0e51f2 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -61,6 +61,17 @@ const a11y_no_onchange = new Set([ 'option' ]); +const a11y_labelable = new Set([ + "button", + "input", + "keygen", + "meter", + "output", + "progress", + "select", + "textarea" +]); + const invisible_elements = new Set(['meta', 'html', 'script', 'style']); const valid_modifiers = new Set([ @@ -508,7 +519,7 @@ export default class Element extends Node { } if (this.name === 'label') { - const has_input_child = this.children.some(i => (i instanceof Element && i.name === 'input' )); + const has_input_child = this.children.some(i => (i instanceof Element && a11y_labelable.has(i.name) )); if (!attribute_map.has('for') && !has_input_child) { component.warn(this, { code: `a11y-label-has-associated-control`, diff --git a/test/validator/samples/a11y-label-has-associated-control/input.svelte b/test/validator/samples/a11y-label-has-associated-control/input.svelte index 92458f4625..43304689dc 100644 --- a/test/validator/samples/a11y-label-has-associated-control/input.svelte +++ b/test/validator/samples/a11y-label-has-associated-control/input.svelte @@ -2,4 +2,5 @@ - + + diff --git a/test/validator/samples/a11y-label-has-associated-control/warnings.json b/test/validator/samples/a11y-label-has-associated-control/warnings.json index 5e9bb9c15a..b70a1a47de 100644 --- a/test/validator/samples/a11y-label-has-associated-control/warnings.json +++ b/test/validator/samples/a11y-label-has-associated-control/warnings.json @@ -1,32 +1,32 @@ [ - { - "code": "a11y-label-has-associated-control", - "end": { - "character": 16, - "column": 16, - "line": 1 - }, - "message": "A11y: A form label must be associated with a control.", - "pos": 0, - "start": { - "character": 0, - "column": 0, - "line": 1 - } - }, - { - "code": "a11y-label-has-associated-control", - "end": { - "character": 113, - "column": 30, - "line": 5 - }, - "message": "A11y: A form label must be associated with a control.", - "pos": 83, - "start": { - "character": 83, - "column": 0, - "line": 5 - } - } + { + "code": "a11y-label-has-associated-control", + "end": { + "character": 16, + "column": 16, + "line": 1 + }, + "message": "A11y: A form label must be associated with a control.", + "pos": 0, + "start": { + "character": 0, + "column": 0, + "line": 1 + } + }, + { + "code": "a11y-label-has-associated-control", + "end": { + "character": 149, + "column": 30, + "line": 6 + }, + "message": "A11y: A form label must be associated with a control.", + "pos": 119, + "start": { + "character": 119, + "column": 0, + "line": 6 + } + } ]