Skip to content

Commit

Permalink
Remove deprecated a11y-no-onchange warning (#6457)
Browse files Browse the repository at this point in the history
  • Loading branch information
geoffrich committed Jun 29, 2021
1 parent fca6a6d commit e73f641
Show file tree
Hide file tree
Showing 5 changed files with 1 addition and 88 deletions.
19 changes: 0 additions & 19 deletions site/content/docs/05-accessibility-warnings.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 0 additions & 1 deletion site/src/routes/tutorial/[slug]/_TableOfContents.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}">
Expand Down
21 changes: 1 addition & 20 deletions src/compiler/compile/nodes/Element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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, {
Expand Down
16 changes: 0 additions & 16 deletions test/validator/samples/a11y-no-onchange/input.svelte

This file was deleted.

32 changes: 0 additions & 32 deletions test/validator/samples/a11y-no-onchange/warnings.json

This file was deleted.

0 comments on commit e73f641

Please sign in to comment.