Skip to content

Commit 492cf15

Browse files
mauryaparimauryapari
committed
Fixed prettier issues
1 parent 1c2dded commit 492cf15

7 files changed

+165
-150
lines changed

‎docs/rules/no-aria-hidden-on-focusable.md

+17-16
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,22 @@ Enforce that `aria-hidden="true"` is not set on focusable elements or parent of
44

55
`aria-hidden="true"` can be used to hide purely decorative content from screen reader users. An element with `aria-hidden="true"` that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using `aria-hidden="true"` on focusable elements.
66

7-
See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
8-
7+
See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
98

109
### ✔ Succeed
10+
1111
```vue
1212
<template>
13-
<button>Press Me</button>
13+
<button>Press Me</button>
1414
</template>
1515
```
1616

1717
```vue
1818
<template>
19-
<div aria-hidden='true'><button tabindex='-1'>Submit</button></div>
19+
<div aria-hidden="true"><button tabindex="-1">Submit</button></div>
2020
</template>
2121
```
2222

23-
2423
```vue
2524
<template>
2625
<div aria-hidden='true'><span>Some text</div></div>
@@ -29,50 +28,52 @@ Enforce that `aria-hidden="true"` is not set on focusable elements or parent of
2928

3029
```vue
3130
<template>
32-
<button tabindex='-1' aria-hidden='true'>Press</button>
31+
<button tabindex="-1" aria-hidden="true">Press</button>
3332
</template>
3433
```
3534

3635
```vue
3736
<template>
38-
<div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>
37+
<div aria-hidden="true"><a href="#" tabindex="-1">Link</a></div>
3938
</template>
4039
```
4140

4241
```vue
4342
<template>
44-
<div aria-hidden='true'><span>Some text</div></div>
43+
<div aria-hidden="true"><span>Some text</span></div>
4544
</template>
4645
```
4746

4847
### ❌ Fail
4948

5049
```vue
5150
<template>
52-
<button aria-hidden='true'>press me</button>
51+
<button aria-hidden="true">press me</button>
5352
</template>
5453
```
5554

5655
```vue
5756
<template>
58-
<button aria-hidden="true">press me</button>
57+
<button aria-hidden="true">press me</button>
5958
</template>
6059
```
60+
6161
```vue
6262
<template>
63-
<a href="#" aria-hidden='true'>press me</a>
63+
<a href="#" aria-hidden="true">press me</a>
6464
</template>
6565
```
66+
6667
```vue
6768
<template>
68-
<div aria-hidden="true">
69-
<button>press me</button>
70-
</div>
69+
<div aria-hidden="true">
70+
<button>press me</button>
71+
</div>
7172
</template>
7273
```
74+
7375
```vue
7476
<template>
75-
<span tabindex='0' aria-hidden='true'><em>Icon</em></span>
77+
<span tabindex="0" aria-hidden="true"><em>Icon</em></span>
7678
</template>
7779
```
78-

‎docs/rules/no-role-presentation-on-focusable.md

+16-15
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,22 @@ Enforce that `role="presentation"` is not set on focusable elements or parent of
44

55
`role="presentation` can be used to hide purely decorative content from screen reader users. An element with `role="presentation"` that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using `role="presentation"` on focusable elements.
66

7-
See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
8-
7+
See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
98

109
### ✔ Succeed
10+
1111
```vue
1212
<template>
13-
<button>Press Me</button>
13+
<button>Press Me</button>
1414
</template>
1515
```
1616

1717
```vue
1818
<template>
19-
<div role="presentation"><button tabindex='-1'>Submit</button></div>
19+
<div role="presentation"><button tabindex="-1">Submit</button></div>
2020
</template>
2121
```
2222

23-
2423
```vue
2524
<template>
2625
<div role="presentation"><span>Some text</div></div>
@@ -29,19 +28,19 @@ Enforce that `role="presentation"` is not set on focusable elements or parent of
2928

3029
```vue
3130
<template>
32-
<button tabindex='-1' role="presentation">Press</button>
31+
<button tabindex="-1" role="presentation">Press</button>
3332
</template>
3433
```
3534

3635
```vue
3736
<template>
38-
<div role="presentation"><a href='#' tabindex='-1'>Link</a></div>
37+
<div role="presentation"><a href="#" tabindex="-1">Link</a></div>
3938
</template>
4039
```
4140

4241
```vue
4342
<template>
44-
<div role="presentation"><span>Some text</div></div>
43+
<div role="presentation"><span>Some text</span></div>
4544
</template>
4645
```
4746

@@ -55,24 +54,26 @@ Enforce that `role="presentation"` is not set on focusable elements or parent of
5554

5655
```vue
5756
<template>
58-
<button role="presentation">press me</button>
57+
<button role="presentation">press me</button>
5958
</template>
6059
```
60+
6161
```vue
6262
<template>
63-
<a href="#" role="presentation">press me</a>
63+
<a href="#" role="presentation">press me</a>
6464
</template>
6565
```
66+
6667
```vue
6768
<template>
68-
<div role="presentation">
69-
<button>press me</button>
70-
</div>
69+
<div role="presentation">
70+
<button>press me</button>
71+
</div>
7172
</template>
7273
```
74+
7375
```vue
7476
<template>
75-
<span tabindex='0' role="presentation"><em>Icon</em></span>
77+
<span tabindex="0" role="presentation"><em>Icon</em></span>
7678
</template>
7779
```
78-

‎src/rules/__tests__/no-aria-hidden-on-focusable.test.ts

+29-29
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import rule from '../no-aria-hidden-on-focusable';
1+
import rule from "../no-aria-hidden-on-focusable";
22
import makeRuleTester from "./makeRuleTester";
33

4-
makeRuleTester('no-presentation-role-or-aria-hidden-on-focusable', rule, {
5-
valid: [
6-
"<button>Submit</button>",
7-
"<div aria-hidden='true'><button tabindex='-1'>Some text</button></div>",
8-
"<div><button>Submit</button></div>",
9-
"<a href='#' tabindex='-1'>link</a>",
10-
"<button tabindex='-1' aria-hidden='true'>Press</button>",
11-
"<div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>"
12-
],
13-
invalid: [
14-
{
15-
code: "<div aria-hidden='true'><button>Submit</button></div>",
16-
errors: [{messageId: "default"}]
17-
},
18-
{
19-
code: "<button type='button' aria-hidden='true'>Submit</button>",
20-
errors: [{messageId: "default"}]
21-
},
22-
{
23-
code: "<a href='#' aria-hidden='true'>Link</a>",
24-
errors: [{messageId: "default"}]
25-
},
26-
{
27-
code: "<span tabindex='0' aria-hidden='true'><em>Icon</em></span>",
28-
errors: [{messageId: "default"}]
29-
}
30-
]
31-
})
4+
makeRuleTester("no-presentation-role-or-aria-hidden-on-focusable", rule, {
5+
valid: [
6+
"<button>Submit</button>",
7+
"<div aria-hidden='true'><button tabindex='-1'>Some text</button></div>",
8+
"<div><button>Submit</button></div>",
9+
"<a href='#' tabindex='-1'>link</a>",
10+
"<button tabindex='-1' aria-hidden='true'>Press</button>",
11+
"<div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>"
12+
],
13+
invalid: [
14+
{
15+
code: "<div aria-hidden='true'><button>Submit</button></div>",
16+
errors: [{ messageId: "default" }]
17+
},
18+
{
19+
code: "<button type='button' aria-hidden='true'>Submit</button>",
20+
errors: [{ messageId: "default" }]
21+
},
22+
{
23+
code: "<a href='#' aria-hidden='true'>Link</a>",
24+
errors: [{ messageId: "default" }]
25+
},
26+
{
27+
code: "<span tabindex='0' aria-hidden='true'><em>Icon</em></span>",
28+
errors: [{ messageId: "default" }]
29+
}
30+
]
31+
});

‎src/rules/__tests__/no-role-presentation-on-focusable.test.ts

+29-29
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import rule from '../no-role-presentation-on-focusable';
1+
import rule from "../no-role-presentation-on-focusable";
22
import makeRuleTester from "./makeRuleTester";
33

4-
makeRuleTester('no-role-presentation-role-on-focusable', rule, {
5-
valid: [
6-
"<button>Submit</button>",
7-
"<div role='presentation'><button tabindex='-1'>Some text</button></div>",
8-
"<div><button>Submit</button></div>",
9-
"<a href='#' tabindex='-1'>link</a>",
10-
"<button tabindex='-1' role='presentation'>Press</button>",
11-
"<div role='presentation'><a href='#' tabindex='-1'>Link</a></div>"
12-
],
13-
invalid: [
14-
{
15-
code: "<div role='presentation'><button>Submit</button></div>",
16-
errors: [{messageId: "default"}]
17-
},
18-
{
19-
code: "<button type='button' role='presentation'>Submit</button>",
20-
errors: [{messageId: "default"}]
21-
},
22-
{
23-
code: "<a href='#' role='presentation'>Link</a>",
24-
errors: [{messageId: "default"}]
25-
},
26-
{
27-
code: "<span tabindex='0' role='presentation'><em>Icon</em></span>",
28-
errors: [{messageId: "default"}]
29-
}
30-
]
31-
})
4+
makeRuleTester("no-role-presentation-role-on-focusable", rule, {
5+
valid: [
6+
"<button>Submit</button>",
7+
"<div role='presentation'><button tabindex='-1'>Some text</button></div>",
8+
"<div><button>Submit</button></div>",
9+
"<a href='#' tabindex='-1'>link</a>",
10+
"<button tabindex='-1' role='presentation'>Press</button>",
11+
"<div role='presentation'><a href='#' tabindex='-1'>Link</a></div>"
12+
],
13+
invalid: [
14+
{
15+
code: "<div role='presentation'><button>Submit</button></div>",
16+
errors: [{ messageId: "default" }]
17+
},
18+
{
19+
code: "<button type='button' role='presentation'>Submit</button>",
20+
errors: [{ messageId: "default" }]
21+
},
22+
{
23+
code: "<a href='#' role='presentation'>Link</a>",
24+
errors: [{ messageId: "default" }]
25+
},
26+
{
27+
code: "<span tabindex='0' role='presentation'><em>Icon</em></span>",
28+
errors: [{ messageId: "default" }]
29+
}
30+
]
31+
});

‎src/rules/no-aria-hidden-on-focusable.ts

+29-24
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,37 @@
11
import type { Rule } from "eslint";
22

3-
import { defineTemplateBodyVisitor, getElementAttributeValue, makeDocsURL } from "../utils";
3+
import {
4+
defineTemplateBodyVisitor,
5+
getElementAttributeValue,
6+
makeDocsURL
7+
} from "../utils";
48
import hasFocusableElements from "../utils/hasFocusableElement";
59

610
const rule: Rule.RuleModule = {
7-
meta: {
8-
type: "problem",
9-
docs: {
10-
url: makeDocsURL("no-aria-hidden-on-focusable")
11-
},
12-
messages: {
13-
default: "Focusable/Interactive elements must not have an aria-hidden attribute."
14-
},
15-
schema: []
11+
meta: {
12+
type: "problem",
13+
docs: {
14+
url: makeDocsURL("no-aria-hidden-on-focusable")
1615
},
17-
create(context) {
18-
return defineTemplateBodyVisitor(context, {
19-
VElement(node) {
20-
const hasAriaHidden = getElementAttributeValue(node, 'aria-hidden');
21-
if (hasAriaHidden && hasFocusableElements(node)) {
22-
context.report({
23-
node: node as any,
24-
messageId: 'default',
25-
});
26-
}
27-
},
28-
});
29-
}
30-
}
16+
messages: {
17+
default:
18+
"Focusable/Interactive elements must not have an aria-hidden attribute."
19+
},
20+
schema: []
21+
},
22+
create(context) {
23+
return defineTemplateBodyVisitor(context, {
24+
VElement(node) {
25+
const hasAriaHidden = getElementAttributeValue(node, "aria-hidden");
26+
if (hasAriaHidden && hasFocusableElements(node)) {
27+
context.report({
28+
node: node as any,
29+
messageId: "default"
30+
});
31+
}
32+
}
33+
});
34+
}
35+
};
3136

3237
export default rule;

0 commit comments

Comments
 (0)