Skip to content

A11y rule no-onchange #4788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 17, 2020
Merged

A11y rule no-onchange #4788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9b5b0a
A11y rule no-onchange
andrelmlins May 6, 2020
1575ccd
Fix message
andrelmlins May 8, 2020
e174c9d
Fix tests
andrelmlins May 8, 2020
441525e
Removing declarations
andrelmlins May 13, 2020
efa0ec7
Merge branch 'master' of https://github.com/andrelmlins/svelte
andrelmlins May 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion src/compiler/compile/nodes/Element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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() {
Expand Down
16 changes: 16 additions & 0 deletions test/validator/samples/a11y-no-onchange/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 32 additions & 0 deletions test/validator/samples/a11y-no-onchange/warnings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
]