Skip to content

Commit a65aa32

Browse files
broccolinisoupbroccolinisoup
committed
Add Primer components, filter out non-jsx el, add docs
1 parent d605ecf commit a65aa32

5 files changed

+248
-101
lines changed

‎.changeset/fair-panthers-raise.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-primer-react': major
3+
---
4+
5+
Add `a11y-tooltip-non-interactive-trigger`

‎docs/rules/a11y-tooltip-non-interactive-trigger.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!-- Write a readme for the non interactive trigger rule -->
2+
3+
## Rule Details
4+
5+
This rule enforces to use interactive elements as tooltip triggers. Interactive elements can be Primer `Button`, `IconButton` and `Link` components or native elements like `button`, `a` with an `href` attribute, `select`, `textarea`, `summary` and `input` (that is not a `hidden` type).
6+
7+
👎 Examples of **incorrect** code for this rule:
8+
9+
```jsx
10+
/* eslint primer-react/a11y-tooltip-non-interactive-trigger: "error" */
11+
import {Tooltip} from '@primer/react'
12+
13+
const App = () => (
14+
<Tooltip text="Tooltip text">
15+
<div>Tooltip trigger</div>
16+
</Tooltip>
17+
)
18+
```
19+
20+
👍 Examples of **correct** code for this rule:
21+
22+
```jsx
23+
/* eslint primer-react/a11y-tooltip-non-interactive-trigger: "error" */
24+
import {Tooltip, Button} from '@primer/react'
25+
26+
const App = () => (
27+
<Tooltip text="Supplementary text" type="description">
28+
<Button
29+
onClick={() => {
30+
/* do something */
31+
}}
32+
>
33+
Save
34+
</Button>
35+
</Tooltip>
36+
)
37+
```
38+
39+
## Options
40+
41+
- `skipImportCheck` (default: `false`)
42+
43+
By default, the `a11y-tooltip-non-interactive-trigger` rule will only check for interactive elements in components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is used for internal linting in the [primer/react](https://github.com/prime/react) repository.

‎src/rules/__tests__/a11y-tooltip-non-interactive-trigger.test.js

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
const rule = require('../a11y-tooltip-non-interactive-trigger')
2+
const {RuleTester} = require('eslint')
3+
4+
const ruleTester = new RuleTester({
5+
parserOptions: {
6+
ecmaVersion: 'latest',
7+
sourceType: 'module',
8+
ecmaFeatures: {
9+
jsx: true
10+
}
11+
}
12+
})
13+
14+
ruleTester.run('non-interactive-tooltip-trigger', rule, {
15+
valid: [
16+
`import {Tooltip, Button} from '@primer/react';
17+
<Tooltip aria-label="Filter vegetarian options" direction="e">
18+
<Button>🥦</Button>
19+
</Tooltip>`,
20+
21+
`import {Tooltip, Button} from '@primer/react';
22+
<Tooltip aria-label="Supplementary text" direction="e">
23+
<Button>Save</Button>
24+
</Tooltip>`,
25+
26+
`import {Tooltip, IconButton} from '@primer/react';
27+
import {SearchIcon} from '@primer/octicons-react';
28+
<Tooltip aria-label="Supplementary text" direction="e">
29+
<IconButton icon={SearchIcon} aria-label="Search" />
30+
</Tooltip>`,
31+
32+
`import {Tooltip, Button} from '@primer/react';
33+
<Tooltip aria-label="Supplementary text" direction="e">
34+
<div>
35+
<Button>Save</Button>
36+
</div>
37+
</Tooltip>`,
38+
39+
`import {Tooltip, Button} from '@primer/react';
40+
<Tooltip aria-label="Supplementary text" direction="e">
41+
<div>
42+
<a href="https://gthub.com">Save</a>
43+
</div>
44+
</Tooltip>`,
45+
46+
`import {Tooltip} from '@primer/react';
47+
<Tooltip aria-label="Supplementary text" direction="e">
48+
<a href="https://github.com">see commit message</a>
49+
</Tooltip>`,
50+
51+
`import {Tooltip, Link} from '@primer/react';
52+
<Tooltip aria-label="Supplementary text" direction="e">
53+
<Link href="https://github.com">Link</Link>
54+
</Tooltip>`
55+
],
56+
invalid: [
57+
{
58+
code: `import {Tooltip} from '@primer/react';<Tooltip type="description" text="supportive text" direction="e"><button>button1</button><button>button2</button></Tooltip>
59+
`,
60+
errors: [
61+
{
62+
messageId: 'singleChild'
63+
}
64+
]
65+
},
66+
{
67+
code: `
68+
import {Tooltip} from '@primer/react';
69+
<Tooltip aria-label="Filter vegetarian options" direction="e">
70+
<span>non interactive element</span>
71+
</Tooltip>
72+
`,
73+
errors: [
74+
{
75+
messageId: 'nonInteractiveTrigger'
76+
}
77+
]
78+
},
79+
{
80+
code: `
81+
import {Tooltip, Button} from '@primer/react';
82+
<Tooltip aria-label="Supplementary text" direction="e">
83+
<h1>Save</h1>
84+
</Tooltip>`,
85+
errors: [
86+
{
87+
messageId: 'nonInteractiveTrigger'
88+
}
89+
]
90+
},
91+
{
92+
code: `
93+
import {Tooltip} from '@primer/react';
94+
<Tooltip aria-label="Supplementary text" direction="e">
95+
<a>see commit message</a>
96+
</Tooltip>`,
97+
errors: [
98+
{
99+
messageId: 'anchorTagWithoutHref'
100+
}
101+
]
102+
},
103+
{
104+
code: `
105+
import {Tooltip, Link} from '@primer/react';
106+
<Tooltip aria-label="Supplementary text" direction="e">
107+
<Link>see commit message</Link>
108+
</Tooltip>`,
109+
errors: [
110+
{
111+
messageId: 'anchorTagWithoutHref'
112+
}
113+
]
114+
},
115+
{
116+
code: `
117+
import {Tooltip} from '@primer/react';
118+
<Tooltip aria-label="Supplementary text" direction="e">
119+
<input type="hidden" />
120+
</Tooltip>`,
121+
errors: [
122+
{
123+
messageId: 'hiddenInput'
124+
}
125+
]
126+
},
127+
{
128+
code: `
129+
import {Tooltip, TextInput} from '@primer/react';
130+
<Tooltip aria-label="Supplementary text" direction="e">
131+
<TextInput type="hidden" aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
132+
</Tooltip>`,
133+
errors: [
134+
{
135+
messageId: 'hiddenInput'
136+
}
137+
]
138+
},
139+
{
140+
code: `
141+
import {Tooltip, Button} from '@primer/react';
142+
<Tooltip aria-label="Supplementary text" direction="e">
143+
<header>
144+
<span>Save</span>
145+
</header>
146+
</Tooltip>`,
147+
errors: [
148+
{
149+
messageId: 'nonInteractiveTrigger'
150+
}
151+
]
152+
},
153+
{
154+
code: `import {Tooltip, Button} from '@primer/react';
155+
<Tooltip aria-label="Supplementary text" direction="e">
156+
<h1>
157+
<a>Save</a>
158+
</h1>
159+
</Tooltip>`,
160+
errors: [
161+
{
162+
messageId: 'anchorTagWithoutHref'
163+
}
164+
]
165+
}
166+
]
167+
})

‎src/rules/__tests__/non-interactive-tooltip-trigger.test.js

-82
This file was deleted.

0 commit comments

Comments
 (0)