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

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # eslint-plugin-primer-react
 
+## 5.3.0
+
+### Minor Changes
+
+- [#185](https://github.com/primer/eslint-plugin-primer-react/pull/185) [`fea642d`](https://github.com/primer/eslint-plugin-primer-react/commit/fea642d79982e36729262ec55d6e291780ca6160) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Add a rule that warns against removing `unsafeDisableTooltip` prop
+
 ## 5.2.1
 
 ### Patch Changes
 
+- [#195](https://github.com/primer/eslint-plugin-primer-react/pull/195) [`ccc2e99`](https://github.com/primer/eslint-plugin-primer-react/commit/ccc2e995a3f46bb4842468188b91c0bd641da390) Thanks [@khiga8](https://github.com/khiga8)! - Clean up docs for link lint rule
+
 - [#193](https://github.com/primer/eslint-plugin-primer-react/pull/193) [`5fc19f6`](https://github.com/primer/eslint-plugin-primer-react/commit/5fc19f63a4916add7b3c335ac661119c50af17af) Thanks [@khiga8](https://github.com/khiga8)! - Update link lint rule to skip Link with className
 
 ## 5.2.0

package/README.md

@@ -33,7 +33,9 @@ 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-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)
 - [new-css-color-vars](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/new-css-color-vars.md)
 - [no-deprecated-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-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)
+- [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)

package/docs/rules/a11y-link-in-text-block.md

@@ -1,22 +1,25 @@
-## Require `inline` prop on `<Link>` component inside a text block
+# EXPERIMENTAL: Require `inline` prop on `<Link>` in text block
 
-The `Link` component should have the `inline` prop when it is used inside of a text block.
+This is an experimental rule. If you suspect any false positives reported by this rule, please file an issue so we can make this rule better.
 
 ## Rule Details
 
-This rule enforces setting `inline` on the `<Link>` component when a `<Link>` is detected inside of a text block without distiguishable styling.
+The `Link` component should have the `inline` prop when it is used within a text block and has no styles (aside from color) to distinguish itself from surrounding plain text.
 
-The lint rule will essentially flag any `<Link>` without the `inline` property (equal to `true`) detected with string nodes on either side.
+Related: [WCAG 1.4.1 Use of Color issues](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
 
-This rule will not catch all instances of link in text block due to the limitations of static analysis, so be sure to also have in-browser checks in place such as the [link-in-text-block Axe rule](https://dequeuniversity.com/rules/axe/4.9/link-in-text-block) for additional coverage.
+The lint rule will flag any `<Link>` without the `inline` property (equal to `true`) detected with string nodes on either side.
 
-The edge cases that the linter skips to avoid false positives will include:
+There are certain edge cases that the linter skips to avoid false positives including:
 
+- `<Link className="...">` because there may be distinguishing styles applied.
 - `<Link sx={{fontWeight:...}}>` or `<Link sx={{fontFamily:...}}>` because these technically may provide sufficient distinguishing styling.
 - `<Link>` where the only adjacent text is a period, since that can't really be considered a text block.
 - `<Link>` where the children is a JSX component, rather than a string literal, because then it might be an icon link rather than a text link.
 - `<Link>` that are nested inside of headings as these have often been breadcrumbs.
 
+This rule will not catch all instances of link in text block due to the limitations of static analysis, so be sure to also have in-browser checks in place such as the [link-in-text-block Axe rule](https://dequeuniversity.com/rules/axe/4.9/link-in-text-block) for additional coverage.
+
 👎 Examples of **incorrect** code for this rule
 
 ```jsx
@@ -93,8 +96,18 @@ function ExampleComponent() {
 }
 ```
 
+This rule will skip `Link`s with a `className`.
+
+```jsx
+function ExampleComponent() {
+  return (
+   Learn more at <Link className={styles.someDistinguishingStyle}>GitHub</Link>
+  )
+}
+```
+
 ## 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`.
+By default, the `a11y-link-in-text-block` rule will only check for `<Link>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.

package/docs/rules/a11y-remove-disable-tooltip.md

@@ -0,0 +1,25 @@
+## Rule Details
+
+This rule enforces to remove the `unsafeDisableTooltip` from `IconButton` component so that they have a tooltip by default. `unsafeDisableTooltip` prop is created for an incremental migration and should be removed once all icon buttons have a tooltip.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+import {IconButton} from '@primer/react'
+
+const App = () => (
+  <IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip />
+  // OR
+  <IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip={true} />
+  // OR
+  <IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip={false} /> // This is incorrect because it should be removed
+)
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {IconButton} from '@primer/react'
+
+const App = () => <IconButton icon={SearchIcon} aria-label="Search" />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "5.2.1-rc.61b0e36",
+  "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-link-in-text-block.js

@@ -4,6 +4,9 @@ const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-elemen
 
 module.exports = {
   meta: {
+    docs: {
+      url: require('../url')(module),
+    },
     type: 'problem',
     schema: [
       {
@@ -15,7 +18,8 @@ module.exports = {
       },
     ],
     messages: {
-      linkInTextBlock: '<Link>s that are used within a text block should have the inline prop.',
+      linkInTextBlock:
+        'Links should have the inline prop if it appear in a text block and only uses color to distinguish itself from surrounding text.',
     },
   },
   create(context) {

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
+              ]
+            },
+          })
+        }
+      },
+    }
+  },
+}