eslint-plugin-primer-react 7.0.0-rc.903d3f3 → 7.0.0-rc.ffaa602

package/CHANGELOG.md

@@ -6,12 +6,18 @@
 
 - [#270](https://github.com/primer/eslint-plugin-primer-react/pull/270) [`17814a2`](https://github.com/primer/eslint-plugin-primer-react/commit/17814a2d77d752b6675e51124fe3c18671837a10) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Update a11y-use-next-tooltip to be a11y-use-accessible-tooltip and make the changes accordingly
 
+- [#316](https://github.com/primer/eslint-plugin-primer-react/pull/316) [`40016c8`](https://github.com/primer/eslint-plugin-primer-react/commit/40016c8db99b4045ed7474cead0b48eed05f5f64) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add `a11y-no-title-usage` that warns against using `title` in some components
+
 ### Minor Changes
 
 - [#266](https://github.com/primer/eslint-plugin-primer-react/pull/266) [`90134bc`](https://github.com/primer/eslint-plugin-primer-react/commit/90134bcee073c424e81c53e69632e1518798af93) Thanks [@keithamus](https://github.com/keithamus)! - Add enforce-css-module-default-import rule
 
 - [#258](https://github.com/primer/eslint-plugin-primer-react/pull/258) [`83f29f3`](https://github.com/primer/eslint-plugin-primer-react/commit/83f29f339999b9c21d95167bcc2680c1797cbab6) Thanks [@keithamus](https://github.com/keithamus)! - Add enforce-css-module-identifier-casing rule
 
+### Patch Changes
+
+- [#314](https://github.com/primer/eslint-plugin-primer-react/pull/314) [`63ef9fd`](https://github.com/primer/eslint-plugin-primer-react/commit/63ef9fdf02a9c4b80528644a96fd81e366bce187) Thanks [@khiga8](https://github.com/khiga8)! - fix: Link to should be allowed to have tooltip
+
 ## 6.1.6
 
 ### Patch Changes

package/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>
+  )
+}
+```