Remove deprecated a11y-no-onchange warning (#6457)

pull/6473/head
Geoff Rich 3 years ago committed by GitHub
parent fca6a6d38a
commit e73f641ca5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -191,25 +191,6 @@ Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and th
---
### `a11y-no-onchange`
Enforce usage of `on:blur` over/in parallel with `on:change` on select menu elements for accessibility. `on:blur` should be used instead of `on:change`, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. `on:blur` is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the `on:change` event in some browsers. Regardless, when a change of context results from an `on:blur` event or an `on:change` event, the user should be notified of the change unless it occurs below the currently focused element.
```sv
<select on:change={e => {}} on:blur={e => {}}>
<option>foo</option>
<option>bar</option>
</select>
<!-- 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. -->
<select on:change={e => {}}>
<option>foo</option>
<option>bar</option>
</select>
```
---
### `a11y-positive-tabindex`
Avoid positive `tabIndex` property values to synchronize the flow of the page with keyboard tab order.

@ -77,7 +77,6 @@
{selected.chapter.title}
</span>
<!-- svelte-ignore a11y-no-onchange -->
<select value={slug} on:change={navigate}>
{#each sections as section, i}
<optgroup label="{i + 1}. {section.title}">

@ -57,11 +57,6 @@ const a11y_required_content = new Set([
'h6'
]);
const a11y_no_onchange = new Set([
'select',
'option'
]);
const a11y_labelable = new Set([
'button',
'input',
@ -435,19 +430,14 @@ export default class Element extends Node {
validate_special_cases() {
const { component, attributes, handlers } = this;
const { component, attributes } = 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');
@ -543,15 +533,6 @@ 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.'
});
}
}
if (a11y_distracting_elements.has(this.name)) {
// no-distracting-elements
component.warn(this, {

@ -1,16 +0,0 @@
<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>

@ -1,32 +0,0 @@
[
{
"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
}
}
]
Loading…
Cancel
Save