From c623b33ea3f180af9134aa84c3ee2478bb66555b Mon Sep 17 00:00:00 2001 From: Bassam Ismail Date: Fri, 26 Jun 2020 17:17:01 +0530 Subject: [PATCH 1/2] fix(820): label has associated control --- src/compiler/compile/nodes/Element.ts | 10 ++++++ .../input.svelte | 5 +++ .../warnings.json | 32 +++++++++++++++++++ 3 files changed, 47 insertions(+) create mode 100644 test/validator/samples/a11y-label-has-associated-control/input.svelte create mode 100644 test/validator/samples/a11y-label-has-associated-control/warnings.json diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 7a70e603a77f..915941d280b0 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -507,6 +507,16 @@ export default class Element extends Node { } } + if (this.name === 'label') { + const has_input_child = this.children.some(i => (i instanceof Element && i.name === 'input' )); + if (!attribute_map.has('for') && !has_input_child) { + component.warn(this, { + code: `a11y-label-has-associated-control`, + message: `A11y: A form label must be associated with a control.` + }); + } + } + if (a11y_no_onchange.has(this.name)) { if (handlers_map.has('change') && !handlers_map.has('blur')) { component.warn(this, { diff --git a/test/validator/samples/a11y-label-has-associated-control/input.svelte b/test/validator/samples/a11y-label-has-associated-control/input.svelte new file mode 100644 index 000000000000..92458f4625cf --- /dev/null +++ b/test/validator/samples/a11y-label-has-associated-control/input.svelte @@ -0,0 +1,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 new file mode 100644 index 000000000000..5e9bb9c15a92 --- /dev/null +++ b/test/validator/samples/a11y-label-has-associated-control/warnings.json @@ -0,0 +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 + } + } +] From 81ce3522125bf374edf708de41a64566bd5562ea Mon Sep 17 00:00:00 2001 From: Bassam Ismail Date: Fri, 26 Jun 2020 19:24:58 +0530 Subject: [PATCH 2/2] fix(820): check for all labelable elements --- src/compiler/compile/nodes/Element.ts | 13 +++- .../input.svelte | 3 +- .../warnings.json | 60 +++++++++---------- 3 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 915941d280b0..ffcf0e51f26d 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 92458f4625cf..43304689dc29 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 5e9bb9c15a92..b70a1a47de70 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 + } + } ]