diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 7a70e603a77f..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); }); } 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..33617735c871 --- /dev/null +++ b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json @@ -0,0 +1,32 @@ +[ + { + "code": "a11y-mouse-events-have-key-events", + "end": { + "character": 33, + "column": 33, + "line": 1 + }, + "message": "A11y: onMouseOver must be accompanied by onFocus for accessibility.", + "pos": 5, + "start": { + "character": 5, + "column": 5, + "line": 1 + } + }, + { + "code": "a11y-mouse-events-have-key-events", + "end": { + "character": 69, + "column": 32, + "line": 2 + }, + "message": "A11y: onMouseOut must be accompanied by onBlur for accessibility.", + "pos": 42, + "start": { + "character": 42, + "column": 5, + "line": 2 + } + } +]