eslint-plugin-primer-react 3.0.0 → 4.0.0-rc.2ea2bf7

package/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 99
+    allow: 
+      - dependency-name: "eslint-plugin-github"
+      - dependency-name: "eslint-plugin-jsx-a11y"

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # eslint-plugin-primer-react
 
+## 4.0.0
+
+### Major Changes
+
+- [#51](https://github.com/primer/eslint-plugin-primer-react/pull/51) [`a65aa32`](https://github.com/primer/eslint-plugin-primer-react/commit/a65aa32c612c7fe952ec47bb3d926cf8adae9fab) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Add `a11y-tooltip-interactive-trigger`
+
+* [#66](https://github.com/primer/eslint-plugin-primer-react/pull/66) [`d1df609`](https://github.com/primer/eslint-plugin-primer-react/commit/d1df609b260505ee9dea1740bc96a3187355d727) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add `a11y-explicit-heading` rule
+
+### Minor Changes
+
+- [#67](https://github.com/primer/eslint-plugin-primer-react/pull/67) [`4dfdb47`](https://github.com/primer/eslint-plugin-primer-react/commit/4dfdb47b40e7f187573b8203830541b86cc7a953) Thanks [@TylerJDev](https://github.com/TylerJDev)! - \* Updates component mapping, adds `components.js`
+  - Bumps `eslint-plugin-github` and `eslint-plugin-jsx-a11y`
+  - Fixes bug in `a11y-explicit-heading` when using spread props, or variable for `as`
+
 ## 3.0.0
 
 ### Major Changes

package/README.md

@@ -32,3 +32,5 @@ ESLint rules for Primer React
 - [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
 - [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
 - [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
+- [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
+- [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)

package/docs/rules/a11y-explicit-heading.md

@@ -0,0 +1,37 @@
+## Require explicit heading level on `<Heading>` component
+
+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. 
+
+## Rule Details
+
+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.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {Heading} from '@primer/react'
+
+<Heading>Heading without explicit heading level</Heading>
+```
+
+`as` must only be for headings (`h1`-`h6`)
+
+```jsx
+import {Heading} from '@primer/react'
+
+<Heading as="span">Heading component used as "span"</Heading>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Heading} from '@primer/react';
+
+<Heading as="h2">Heading level 2</Heading>
+```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `a11y-explicit-heading` rule will only check for `<Heading>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.

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

@@ -0,0 +1,41 @@
+## Rule Details
+
+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).
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/a11y-tooltip-interactive-trigger: "error" */
+import {Tooltip} from '@primer/react'
+
+const App = () => (
+  <Tooltip text="Tooltip text">
+    <div>Tooltip trigger</div>
+  </Tooltip>
+)
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/a11y-tooltip-interactive-trigger: "error" */
+import {Tooltip, Button} from '@primer/react'
+
+const App = () => (
+  <Tooltip text="Supplementary text" type="description">
+    <Button
+      onClick={() => {
+        /* do something */
+      }}
+    >
+      Save
+    </Button>
+  </Tooltip>
+)
+```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `a11y-tooltip-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.