From 6ce6f14755c466ad9239e5fcb27d2f13fccc419b Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Tue, 21 Mar 2023 10:51:05 +0100 Subject: [PATCH] fix: relax `a11y-no-noninteractive-element-to-interactive-role` warning (#8402) #8167 introduced the strict version of it - until this is configurable, we should use the relaxed version instead, since many a11y docs actually advise using ul/ol etc --- src/compiler/compile/nodes/Element.ts | 31 ++- .../warnings.json | 192 ------------------ 2 files changed, 30 insertions(+), 193 deletions(-) diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 7fcb586b6a9..1678ea1caad 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -172,6 +172,35 @@ const input_type_to_implicit_role = new Map([ ['url', 'textbox'] ]); +/** + * Exceptions to the rule which follows common A11y conventions + * TODO make this configurable by the user + */ +const a11y_non_interactive_element_to_interactive_role_exceptions = { + ul: [ + 'listbox', + 'menu', + 'menubar', + 'radiogroup', + 'tablist', + 'tree', + 'treegrid' + ], + ol: [ + 'listbox', + 'menu', + 'menubar', + 'radiogroup', + 'tablist', + 'tree', + 'treegrid' + ], + li: ['menuitem', 'option', 'row', 'tab', 'treeitem'], + table: ['grid'], + td: ['gridcell'], + fieldset: ['radiogroup', 'presentation'] +}; + const combobox_if_list = new Set(['email', 'search', 'tel', 'text', 'url']); function input_implicit_role(attribute_map: Map) { @@ -651,7 +680,7 @@ export default class Element extends Node { } // no-noninteractive-element-to-interactive-role - if (is_non_interactive_element(this.name, attribute_map) && is_interactive_roles(current_role)) { + if (is_non_interactive_element(this.name, attribute_map) && is_interactive_roles(current_role) && !a11y_non_interactive_element_to_interactive_role_exceptions[this.name]?.includes(current_role)) { component.warn(this, compiler_warnings.a11y_no_noninteractive_element_to_interactive_role(current_role, this.name)); } }); diff --git a/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json b/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json index 4b4c9c3d979..0835f9f07fd 100644 --- a/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json +++ b/test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json @@ -622,197 +622,5 @@ "column": 0, "line": 53 } - }, - { - "code": "a11y-no-noninteractive-element-to-interactive-role", - "end": { - "column": 18, - "line": 57 - }, - "message": "A11y: Non-interactive element