Update a11y-use-next-tooltip to be a11y-use-accessible-tooltip and make the changes accordingly

.changeset/gorgeous-frogs-cover.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Update a11y-use-next-tooltip to be a11y-use-accessible-tooltip and make the changes accordingly

README.md

@@ -39,4 +39,4 @@ ESLint rules for Primer React
 - [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
 - [a11y-link-in-text-block](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-link-in-text-block.md)
 - [a11y-remove-disable-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-remove-disable-tooltip.md)
-- [a11y-use-next-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-use-next-tooltip.md)
+- [a11y-use-accessible-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-use-accessible-tooltip.md)

docs/rules/a11y-use-next-tooltip.md → docs/rules/a11y-use-accessible-tooltip.md

@@ -6,22 +6,21 @@ This rule recommends using the tooltip that is imported from `@primer/react/next
 👎 Examples of **incorrect** code for this rule:
 
 ```tsx
-import {Tooltip} from '@primer/react'
+import {Tooltip} from '@primer/react/deprecated'
 ```
 
 👍 Examples of **correct** code for this rule:
 
 ```tsx
-import {Tooltip} from '@primer/react/next'
+import {Tooltip} from '@primer/react'
 ```
 
 ## Icon buttons and tooltips
 
 Even though the below code is perfectly valid, since icon buttons now come with tooltips by default, it is not required to explicitly use the Tooltip component on icon buttons.
 
 ```jsx
-import {IconButton} from '@primer/react'
-import {Tooltip} from '@primer/react/next'
+import {IconButton, Tooltip} from '@primer/react'
 
 function ExampleComponent() {
   return (

src/configs/recommended.js

@@ -17,7 +17,7 @@ module.exports = {
     'primer-react/a11y-explicit-heading': 'error',
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
-    'primer-react/a11y-use-next-tooltip': 'error',
+    'primer-react/a11y-use-accessible-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
     'primer-react/prefer-action-list-item-onselect': 'error',
     'primer-react/enforce-css-module-identifier-casing': 'error',

src/index.js

@@ -9,7 +9,7 @@ module.exports = {
     'no-deprecated-props': require('./rules/no-deprecated-props'),
     'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
-    'a11y-use-next-tooltip': require('./rules/a11y-use-next-tooltip'),
+    'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),

src/rules/__tests__/a11y-use-accessible-tooltip.test.js

@@ -0,0 +1,59 @@
+const rule = require('../a11y-use-accessible-tooltip')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-use-accessible-tooltip', rule, {
+  valid: [`import {Tooltip} from '@primer/react';`],
+  invalid: [
+    // Single import from deprecated
+    {
+      code: `import {Tooltip} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated
+    {
+      code: `import {Tooltip, Button} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Button} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated
+    {
+      code: `import {Button, Tooltip, Stack} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Button, Stack} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';`,
+    },
+    // Single import from deprecated with an existing import from @primer/react
+    {
+      code: `import {Tooltip} from '@primer/react/deprecated';import {ActionList, ActionMenu} from '@primer/react';`,
+      errors: [{messageId: 'useAccessibleTooltip', line: 1}],
+      output: `import {ActionList, ActionMenu, Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated with an existing import from @primer/react
+    {
+      code: `import {Dialog, Tooltip} from '@primer/react/deprecated';import {ActionList, ActionMenu} from '@primer/react';`,
+      errors: [{messageId: 'useAccessibleTooltip', line: 1}],
+      output: `import {Dialog} from '@primer/react/deprecated';import {ActionList, ActionMenu, Tooltip} from '@primer/react';`,
+    },
+    {
+      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react/deprecated';\n<Tooltip aria-label="tooltip text" noDelay={true} wrap={true} align="left"><Button>Button</Button></Tooltip>`,
+      errors: [
+        {messageId: 'useAccessibleTooltip', line: 1},
+        {messageId: 'useTextProp', line: 2},
+        {messageId: 'noDelayRemoved', line: 2},
+        {messageId: 'wrapRemoved', line: 2},
+        {messageId: 'alignRemoved', line: 2},
+      ],
+      output: `import {ActionList, ActionMenu, Button} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';\n<Tooltip text="tooltip text"   ><Button>Button</Button></Tooltip>`,
+    },
+  ],
+})

src/rules/a11y-use-accessible-tooltip.js

@@ -0,0 +1,153 @@
+'use strict'
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'recommends the use of @primer/react Tooltip component',
+      category: 'Best Practices',
+      recommended: true,
+      url: url(module),
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      useAccessibleTooltip: 'Please use @primer/react Tooltip component that has accessibility improvements',
+      useTextProp: 'Please use the text prop instead of aria-label',
+      noDelayRemoved: 'noDelay prop is removed. Tooltip now has no delay by default',
+      wrapRemoved: 'wrap prop is removed. Tooltip now wraps by default',
+      alignRemoved: 'align prop is removed. Please use the direction prop instead.',
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== '@primer/react/deprecated') {
+          return
+        }
+        const hasTooltip = node.specifiers.some(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        if (!hasTooltip) {
+          return
+        }
+
+        const hasOtherImports = node.specifiers.length > 1
+
+        const sourceCode = context.getSourceCode()
+        // Checking to see if there is an existing root (@primer/react) import
+        const rootImport = sourceCode.ast.body.filter(statement => {
+          return statement.type === 'ImportDeclaration' && statement.source.value === '@primer/react'
+        })
+
+        const tooltipSpecifier = node.specifiers.find(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        const hasRootImport = rootImport.length >= 1
+
+        context.report({
+          node,
+          messageId: 'useAccessibleTooltip',
+          fix(fixer) {
+            const fixes = []
+            if (!hasOtherImports) {
+              // If Tooltip is the only import and no existing @primer/react import, replace the whole import statement
+              if (!hasRootImport) fixes.push(fixer.replaceText(node.source, `'@primer/react'`))
+              if (hasRootImport) {
+                //  remove the entire import statement
+                fixes.push(fixer.remove(node))
+                // find the last specifier in the existing @primer/react import and insert Tooltip after that
+                const rootImport = sourceCode.ast.body.find(statement => {
+                  return statement.type === 'ImportDeclaration' && statement.source.value === '@primer/react'
+                })
+                const lastSpecifier = rootImport.specifiers[rootImport.specifiers.length - 1]
+                fixes.push(fixer.insertTextAfter(lastSpecifier, `, Tooltip`))
+              }
+            } else {
+              // There are other imports from the deprecated bundle but no existing @primer/react import, so remove the Tooltip import and add a new import statement with the correct path.
+              const previousToken = sourceCode.getTokenBefore(tooltipSpecifier)
+              const nextToken = sourceCode.getTokenAfter(tooltipSpecifier)
+              const hasTrailingComma = nextToken && nextToken.value === ','
+              const hasLeadingComma = previousToken && previousToken.value === ','
+
+              let rangeToRemove
+
+              if (hasTrailingComma) {
+                rangeToRemove = [tooltipSpecifier.range[0], nextToken.range[1] + 1]
+              } else if (hasLeadingComma) {
+                rangeToRemove = [previousToken.range[0], tooltipSpecifier.range[1]]
+              } else {
+                rangeToRemove = [tooltipSpecifier.range[0], tooltipSpecifier.range[1]]
+              }
+              // Remove Tooltip from the import statement
+              fixes.push(fixer.removeRange(rangeToRemove))
+
+              if (!hasRootImport) {
+                fixes.push(fixer.insertTextAfter(node, `\nimport {Tooltip} from '@primer/react';`))
+              } else {
+                // find the last specifier in the existing @primer/react import and insert Tooltip after that
+                const rootImport = sourceCode.ast.body.find(statement => {
+                  return statement.type === 'ImportDeclaration' && statement.source.value === '@primer/react'
+                })
+                const lastSpecifier = rootImport.specifiers[rootImport.specifiers.length - 1]
+                fixes.push(fixer.insertTextAfter(lastSpecifier, `, Tooltip`))
+              }
+            }
+            return fixes
+          },
+        })
+      },
+      JSXOpeningElement(node) {
+        const openingElName = getJSXOpeningElementName(node)
+        if (openingElName !== 'Tooltip') {
+          return
+        }
+        const ariaLabel = getJSXOpeningElementAttribute(node, 'aria-label')
+        if (ariaLabel !== undefined) {
+          context.report({
+            node,
+            messageId: 'useTextProp',
+            fix(fixer) {
+              return fixer.replaceText(ariaLabel.name, 'text')
+            },
+          })
+        }
+        const noDelay = getJSXOpeningElementAttribute(node, 'noDelay')
+        if (noDelay !== undefined) {
+          context.report({
+            node,
+            messageId: 'noDelayRemoved',
+            fix(fixer) {
+              return fixer.remove(noDelay)
+            },
+          })
+        }
+        const wrap = getJSXOpeningElementAttribute(node, 'wrap')
+        if (wrap !== undefined) {
+          context.report({
+            node,
+            messageId: 'wrapRemoved',
+            fix(fixer) {
+              return fixer.remove(wrap)
+            },
+          })
+        }
+        const align = getJSXOpeningElementAttribute(node, 'align')
+        if (align !== undefined) {
+          context.report({
+            node,
+            messageId: 'alignRemoved',
+            fix(fixer) {
+              return fixer.remove(align)
+            },
+          })
+        }
+      },
+    }
+  },
+}