Add new rule a11y-no-title-usage

Author: TylerJDev

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

@@ -0,0 +1,21 @@
+## 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'
+
+<RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={false} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {RelativeTime} from '@primer/react'
+
+<RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
+```
+
+The `noTitle` attribute can be omitted because its default value is `true` internally.

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

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

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

@@ -0,0 +1,37 @@
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+
+module.exports = {
+  meta: {
+    type: 'error', // TODO: Confirm the type
+    docs: {
+      description: 'Disallow usage of title attribute on some components',
+      recommended: true,
+      url: null, // TODO: Add URL
+    },
+    messages: {
+      noTitleOnRelativeTime: 'Avoid using the title attribute on RelativeTime.',
+    },
+    fixable: 'code',
+    schema: [],
+  },
+
+  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 // Accounts for whitespace
+              const end = title.range[1]
+              return fixer.removeRange([start, end])
+            },
+          })
+        }
+      },
+    }
+  },
+}