Merge branch 'main' into eslint-v9

Author: aprendendofelipe

.changeset/nine-mirrors-float.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': major
+---
+
+Add `a11y-no-title-usage` that warns against using `title` in some components

.changeset/soft-ravens-share.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+fix: Link to should be allowed to have tooltip

.github/workflows/release_tracking.yml

@@ -14,6 +14,6 @@ on:
 jobs:
   release-tracking:
     name: Release Tracking
-    uses: primer/.github/.github/workflows/release_tracking.yml@v2.1.1
+    uses: primer/.github/.github/workflows/release_tracking.yml@v2.2.0
     secrets:
       datadog_api_key: ${{ secrets.DATADOG_API_KEY }}

docs/rules/a11y-no-title-usage.md

@@ -0,0 +1,40 @@
+## Rule Details
+
+This rule aims to prevent the use of the `title` attribute with some components from `@primer/react`. The `title` attribute is not keyboard accessible, which results in accessibility issues. Instead, we should utilize alternatives that are accessible.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {RelativeTime} from '@primer/react'
+
+const App = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={false} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {RelativeTime} from '@primer/react'
+
+const App = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
+```
+
+The noTitle attribute is true by default, so it can be omitted.
+
+## With alternative tooltip
+
+If you want to still utilize a tooltip in a similar way to how the `title` attribute works, you can use the [Primer `Tooltip`](https://primer.style/components/tooltip/react/beta). If you use the `Tooltip` component, you must use it with an interactive element, such as with a button or a link.
+
+```jsx
+import {RelativeTime, Tooltip} from '@primer/react'
+
+const App = () => {
+  const date = new Date('2020-01-01T00:00:00Z')
+  return (
+    <Tooltip text={date.toString()}>
+      <Link href="#">
+        <RelativeTime date={date} noTitle={true} />
+      </Link>
+    </Tooltip>
+  )
+}
+```

src/configs/recommended.js

@@ -15,6 +15,7 @@ module.exports = {
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',
     'primer-react/a11y-explicit-heading': 'error',
+    'primer-react/a11y-no-title-usage': 'error',
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
     'primer-react/a11y-use-accessible-tooltip': 'error',

src/index.js

@@ -17,6 +17,7 @@ const plugin = {
     'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
     'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
+    'a11y-no-title-usage': require('./rules/a11y-no-title-usage'),
     '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-no-title-usage.test.js

@@ -0,0 +1,27 @@
+const rule = require('../a11y-no-title-usage')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-no-title-usage', rule, {
+  valid: [
+    `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />`,
+    `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle />`,
+    `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} />`,
+  ],
+  invalid: [
+    {
+      code: `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={false} />`,
+      output: `<RelativeTime date={new Date('2020-01-01T00:00:00Z')} />`,
+      errors: [{messageId: 'noTitleOnRelativeTime'}],
+    },
+  ],
+})

src/rules/__tests__/a11y-tooltip-interactive-trigger.test.js

@@ -69,6 +69,22 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Link>
     </Tooltip>
     `,
+    `
+    import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label="product" direction="e">
+      <Link to={productLink}>
+        Product
+      </Link>
+    </Tooltip>
+    `,
+    `
+    import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label="product" direction="e">
+      <Link to="https://github.com">
+        Product
+      </Link>
+    </Tooltip>
+    `,
   ],
   invalid: [
     {

src/rules/a11y-no-title-usage.js

@@ -0,0 +1,37 @@
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Disallow usage of title attribute on some components',
+      recommended: true,
+      url: url(module),
+    },
+    messages: {
+      noTitleOnRelativeTime: 'Avoid using the title attribute on RelativeTime.',
+    },
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(jsxNode) {
+        const title = getJSXOpeningElementAttribute(jsxNode, 'noTitle')
+
+        if (title && title.value && title.value.expression && title.value.expression.value !== true) {
+          context.report({
+            node: title,
+            messageId: 'noTitleOnRelativeTime',
+            fix(fixer) {
+              const start = title.range[0] - 1
+              const end = title.range[1]
+              return fixer.removeRange([start, end])
+            },
+          })
+        }
+      },
+    }
+  },
+}

src/rules/a11y-tooltip-interactive-trigger.js

@@ -23,16 +23,22 @@ const isAnchorTag = el => {
 }
 
 const isJSXValue = attributes => {
-  const node = attributes.find(attribute => propName(attribute) === 'href')
+  const node = attributes.find(attribute => propName(attribute) === 'href' || propName(attribute))
   const isJSXExpression = node.value.type === 'JSXExpressionContainer' && node && typeof getPropValue(node) === 'string'
 
   return isJSXExpression
 }
 
 const isInteractiveAnchor = child => {
   const hasHref = getJSXOpeningElementAttribute(child.openingElement, 'href')
-  if (!hasHref) return false
-  const href = getJSXOpeningElementAttribute(child.openingElement, 'href').value.value
+  const hasTo = getJSXOpeningElementAttribute(child.openingElement, 'to')
+
+  if (!hasHref && !hasTo) return false
+
+  const href = hasHref
+    ? getJSXOpeningElementAttribute(child.openingElement, 'href').value.value
+    : getJSXOpeningElementAttribute(child.openingElement, 'to').value.value
+
   const hasJSXValue = isJSXValue(child.openingElement.attributes)
   const isAnchorInteractive = (typeof href === 'string' && href !== '') || hasJSXValue