mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 01:11:24 +01:00
Code Issues Releases Wiki Activity

A11y rule no-onchange (#4788)

Browse Source 
* A11y rule no-onchange

* Fix message

* Fix tests

* Removing declarations
This commit is contained in:
André Lins 2020-05-17 12:50:38 -03:00 committed by GitHub
parent 40dca5252b
commit f7d1bf35a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/compiler/compile/nodes/Element.ts
View File

@ -56,6 +56,11 @@ const a11y_required_content = new Set([
'h6'
]);
const a11y_no_onchange = new Set([
'select',
'option'
]);
const invisible_elements = new Set(['meta', 'html', 'script', 'style']);
const valid_modifiers = new Set([
@ -424,13 +429,18 @@ export default class Element extends Node {
}
validate_special_cases() {
const { component,attributes } = this;
const { component, attributes, handlers } = this;
const attribute_map = new Map();
const handlers_map = new Map();
attributes.forEach(attribute => (
attribute_map.set(attribute.name, attribute)
));
handlers.forEach(handler => (
handlers_map.set(handler.name, handler)
));
if (this.name === 'a') {
const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
const id_attribute = attribute_map.get('id');
@ -496,6 +506,15 @@ export default class Element extends Node {
}
}
}
if (a11y_no_onchange.has(this.name)) {
if (handlers_map.has('change') && !handlers_map.has('blur')) {
component.warn(this, {
code: `a11y-no-onchange`,
message: `A11y: on:blur must be used instead of on:change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.`
});
}
}
}
validate_bindings() {

16
test/validator/samples/a11y-no-onchange/input.svelte Normal file
View File

@ -0,0 +1,16 @@
<select on:change={e => {}}>
<option>foo</option>
<option>bar</option>
</select>
<select on:change={e => {}} on:blur={e => {}}>
<option>foo</option>
<option>bar</option>
</select>
<select>
<option on:change={e => {}}>foo</option>
<option>bar</option>
</select>
<select>
<option on:change={e => {}} on:blur={e => {}}>foo</option>
<option>bar</option>
</select>

32
test/validator/samples/a11y-no-onchange/warnings.json Normal file
View File

@ -0,0 +1,32 @@
[
{
"code": "a11y-no-onchange",
"end": {
"character": 88,
"column": 9,
"line": 4
},
"message": "A11y: on:blur must be used instead of on:change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.",
"pos": 0,
"start": {
"character": 0,
"column": 0,
"line": 1
}
},
{
"code": "a11y-no-onchange",
"end": {
"character": 249,
"column": 44,
"line": 10
},
"message": "A11y: on:blur must be used instead of on:change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.",
"pos": 209,
"start": {
"character": 209,
"column": 4,
"line": 10
}
}
]