diff --git a/.changeset/polite-pumpkins-guess.md b/.changeset/polite-pumpkins-guess.md new file mode 100644 index 000000000..e364f9635 --- /dev/null +++ b/.changeset/polite-pumpkins-guess.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: take event attributes into account when checking a11y diff --git a/packages/svelte/src/compiler/phases/2-analyze/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/a11y.js index 33692ebaf..eb87b5ddb 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/a11y.js +++ b/packages/svelte/src/compiler/phases/2-analyze/a11y.js @@ -9,7 +9,7 @@ import { } from '../patterns.js'; import { warn } from '../../warnings.js'; import fuzzymatch from '../1-parse/utils/fuzzymatch.js'; -import { is_text_attribute } from '../../utils/ast.js'; +import { is_event_attribute, is_text_attribute } from '../../utils/ast.js'; import { ContentEditableBindings } from '../constants.js'; import { walk } from 'zimmerframe'; @@ -704,10 +704,14 @@ function check_element(node, state, path) { } else if (attribute.type === 'OnDirective') { handlers.add(attribute.name); } else if (attribute.type === 'Attribute') { - attributes.push(attribute); - attribute_map.set(attribute.name, attribute); - if (attribute.name === 'contenteditable') { - has_contenteditable_attr = true; + if (is_event_attribute(attribute)) { + handlers.add(attribute.name.slice(2)); + } else { + attributes.push(attribute); + attribute_map.set(attribute.name, attribute); + if (attribute.name === 'contenteditable') { + has_contenteditable_attr = true; + } } } else if ( attribute.type === 'BindDirective' && diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 7103f4162..23e9378c2 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -115,7 +115,7 @@ const a11y = { 'a11y-misplaced-scope': () => 'A11y: The scope attribute should only be used with elements', 'a11y-positive-tabindex': () => 'A11y: avoid tabindex values above zero', 'a11y-click-events-have-key-events': () => - 'A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as