From 9140a9c2e92bcd3a037bc78f62198d7c615035c3 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Mon, 27 Feb 2023 17:53:50 +0100 Subject: [PATCH] fix: hide some a11y warnings for `` tags Some a11y warnings only work on specific tags, which results in potential false positives for `` tags - silence those closes #7939 --- src/compiler/compile/compiler_warnings.ts | 4 ++-- src/compiler/compile/nodes/Element.ts | 11 ++++++----- .../a11y-aria-activedescendant/input.svelte | 3 +-- .../input.svelte | 2 ++ .../a11y-no-noninteractive-tabindex/input.svelte | 1 + .../warnings.json | 16 ++++++++-------- .../input.svelte | 1 + test/validator/samples/a11y-scope/input.svelte | 7 ++++++- test/validator/samples/a11y-scope/warnings.json | 4 ++-- 9 files changed, 29 insertions(+), 20 deletions(-) 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 @@ - +
- diff --git a/test/validator/samples/a11y-click-events-have-key-events/input.svelte b/test/validator/samples/a11y-click-events-have-key-events/input.svelte index a63ea92fbcb4..8737f04ec586 100644 --- a/test/validator/samples/a11y-click-events-have-key-events/input.svelte +++ b/test/validator/samples/a11y-click-events-have-key-events/input.svelte @@ -47,3 +47,5 @@
+ + diff --git a/test/validator/samples/a11y-no-noninteractive-tabindex/input.svelte b/test/validator/samples/a11y-no-noninteractive-tabindex/input.svelte index 9efed4d8795e..3b1fd14120ae 100644 --- a/test/validator/samples/a11y-no-noninteractive-tabindex/input.svelte +++ b/test/validator/samples/a11y-no-noninteractive-tabindex/input.svelte @@ -8,6 +8,7 @@
+
diff --git a/test/validator/samples/a11y-no-noninteractive-tabindex/warnings.json b/test/validator/samples/a11y-no-noninteractive-tabindex/warnings.json index 69c68c48bd12..73f00429dfd2 100644 --- a/test/validator/samples/a11y-no-noninteractive-tabindex/warnings.json +++ b/test/validator/samples/a11y-no-noninteractive-tabindex/warnings.json @@ -3,48 +3,48 @@ "code": "a11y-no-noninteractive-tabindex", "end": { "column": 20, - "line": 12 + "line": 13 }, "message": "A11y: noninteractive element cannot have nonnegative tabIndex value", "start": { "column": 0, - "line": 12 + "line": 13 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { "column": 35, - "line": 13 + "line": 14 }, "message": "A11y: noninteractive element cannot have nonnegative tabIndex value", "start": { "column": 0, - "line": 13 + "line": 14 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { "column": 24, - "line": 14 + "line": 15 }, "message": "A11y: noninteractive element cannot have nonnegative tabIndex value", "start": { "column": 0, - "line": 14 + "line": 15 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { "column": 26, - "line": 15 + "line": 16 }, "message": "A11y: noninteractive element cannot have nonnegative tabIndex value", "start": { "column": 0, - "line": 15 + "line": 16 } } ] diff --git a/test/validator/samples/a11y-role-has-required-aria-props/input.svelte b/test/validator/samples/a11y-role-has-required-aria-props/input.svelte index 8f72ff04bffc..e2afc6202997 100644 --- a/test/validator/samples/a11y-role-has-required-aria-props/input.svelte +++ b/test/validator/samples/a11y-role-has-required-aria-props/input.svelte @@ -8,3 +8,4 @@
+ diff --git a/test/validator/samples/a11y-scope/input.svelte b/test/validator/samples/a11y-scope/input.svelte index b7738ba7da94..bcc496d9b3fa 100644 --- a/test/validator/samples/a11y-scope/input.svelte +++ b/test/validator/samples/a11y-scope/input.svelte @@ -1 +1,6 @@ -
\ No newline at end of file + + + + + +
diff --git a/test/validator/samples/a11y-scope/warnings.json b/test/validator/samples/a11y-scope/warnings.json index b794afcb7333..b8e36cef5dbb 100644 --- a/test/validator/samples/a11y-scope/warnings.json +++ b/test/validator/samples/a11y-scope/warnings.json @@ -3,11 +3,11 @@ "code": "a11y-misplaced-scope", "message": "A11y: The scope attribute should only be used with elements", "start": { - "line": 1, + "line": 6, "column": 5 }, "end": { - "line": 1, + "line": 6, "column": 10 } }