diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 817aabea02f0..d6b2dbc5aa71 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -186,10 +186,10 @@ export default {
code: 'a11y-mouse-events-have-key-events',
message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
}),
- a11y_click_events_have_key_events: () => ({
+ a11y_click_events_have_key_events: {
code: 'a11y-click-events-have-key-events',
message: 'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
- }),
+ },
a11y_missing_content: (name: string) => ({
code: 'a11y-missing-content',
message: `A11y: <${name}> element should have child content`
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index ed1b9d64bff9..4e43fe1824e8 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -550,7 +550,7 @@ export default class Element extends Node {
}
// aria-activedescendant-has-tabindex
- if (name === 'aria-activedescendant' && !is_interactive_element(this.name, attribute_map) && !attribute_map.has('tabindex')) {
+ if (name === 'aria-activedescendant' && !this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !attribute_map.has('tabindex')) {
component.warn(attribute, compiler_warnings.a11y_aria_activedescendant_has_tabindex);
}
}
@@ -590,7 +590,7 @@ export default class Element extends Node {
}
// role-has-required-aria-props
- if (!is_semantic_role_element(current_role, this.name, attribute_map)) {
+ if (!this.is_dynamic_element && !is_semantic_role_element(current_role, this.name, attribute_map)) {
const role = roles.get(current_role);
if (role) {
const required_role_props = Object.keys(role.requiredProps);
@@ -622,7 +622,7 @@ export default class Element extends Node {
}
// scope
- if (name === 'scope' && this.name !== 'th') {
+ if (name === 'scope' && !this.is_dynamic_element && this.name !== 'th') {
component.warn(attribute, compiler_warnings.a11y_misplaced_scope);
}
@@ -642,6 +642,7 @@ export default class Element extends Node {
const is_non_presentation_role = role?.is_static && !is_presentation_role(role.get_static_value() as ARIARoleDefintionKey);
if (
+ !this.is_dynamic_element &&
!is_hidden_from_screen_reader(this.name, attribute_map) &&
(!role || is_non_presentation_role) &&
!is_interactive_element(this.name, attribute_map) &&
@@ -655,14 +656,14 @@ export default class Element extends Node {
if (!has_key_event) {
component.warn(
this,
- compiler_warnings.a11y_click_events_have_key_events()
+ compiler_warnings.a11y_click_events_have_key_events
);
}
}
}
// no-noninteractive-tabindex
- if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
+ if (!this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
const tab_index = attribute_map.get('tabindex');
if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex);
diff --git a/test/validator/samples/a11y-aria-activedescendant/input.svelte b/test/validator/samples/a11y-aria-activedescendant/input.svelte
index 22570e8c5079..24a2d59ac142 100644
--- a/test/validator/samples/a11y-aria-activedescendant/input.svelte
+++ b/test/validator/samples/a11y-aria-activedescendant/input.svelte
@@ -7,11 +7,10 @@
-
+