msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Fine-tune click-events-have-key-events rule

Browse Source 
Signed-off-by: mhatvan <markus_hatvan@aon.at>
pull/5073/head
mhatvan 6 years ago committed by tanhauhau
parent 31fc15e127
commit 8a80cc66e7
3 changed files with 219 additions and 20 deletions
Show Stats Download Patch File Download Diff File

73
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -556,18 +556,67 @@ export default class Element extends Node {
}); });
// click-events-have-key-events // click-events-have-key-events
if (handlers_map.has("click")) { if (handlers_map.has('click')) {
const hasKeyEvent =
handlers_map.has("keydown") || const a11y_interactive = new Set([
handlers_map.has("keyup") || 'a',
handlers_map.has("keypress"); 'button',
'select'
if (!hasKeyEvent) { ]);
component.warn(this, {
code: `a11y-click-events-have-key-events`, if (a11y_interactive.has(this.name)) {
message: `A11y: on:click event must be accompanied by on:keydown, on:keyup or on:keypress event` return;
}); }
}
if (this.name === 'input') {
const input_type = attribute_map.get('type');
const input_type_interactive = new Set(['button', 'checkbox', 'color', 'file', 'image', 'radio', 'reset', 'submit']);
if (input_type && input_type_interactive.has(input_type.get_static_value())) {
return;
}
}
if (this.attributes.find((attr) => attr.is_spread)) {
return;
}
const aria_hidden_attribute = attribute_map.get('aria-hidden');
const aria_hidden_value =
aria_hidden_attribute && aria_hidden_attribute.get_static_value();
// aria-hidden value is string, check its boolean value with JSON.parse()
if (aria_hidden_value && JSON.parse(aria_hidden_value)) {
return;
}
const type_attribute = attribute_map.get('type');
const type_value = type_attribute && type_attribute.get_static_value();
if (type_value && type_value === 'hidden') {
return;
}
const role_attribute = attribute_map.get('role');
const role_value = role_attribute && role_attribute.get_static_value();
const presentation_role_value =
role_value === 'presentation' || role_value === 'none';
if (presentation_role_value) {
return;
}
const hasKeyEvent =
handlers_map.has('keydown') ||
handlers_map.has('keyup') ||
handlers_map.has('keypress');
if (!hasKeyEvent) {
component.warn(this, {
code: `a11y-click-events-have-key-events`,
message: `A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.`
});
}
} }
// no-noninteractive-tabindex // no-noninteractive-tabindex

34
test/validator/samples/a11y-click-events-have-key-events/input.svelte
Unescape View File

@ -1,15 +1,45 @@
<script> <script>
function noop() {} function noop() {}
let props = {};
</script> </script>
<!-- should warn --> <!-- should warn -->
<div on:click={noop} /> <div on:click={noop} />
<div on:click={noop} aria-hidden="false" />
<div on:click={noop} role={undefined} />
<section on:click={noop} />
<main on:click={noop} />
<article on:click={noop} />
<header on:click={noop} />
<footer on:click={noop} />
<input type="date" on:click={noop} />
<!-- should not warn --> <!-- should not warn -->
<div class="foo" />
<a href="http://x.y.z" on:click={noop}>foo</a>
<button on:click={noop} />
<select on:click={noop} />
<input type="button" on:click={noop} />
<div on:click={noop} {...props} />
<div on:click={noop} on:keydown={noop} /> <div on:click={noop} on:keydown={noop} />
<div on:click={noop} on:keyup={noop} /> <div on:click={noop} on:keyup={noop} />
<div on:click={noop} on:keypress={noop} /> <div on:click={noop} on:keypress={noop} />
<div on:click={noop} on:keydown={noop} on:keyup={noop} /> <div on:click={noop} on:keydown={noop} on:keyup={noop} />
<div on:click={noop} on:keyup={noop} on:keypress={noop} /> <div on:click={noop} on:keyup={noop} on:keypress={noop} />
<div on:click={noop} on:keypress={noop} on:keydown={noop} /> <div on:click={noop} on:keypress={noop} on:keydown={noop} />
<div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop} /> <div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop} />
<div on:click={noop} type="hidden" />
<div on:click={noop} aria-hidden />
<div on:click={noop} aria-hidden="true" />
<div on:click={noop} aria-hidden="false" on:keydown={noop} />
<div on:click={noop} role="presentation" />
<div on:click={noop} role="none" />

132
test/validator/samples/a11y-click-events-have-key-events/warnings.json
Unescape View File

@ -1,17 +1,137 @@
[ [
{ {
"code": "a11y-click-events-have-key-events", "code": "a11y-click-events-have-key-events",
"message": "A11y: on:click event must be accompanied by on:keydown, on:keyup or on:keypress event", "message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"end": { "end": {
"character": 85, "character": 102,
"column": 23, "column": 23,
"line": 6 "line": 8
}, },
"start": { "start": {
"character": 62, "character": 79,
"column": 0, "column": 0,
"line": 6 "line": 8
}, },
"pos": 62 "pos": 79
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 146,
"column": 43,
"line": 9
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 103,
"start": {
"character": 103,
"column": 0,
"line": 9
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 187,
"column": 40,
"line": 10
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 147,
"start": {
"character": 147,
"column": 0,
"line": 10
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 216,
"column": 27,
"line": 12
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 189,
"start": {
"character": 189,
"column": 0,
"line": 12
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 241,
"column": 24,
"line": 13
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 217,
"start": {
"character": 217,
"column": 0,
"line": 13
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 269,
"column": 27,
"line": 14
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 242,
"start": {
"character": 242,
"column": 0,
"line": 14
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 296,
"column": 26,
"line": 15
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 270,
"start": {
"character": 270,
"column": 0,
"line": 15
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 323,
"column": 26,
"line": 16
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 297,
"start": {
"character": 297,
"column": 0,
"line": 16
}
},
{
"code": "a11y-click-events-have-key-events",
"end": {
"character": 362,
"column": 37,
"line": 18
},
"message": "A11y: visible, non-interactive elements with on:click event must be accompanied by a on:keydown, on:keyup or on:keypress event.",
"pos": 325,
"start": {
"character": 325,
"column": 0,
"line": 18
}
} }
] ]

Write Preview
Loading…
Cancel
Save