add test and add to react config

Author: kendallgassner

lib/configs/react.js

@@ -10,6 +10,7 @@ module.exports = {
   rules: {
     'jsx-a11y/role-supports-aria-props': 'off', // Override with github/role-supports-aria-props until https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/910 is resolved
     'github/a11y-aria-label-is-well-formatted': 'error',
+    'github/a11y-no-visually-hidden-interactive-element': 'error',
     'github/role-supports-aria-props': 'error',
     'jsx-a11y/no-aria-hidden-on-focusable': 'error',
     'jsx-a11y/no-autofocus': 'off',

lib/rules/a11y-no-visually-hidden-interactive-element.js

@@ -38,7 +38,6 @@ const checkIfVisuallyHiddenAndInteractive = (context, options, node, isParentVis
     const isVisuallyHiddenElement = node.openingElement.name.name === componentName
     const hasSROnlyClass = typeof classes !== 'undefined' && classes.includes(className)
     let isHidden = false
-
     if (hasSROnlyClass || isVisuallyHiddenElement || !!isParentVisuallyHidden) {
       if (checkIfInteractiveElement(context, htmlPropName, node)) {
         return true

tests/a11y-no-visually-hidden-interactive-element.js

@@ -25,6 +25,31 @@ ruleTester.run('a11y-no-visually-hidden-interactive-element', rule, {
     {code: "<input className='sr-only' />"},
     {code: "<a className='other show-on-focus'>skip to main content</a>"},
     {code: '<button>Submit</button>'},
+    {
+      code: "<button className='sr-only'>Submit</button>",
+      options: [
+        {
+          className: 'visually-hidden',
+        },
+      ],
+    },
+    {
+      code: "<VisuallyHidden as='button'>Submit</VisuallyHidden>",
+      options: [
+        {
+          componentName: 'Hidden',
+        },
+      ],
+      errors: [{message: errorMessage}],
+    },
+    {
+      code: "<VisuallyHidden as='button'>Submit</VisuallyHidden>",
+      options: [
+        {
+          htmlPropName: 'html',
+        },
+      ],
+    },
   ],
   invalid: [
     {code: '<VisuallyHidden as="button">Submit</VisuallyHidden>', errors: [{message: errorMessage}]},
@@ -41,5 +66,32 @@ ruleTester.run('a11y-no-visually-hidden-interactive-element', rule, {
     {code: "<select className='sr-only' />", errors: [{message: errorMessage}]},
     {code: "<option className='sr-only' />", errors: [{message: errorMessage}]},
     {code: "<a className='sr-only'>Read more</a>", errors: [{message: errorMessage}]},
+    {
+      code: "<button className='visually-hidden'>Submit</button>",
+      options: [
+        {
+          className: 'visually-hidden',
+        },
+      ],
+      errors: [{message: errorMessage}],
+    },
+    {
+      code: "<Hidden as='button'>Submit</Hidden>",
+      options: [
+        {
+          componentName: 'Hidden',
+        },
+      ],
+      errors: [{message: errorMessage}],
+    },
+    {
+      code: "<VisuallyHidden html='button'>Submit</VisuallyHidden>",
+      options: [
+        {
+          htmlPropName: 'html',
+        },
+      ],
+      errors: [{message: errorMessage}],
+    },
   ],
 })