eslint-plugin-primer-react 5.2.1 → 5.3.0-rc.e240e9d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "5.2.1",
+  "version": "5.3.0-rc.e240e9d",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/configs/recommended.js

@@ -16,6 +16,7 @@ module.exports = {
     'primer-react/new-color-css-vars': 'error',
     'primer-react/a11y-explicit-heading': 'error',
     'primer-react/no-deprecated-props': 'warn',
+    'primer-react/a11y-remove-disable-tooltip': 'error',
   },
   settings: {
     github: {

package/src/index.js

@@ -8,6 +8,7 @@ module.exports = {
     'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
     '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'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/a11y-remove-disable-tooltip.test.js

@@ -0,0 +1,50 @@
+'use strict'
+
+const {RuleTester} = require('eslint')
+const rule = require('../a11y-remove-disable-tooltip')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-remove-disable-tooltip', rule, {
+  valid: [
+    `import {IconButton} from '@primer/react';
+    <IconButton icon={SearchIcon} aria-label="Search" />`,
+  ],
+  invalid: [
+    {
+      code: `<IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip />`,
+      output: `<IconButton icon={SearchIcon} aria-label="Search" />`,
+      errors: [
+        {
+          messageId: 'removeDisableTooltipProp',
+        },
+      ],
+    },
+    {
+      code: `<IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip={true} />`,
+      output: `<IconButton icon={SearchIcon} aria-label="Search" />`,
+      errors: [
+        {
+          messageId: 'removeDisableTooltipProp',
+        },
+      ],
+    },
+    {
+      code: `<IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip={false} />`,
+      output: `<IconButton icon={SearchIcon} aria-label="Search" />`,
+      errors: [
+        {
+          messageId: 'removeDisableTooltipProp',
+        },
+      ],
+    },
+  ],
+})

package/src/rules/a11y-remove-disable-tooltip.js

@@ -0,0 +1,47 @@
+'use strict'
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description:
+        'Icon buttons should have tooltip by default. Please remove `unsafeDisableTooltip` prop from `IconButton` component to enable the tooltip and help making icon button more accessible.',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      removeDisableTooltipProp:
+        'Please remove `unsafeDisableTooltip` prop from `IconButton` component to enable the tooltip and help make icon button more accessible.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const openingElName = getJSXOpeningElementName(node)
+        if (openingElName !== 'IconButton') {
+          return
+        }
+        const unsafeDisableTooltip = getJSXOpeningElementAttribute(node, 'unsafeDisableTooltip')
+        if (unsafeDisableTooltip !== undefined) {
+          context.report({
+            node,
+            messageId: 'removeDisableTooltipProp',
+            fix(fixer) {
+              const start = unsafeDisableTooltip.range[0]
+              const end = unsafeDisableTooltip.range[1]
+              return [
+                fixer.removeRange([start - 1, end]), // remove the space before unsafeDisableTooltip as well
+              ]
+            },
+          })
+        }
+      },
+    }
+  },
+}