From b2de47e8f3823015562e844eb5ec0ae31cfbf55a Mon Sep 17 00:00:00 2001 From: Bassam Ismail Date: Fri, 26 Jun 2020 21:59:26 +0530 Subject: [PATCH 1/3] fix(820): check if mouse events are accompanied with key events --- src/compiler/compile/nodes/Element.ts | 23 +++++++++++++++++++ .../input.svelte | 4 ++++ .../warnings.json | 1 + 3 files changed, 28 insertions(+) create mode 100644 test/validator/samples/a11y-mouse-events-have-key-events/input.svelte create mode 100644 test/validator/samples/a11y-mouse-events-have-key-events/warnings.json diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 7a70e603a77f..b76ed875bcad 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -61,6 +61,11 @@ const a11y_no_onchange = new Set([ 'option' ]); +const a11y_mouse_events = new Set([ + 'onMouseOver', + 'onMouseOut' +]); + const invisible_elements = new Set(['meta', 'html', 'script', 'style']); const valid_modifiers = new Set([ @@ -507,6 +512,24 @@ export default class Element extends Node { } } + if (a11y_mouse_events.has(this.name)) { + if (attribute_map.has('onMouseOver') && !attribute_map.has('onFocus')) { + component.warn(this, { + code: `a11y-mouse-events-have-key-events`, + message: `A11y: onMouseOver must be accompanied by onFocus for accessibility.` + }); + } + + if (attribute_map.has('onMouseOut') && attribute_map.has('onBlur')) { + component.warn(this, { + code: `a11y-mouse-events-have-key-events`, + message: `A11y: onMouseOut must be accompanied by onBlur for accessibility.` + }); + } + + + } + 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-mouse-events-have-key-events/input.svelte b/test/validator/samples/a11y-mouse-events-have-key-events/input.svelte new file mode 100644 index 000000000000..efdf95a0a1e3 --- /dev/null +++ b/test/validator/samples/a11y-mouse-events-have-key-events/input.svelte @@ -0,0 +1,4 @@ +
void 0 } /> +
void 0 } /> +
void 0 } onFocus={ () => void 0 } /> +
void 0 } onBlur={ () => void 0 } /> diff --git a/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json new file mode 100644 index 000000000000..fe51488c7066 --- /dev/null +++ b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json @@ -0,0 +1 @@ +[] From 60b1d96e2dc2e818ad16291db49998572708157d Mon Sep 17 00:00:00 2001 From: Bassam Ismail Date: Fri, 26 Jun 2020 22:19:51 +0530 Subject: [PATCH 2/3] fix(820): fix tests --- src/compiler/compile/nodes/Element.ts | 7 +--- .../warnings.json | 33 ++++++++++++++++++- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index b76ed875bcad..002e09d9f950 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -61,11 +61,6 @@ const a11y_no_onchange = new Set([ 'option' ]); -const a11y_mouse_events = new Set([ - 'onMouseOver', - 'onMouseOut' -]); - const invisible_elements = new Set(['meta', 'html', 'script', 'style']); const valid_modifiers = new Set([ @@ -512,7 +507,7 @@ export default class Element extends Node { } } - if (a11y_mouse_events.has(this.name)) { + if (attribute_map.has('onMouseOver') || attribute_map.has('onMouseOut')) { if (attribute_map.has('onMouseOver') && !attribute_map.has('onFocus')) { component.warn(this, { code: `a11y-mouse-events-have-key-events`, diff --git a/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json index fe51488c7066..bb956c2cd364 100644 --- a/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json +++ b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json @@ -1 +1,32 @@ -[] +[ + { + "code": "a11y-mouse-events-have-key-events", + "end": { + "character": 36, + "column": 36, + "line": 1 + }, + "message": "A11y: onMouseOver must be accompanied by onFocus for accessibility.", + "pos": 0, + "start": { + "character": 0, + "column": 0, + "line": 1 + } + }, + { + "code": "a11y-mouse-events-have-key-events", + "end": { + "character": 194, + "column": 59, + "line": 4 + }, + "message": "A11y: onMouseOut must be accompanied by onBlur for accessibility.", + "pos": 135, + "start": { + "character": 135, + "column": 0, + "line": 4 + } + } +] From 116013add85abd6734b8ada26678b82fa5952b02 Mon Sep 17 00:00:00 2001 From: Bassam Ismail Date: Sat, 27 Jun 2020 06:37:36 +0530 Subject: [PATCH 3/3] fix(820): move with attributes --- src/compiler/compile/nodes/Element.ts | 37 ++++++++++--------- .../warnings.json | 24 ++++++------ 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 002e09d9f950..ab5ddd2f072f 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -424,6 +424,25 @@ export default class Element extends Node { }); } + if (name === "onmouseover") { + if (!this.attributes.find(i => i.name === 'onFocus')) { + component.warn(attribute, { + code: `a11y-mouse-events-have-key-events`, + message: `A11y: onMouseOver must be accompanied by onFocus for accessibility.` + }); + } + } + + if (name === "onmouseout") { + if (!this.attributes.find(i => i.name === 'onBlur')) { + component.warn(attribute, { + code: `a11y-mouse-events-have-key-events`, + message: `A11y: onMouseOut must be accompanied by onBlur for accessibility.` + }); + } + } + + attribute_map.set(attribute.name, attribute); }); } @@ -507,24 +526,6 @@ export default class Element extends Node { } } - if (attribute_map.has('onMouseOver') || attribute_map.has('onMouseOut')) { - if (attribute_map.has('onMouseOver') && !attribute_map.has('onFocus')) { - component.warn(this, { - code: `a11y-mouse-events-have-key-events`, - message: `A11y: onMouseOver must be accompanied by onFocus for accessibility.` - }); - } - - if (attribute_map.has('onMouseOut') && attribute_map.has('onBlur')) { - component.warn(this, { - code: `a11y-mouse-events-have-key-events`, - message: `A11y: onMouseOut must be accompanied by onBlur for accessibility.` - }); - } - - - } - 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-mouse-events-have-key-events/warnings.json b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json index bb956c2cd364..33617735c871 100644 --- a/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json +++ b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json @@ -2,31 +2,31 @@ { "code": "a11y-mouse-events-have-key-events", "end": { - "character": 36, - "column": 36, + "character": 33, + "column": 33, "line": 1 }, "message": "A11y: onMouseOver must be accompanied by onFocus for accessibility.", - "pos": 0, + "pos": 5, "start": { - "character": 0, - "column": 0, + "character": 5, + "column": 5, "line": 1 } }, { "code": "a11y-mouse-events-have-key-events", "end": { - "character": 194, - "column": 59, - "line": 4 + "character": 69, + "column": 32, + "line": 2 }, "message": "A11y: onMouseOut must be accompanied by onBlur for accessibility.", - "pos": 135, + "pos": 42, "start": { - "character": 135, - "column": 0, - "line": 4 + "character": 42, + "column": 5, + "line": 2 } } ]