You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Require explicit heading level on `<Heading>` component
2
+
3
+
The `Heading` component does not require you to use `as` to specify the heading level, as it will default to an `h2` if one isn't specified. This may lead to inaccessible usage if the default is out of order in the existing heading hierarchy.
4
+
5
+
## Rule Details
6
+
7
+
This rule enforces using `as` on the `<Heading>` component to specify a heading level (`h1`-`h6`). In addition, it enforces `as` usage to only be used for headings.
8
+
9
+
👎 Examples of **incorrect** code for this rule
10
+
11
+
```jsx
12
+
import {Heading} from'@primer/react'
13
+
14
+
<Heading>Heading without explicit heading level</Heading>
15
+
```
16
+
17
+
`as` must only be for headings (`h1`-`h6`)
18
+
19
+
```jsx
20
+
import {Heading} from'@primer/react'
21
+
22
+
<Heading as="span">Heading component used as "span"</Heading>
23
+
```
24
+
25
+
👍 Examples of **correct** code for this rule:
26
+
27
+
```jsx
28
+
import {Heading} from'@primer/react';
29
+
30
+
<Heading as="h2">Heading level 2</Heading>
31
+
```
32
+
33
+
## Options
34
+
35
+
-`skipImportCheck` (default: `false`)
36
+
37
+
By default, the `explicit-heading` rule will only check for `<Heading>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.
0 commit comments