Skip to content

Commit

Permalink
fix: relax a11y-no-noninteractive-element-to-interactive-role warning
Browse files Browse the repository at this point in the history 
sveltejs#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
  • Loading branch information
@dummdidumm
dummdidumm committed Mar 20, 2023
1 parent 0700abe commit 334c08f
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 193 deletions.
31 changes: 30 additions & 1 deletion src/compiler/compile/nodes/Element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>) {
Expand Down Expand Up @@ -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));
}
});
Expand Down
192 changes: 0 additions & 192 deletions test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
]

0 comments on commit 334c08f

Please sign in to comment.