New rule to flag invalid aria-label format

Author: khiga8

lib/rules/a11y-aria-label-is-readable.js

@@ -0,0 +1,31 @@
+const {getProp, getPropValue} = require('jsx-ast-utils')
+
+module.exports = {
+  meta: {
+    docs: {
+      description: '[aria-label] text should be formatted as you would visible text, in a human-readable format.',
+      url: require('../url')(module),
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement: node => {
+        const prop = getProp(node.attributes, 'aria-label')
+        if(!prop) return 
+
+        const propValue = prop.value;
+        if (propValue.type !== 'Literal') return
+        
+        const ariaLabel = propValue.value
+        if (ariaLabel.match(/^[a-z]+[a-z\-\.\s]*$/)) {
+          context.report({
+            node,
+            message: '[aria-label] text should be formatted the same as you would visible text. Use sentence case and make sure you are not using hyphens.',
+          })
+        }
+      },
+    }
+  },
+}

tests/a11y-aria-label-is-readable.js

@@ -0,0 +1,31 @@
+const rule = require('../lib/rules/a11y-aria-label-is-readable')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+const errorMessage =
+  '[aria-label] text should be formatted the same as you would visible text.'
+
+ruleTester.run('a11y-aria-label-is-readable', rule, {
+  valid: [
+    {code: "<a aria-labelledby='someId' href='#'>Read more</a>;"},
+    {code: "<a aria-label={someName} href='#'>Read more</a>;"},
+    {code: "<a aria-label='This is a label'></a>;"},
+    {
+      code: '<Link as="button" href="#">Read more</Link>',
+    },
+  ],
+  invalid: [
+    {code: "<a aria-label='close modal'></a>;", errors: [{message: errorMessage}]},
+    {code: "<a aria-label='submit'></a>;", errors: [{message: errorMessage}]},
+    {code: "<a aria-label='this-is-not-an-id'></a>;", errors: [{message: errorMessage}]},
+  ],
+})