Skip to content

Commit 7d02a25

Browse files
ror-yror-y
authored
Add rule no-static-element-interactions (#680)
Add no-static-element-interactions
1 parent 6d6238f commit 7d02a25

14 files changed

+371
-86
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/.eslintcache
22
/.husky/
3+
/.idea/
34
/dist/
45
/node_modules/

‎docs/no-static-element-interactions.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# no-static-element-interactions
2+
3+
Static HTML elements do not have semantic meaning. This is clear in the case of `<div>` and `<span>`. It is less so clear in the case of elements that _seem_ semantic, but that do not have a semantic mapping in the accessibility layer. For example `<a>`, `<big>`, `<blockquote>`, `<footer>`, `<picture>`, `<strike>` and `<time>` -- to name a few -- have no semantic layer mapping. They are as void of meaning as `<div>`.
4+
5+
The [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
6+
7+
In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
8+
9+
## How do I resolve this error?
10+
11+
### Case: This element acts like a button, link, menuitem, etc
12+
13+
Indicate the element's role with the `role` attribute:
14+
15+
```vue
16+
<div
17+
@click="onClickHandler"
18+
@keypress="onKeyPressHandler"
19+
role="button"
20+
tabIndex="0"
21+
>
22+
Save
23+
</div>
24+
```
25+
26+
Common interactive roles include:
27+
28+
1. `button`
29+
1. `link`
30+
1. `checkbox`
31+
1. `menuitem`
32+
1. `menuitemcheckbox`
33+
1. `menuitemradio`
34+
1. `option`
35+
1. `radio`
36+
1. `searchbox`
37+
1. `switch`
38+
1. `textbox`
39+
40+
Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
41+
42+
Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.
43+
44+
Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
45+
46+
### Succeed
47+
48+
```vue
49+
<button @click="() => {}" class="foo" />
50+
<div class="foo" @click="() => {}" role="button" />
51+
<input type="text" @click="() => {}" />
52+
```
53+
54+
### Fail
55+
56+
```vue
57+
<div @click="() => {}" />
58+
```
59+
60+
## Accessibility guidelines
61+
62+
- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
63+
64+
### Resources
65+
66+
- [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
67+
- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
68+
- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
69+
- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

‎src/configs/recommended.ts

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const recommended: Linter.BaseConfig = {
3030
"vuejs-accessibility/no-distracting-elements": "error",
3131
"vuejs-accessibility/no-onchange": "error",
3232
"vuejs-accessibility/no-redundant-roles": "error",
33+
"vuejs-accessibility/no-static-element-interactions": "error",
3334
"vuejs-accessibility/role-has-required-aria-props": "error",
3435
"vuejs-accessibility/tabindex-no-positive": "error"
3536
}

‎src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import noAutofocus from "./rules/no-autofocus";
1818
import noDistractingElements from "./rules/no-distracting-elements";
1919
import noOnchange from "./rules/no-onchange";
2020
import noRedundantRoles from "./rules/no-redundant-roles";
21+
import noStaticElementInteractions from "./rules/no-static-element-interactions";
2122
import roleHasRequiredAriaProps from "./rules/role-has-required-aria-props";
2223
import tabindexNoPositive from "./rules/tabindex-no-positive";
2324

@@ -44,6 +45,7 @@ const plugin = {
4445
"no-distracting-elements": noDistractingElements,
4546
"no-onchange": noOnchange,
4647
"no-redundant-roles": noRedundantRoles,
48+
"no-static-element-interactions": noStaticElementInteractions,
4749
"role-has-required-aria-props": roleHasRequiredAriaProps,
4850
"tabindex-no-positive": tabindexNoPositive
4951
}

‎src/rules/__tests__/no-static-element-interactions.test.ts

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import rule from "../no-static-element-interactions";
2+
import makeRuleTester from "./makeRuleTester";
3+
4+
makeRuleTester("no-static-element-interactions", rule, {
5+
valid: [
6+
// Doesn't contain relevant directives
7+
"<div />",
8+
"<div id='foo' />",
9+
"<CoolComponent />",
10+
"<div class='foo' />",
11+
"<form @submit='void 0' />",
12+
13+
// Custom components
14+
"<Button @click='void 0' />",
15+
"<v2-button @click='void 0' />",
16+
17+
// Contains relevant directives
18+
"<div @click='void 0' role='button' />",
19+
"<div @contextmenu='void 0' role='button' />",
20+
"<div @dblclick='void 0' role='button' />",
21+
"<div @doubleclick='void 0' role='button' />",
22+
"<div @drag='void 0' role='button' />",
23+
"<div @dragend='void 0' role='button' />",
24+
"<div @dragenter='void 0' role='button' />",
25+
"<div @dragexit='void 0' role='button' />",
26+
"<div @dragleave='void 0' role='button' />",
27+
"<div @dragover='void 0' role='button' />",
28+
"<div @dragstart='void 0' role='button' />",
29+
"<div @drop='void 0' role='button' />",
30+
"<div @keydown='void 0' role='button' />",
31+
"<div @keypress='void 0' role='button' />",
32+
"<div @keyup='void 0' role='button' />",
33+
"<div @mousedown='void 0' role='button' />",
34+
"<div @mouseenter='void 0' role='button' />",
35+
"<div @mouseleave='void 0' role='button' />",
36+
"<div @mousemove='void 0' role='button' />",
37+
"<div @mouseout='void 0' role='button' />",
38+
"<div @mouseover='void 0' role='button' />",
39+
"<div @mouseup='void 0' role='button' />",
40+
41+
// Elements which don't require `role='button'`
42+
"<button @click='void 0' />",
43+
"<input @click='void 0'} />",
44+
45+
// Exception: Elements hidden for screenreaders
46+
"<div @click='void 0' aria-hidden='true'/>",
47+
48+
// Exception: `role='presentation'`
49+
"<div @click='void 0' role='presentation'/>"
50+
],
51+
invalid: [
52+
// Contains relevant directives but no `role='button'`
53+
"<div @click='void 0' />",
54+
"<div @contextmenu='void 0' />",
55+
"<div @dblclick='void 0' />",
56+
"<div @doubleclick='void 0' />",
57+
"<div @drag='void 0' />",
58+
"<div @dragend='void 0' />",
59+
"<div @dragenter='void 0' />",
60+
"<div @dragexit='void 0' />",
61+
"<div @dragleave='void 0' />",
62+
"<div @dragover='void 0' />",
63+
"<div @dragstart='void 0' />",
64+
"<div @drop='void 0' />",
65+
"<div @keydown='void 0' />",
66+
"<div @keypress='void 0' />",
67+
"<div @keyup='void 0' />",
68+
"<div @mousedown='void 0' />",
69+
"<div @mouseenter='void 0' />",
70+
"<div @mouseleave='void 0' />",
71+
"<div @mousemove='void 0' />",
72+
"<div @mouseout='void 0' />",
73+
"<div @mouseover='void 0' />",
74+
"<div @mouseup='void 0' />",
75+
76+
// Check other element types
77+
"<a @click='void 0' />",
78+
"<a @mousedown='void 0' />",
79+
"<span @click='void 0' />",
80+
"<span @mousedown='void 0' />",
81+
"<section @click='void 0' />",
82+
"<section @mousedown='void 0' />"
83+
]
84+
});

‎src/rules/click-events-have-key-events.ts

+1-18
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,16 @@
11
import type { Rule } from "eslint";
2-
import type { AST } from "vue-eslint-parser";
32

4-
import htmlElements from "../utils/htmlElements.json";
53
import {
64
defineTemplateBodyVisitor,
7-
getElementAttribute,
85
hasOnDirective,
96
hasOnDirectives,
7+
isCustomComponent,
108
isHiddenFromScreenReader,
119
isInteractiveElement,
1210
isPresentationRole,
1311
makeDocsURL
1412
} from "../utils";
1513

16-
// Why can I not import this like normal? Unclear.
17-
// eslint-disable-next-line @typescript-eslint/no-var-requires
18-
const vueEslintParser = require("vue-eslint-parser");
19-
20-
function isHtmlElementNode(node: AST.VElement) {
21-
return node.namespace === vueEslintParser.AST.NS.HTML;
22-
}
23-
24-
function isCustomComponent(node: AST.VElement) {
25-
return (
26-
(isHtmlElementNode(node) && !htmlElements.includes(node.rawName)) ||
27-
!!getElementAttribute(node, "is")
28-
);
29-
}
30-
3114
const rule: Rule.RuleModule = {
3215
meta: {
3316
type: "problem",

‎src/rules/interactive-supports-focus.ts

+1-25
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
getElementAttributeValue,
1010
getElementType,
1111
hasOnDirectives,
12+
interactiveHandlers,
1213
isHiddenFromScreenReader,
1314
isInteractiveElement,
1415
isPresentationRole,
@@ -26,31 +27,6 @@ for (const [role, definition] of roles.entries()) {
2627
}
2728
}
2829

29-
const interactiveHandlers = [
30-
"click",
31-
"contextmenu",
32-
"dblclick",
33-
"doubleclick",
34-
"drag",
35-
"dragend",
36-
"dragenter",
37-
"dragexit",
38-
"dragleave",
39-
"dragover",
40-
"dragstart",
41-
"drop",
42-
"keydown",
43-
"keypress",
44-
"keyup",
45-
"mousedown",
46-
"mouseenter",
47-
"mouseleave",
48-
"mousemove",
49-
"mouseout",
50-
"mouseover",
51-
"mouseup"
52-
];
53-
5430
function isDisabledElement(node: AST.VElement) {
5531
return (
5632
getElementAttributeValue(node, "disabled") ||

‎src/rules/no-static-element-interactions.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Rule } from "eslint";
2+
import {
3+
defineTemplateBodyVisitor,
4+
getElementAttributeValue,
5+
hasOnDirectives,
6+
interactiveHandlers,
7+
isCustomComponent,
8+
isHiddenFromScreenReader,
9+
isInteractiveElement,
10+
isInteractiveRole,
11+
isPresentationRole,
12+
makeDocsURL
13+
} from "../utils";
14+
15+
const rule: Rule.RuleModule = {
16+
meta: {
17+
type: "problem",
18+
docs: {
19+
url: makeDocsURL("no-static-element-interactions")
20+
},
21+
messages: {
22+
default:
23+
"Visible, non-interactive elements should not have an interactive handler."
24+
},
25+
schema: []
26+
},
27+
create(context: Rule.RuleContext): Rule.RuleListener {
28+
return defineTemplateBodyVisitor(context, {
29+
VElement(node) {
30+
const role = getElementAttributeValue(node, "role");
31+
32+
if (
33+
isCustomComponent(node) ||
34+
isHiddenFromScreenReader(node) ||
35+
isPresentationRole(node)
36+
) {
37+
return;
38+
}
39+
40+
if (
41+
hasOnDirectives(node, interactiveHandlers) &&
42+
!isInteractiveElement(node) &&
43+
!isInteractiveRole(role)
44+
) {
45+
context.report({ node: node as any, messageId: "default" });
46+
}
47+
}
48+
});
49+
}
50+
};
51+
52+
export default rule;

‎src/utils.ts

+4
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@ export { default as getElementAttribute } from "./utils/getElementAttribute";
55
export { default as getElementAttributeValue } from "./utils/getElementAttributeValue";
66
export { default as getElementType } from "./utils/getElementType";
77
export { default as getLiteralAttributeValue } from "./utils/getLiteralAttributeValue";
8+
export { default as getInteractiveRoles } from "./utils/getInteractiveRoles";
89
export { default as hasAccessibleChild } from "./utils/hasAccessibleChild";
910
export { default as hasAriaLabel } from "./utils/hasAriaLabel";
1011
export { default as hasContent } from "./utils/hasContent";
1112
export { default as hasOnDirective } from "./utils/hasOnDirective";
1213
export { default as hasOnDirectives } from "./utils/hasOnDirectives";
14+
export { default as interactiveHandlers } from "./utils/interactiveHandlers.json";
1315
export { default as isAriaHidden } from "./utils/isAriaHidden";
16+
export { default as isCustomComponent } from "./utils/isCustomComponent";
1417
export { default as isAttribute } from "./utils/isAttribute";
1518
export { default as isHiddenFromScreenReader } from "./utils/isHiddenFromScreenReader";
1619
export { default as isInteractiveElement } from "./utils/isInteractiveElement";
20+
export { default as isInteractiveRole } from "./utils/isInteractiveRole";
1721
export { default as isMatchingElement } from "./utils/isMatchingElement";
1822
export { default as isPresentationRole } from "./utils/isPresentationRole";
1923
export { default as makeDocsURL } from "./utils/makeDocsURL";

‎src/utils/getInteractiveRoles.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ARIARoleDefinitionKey, roles } from "aria-query";
2+
3+
function getInteractiveRoles() {
4+
const interactiveRoles: ARIARoleDefinitionKey[] = [];
5+
6+
for (const [role, definition] of roles.entries()) {
7+
if (
8+
!definition.abstract &&
9+
definition.superClass.some((classes) => classes.includes("widget"))
10+
) {
11+
interactiveRoles.push(role);
12+
}
13+
}
14+
15+
return interactiveRoles;
16+
}
17+
18+
export default getInteractiveRoles;

‎src/utils/interactiveHandlers.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
[
2+
"click",
3+
"contextmenu",
4+
"dblclick",
5+
"doubleclick",
6+
"drag",
7+
"dragend",
8+
"dragenter",
9+
"dragexit",
10+
"dragleave",
11+
"dragover",
12+
"dragstart",
13+
"drop",
14+
"keydown",
15+
"keypress",
16+
"keyup",
17+
"mousedown",
18+
"mouseenter",
19+
"mouseleave",
20+
"mousemove",
21+
"mouseout",
22+
"mouseover",
23+
"mouseup"
24+
]

‎src/utils/isCustomComponent.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { AST } from "vue-eslint-parser";
2+
import htmlElements from "./htmlElements.json";
3+
import { getElementAttribute } from "../utils";
4+
5+
// eslint-disable-next-line @typescript-eslint/no-var-requires
6+
const vueEslintParser = require("vue-eslint-parser");
7+
8+
function isHtmlElementNode(node: AST.VElement) {
9+
return node.namespace === vueEslintParser.AST.NS.HTML;
10+
}
11+
12+
function isCustomComponent(node: AST.VElement) {
13+
return (
14+
(isHtmlElementNode(node) && !htmlElements.includes(node.rawName)) ||
15+
!!getElementAttribute(node, "is")
16+
);
17+
}
18+
19+
export default isCustomComponent;

0 commit comments

Comments
 (0)