msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: relax `a11y-no-noninteractive-element-to-interactive-role` warning (#8402)

Browse Source 
#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
pull/8405/head
Simon H 2 years ago committed by GitHub
parent 0700abe41d
commit 6ce6f14755
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 193 deletions
Show Stats Download Patch File Download Diff File

31
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -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<string, Attribute>) {
@ -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));
}
});

192
test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json
Unescape View File

@ -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 <ul> cannot have interactive role 'menu'",
"start": {
"column": 0,
"line": 57
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 21,
"line": 58
},
"message": "A11y: Non-interactive element <ul> cannot have interactive role 'menubar'",
"start": {
"column": 0,
"line": 58
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 24,
"line": 59
},
"message": "A11y: Non-interactive element <ul> cannot have interactive role 'radiogroup'",
"start": {
"column": 0,
"line": 59
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 21,
"line": 60
},
"message": "A11y: Non-interactive element <ul> cannot have interactive role 'tablist'",
"start": {
"column": 0,
"line": 60
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 18,
"line": 61
},
"message": "A11y: Non-interactive element <ul> cannot have interactive role 'tree'",
"start": {
"column": 0,
"line": 61
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 22,
"line": 62
},
"message": "A11y: Non-interactive element <ul> cannot have interactive role 'treegrid'",
"start": {
"column": 0,
"line": 62
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 18,
"line": 64
},
"message": "A11y: Non-interactive element <ol> cannot have interactive role 'menu'",
"start": {
"column": 0,
"line": 64
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 21,
"line": 65
},
"message": "A11y: Non-interactive element <ol> cannot have interactive role 'menubar'",
"start": {
"column": 0,
"line": 65
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 24,
"line": 66
},
"message": "A11y: Non-interactive element <ol> cannot have interactive role 'radiogroup'",
"start": {
"column": 0,
"line": 66
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 21,
"line": 67
},
"message": "A11y: Non-interactive element <ol> cannot have interactive role 'tablist'",
"start": {
"column": 0,
"line": 67
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 18,
"line": 68
},
"message": "A11y: Non-interactive element <ol> cannot have interactive role 'tree'",
"start": {
"column": 0,
"line": 68
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 22,
"line": 69
},
"message": "A11y: Non-interactive element <ol> cannot have interactive role 'treegrid'",
"start": {
"column": 0,
"line": 69
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 17,
"line": 71
},
"message": "A11y: Non-interactive element <li> cannot have interactive role 'tab'",
"start": {
"column": 0,
"line": 71
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 22,
"line": 72
},
"message": "A11y: Non-interactive element <li> cannot have interactive role 'menuitem'",
"start": {
"column": 0,
"line": 72
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 17,
"line": 73
},
"message": "A11y: Non-interactive element <li> cannot have interactive role 'row'",
"start": {
"column": 0,
"line": 73
}
},
{
"code": "a11y-no-noninteractive-element-to-interactive-role",
"end": {
"column": 44,
"line": 74
},
"message": "A11y: Non-interactive element <li> cannot have interactive role 'treeitem'",
"start": {
"column": 0,
"line": 74
}
}
]

Write Preview
Loading…
Cancel
Save