Add an eslint rule for checking interactivity of tooltip trigger

[broccolinisoup]

Adding an eslint rule to check if the Tooltip component includes an interactive trigger.

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:

/* eslint primer-react/a11y-tooltip-non-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:

/* eslint primer-react/a11y-tooltip-non-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-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 repository.

[changeset-bot]

🦋 Changeset detected

Latest commit: 33b5969

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-primer-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[joshblack]

So cool! 🥳 Loving this plugin. Left a couple of comments and questions, let me know what you think 👀

[joshblack]

So good! 🔥

[broccolinisoup]

@joshblack I realised that I forgot to add some Primer components 🙈 Like Link and TextInput, so I added them along with docs. I also renamed the file to have prefix a11y-tooltip for accessibility team to use filter the disabled eslint rules for accessibility score cards. All in this commit Let me know if you have any feedback! Thanks so much again for the review 🙏🏻

[colebemis]

@broccolinisoup Can you update the following files to include this new rule:

• https://github.com/primer/eslint-plugin-primer-react/blob/main/src/configs/recommended.js
• https://github.com/primer/eslint-plugin-primer-react/blob/main/src/index.js
• https://github.com/primer/eslint-plugin-primer-react/blob/main/README.md#rules

[colebemis]

Looks great, @broccolinisoup! Just left one naming suggestion.

[colebemis]

Looks great, @broccolinisoup! Just left one naming suggestion.