add aria- to be ignored

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-box-inline-style-input.js

@@ -2,7 +2,7 @@ import { Box } from 'gestalt';
 export default function TestElement() {
   return (
     <Box>
-      <div role="button" style={{ marginTop: 200 }}>
+      <div onBlur={() => {}} style={{ marginTop: 200 }}>
         <Box />
       </div>
     </Box>

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-box-inline-style-output.js

@@ -2,7 +2,7 @@ import { Box } from 'gestalt';
 export default function TestElement() {
   return (
     <Box>
-      <Box role="button" dangerouslySetInlineStyle={{ __style: { marginTop: 200 } }}>
+      <Box onBlur={() => {}} dangerouslySetInlineStyle={{ __style: { marginTop: 200 } }}>
         <Box />
       </Box>
     </Box>

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-box-input.js

@@ -2,7 +2,7 @@ import { Box } from 'gestalt';
 export default function TestElement() {
   return (
     <Box>
-      <div role="button">
+      <div onBlur={() => {}}>
         <Box />
       </div>
     </Box>

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-box-output.js

@@ -2,7 +2,7 @@ import { Box } from 'gestalt';
 export default function TestElement() {
   return (
     <Box>
-      <Box role="button">
+      <Box onBlur={() => {}}>
         <Box />
       </Box>
     </Box>

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-renamed-box-input.js

@@ -2,7 +2,7 @@ import { Box as RenamedBox } from 'gestalt';
 export default function TestElement() {
   return (
     <RenamedBox>
-      <div role="button">
+      <div onBlur={() => {}}>
         <RenamedBox />
       </div>
     </RenamedBox>

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-renamed-box-output.js

@@ -2,7 +2,7 @@ import { Box as RenamedBox } from 'gestalt';
 export default function TestElement() {
   return (
     <RenamedBox>
-      <RenamedBox role="button">
+      <RenamedBox onBlur={() => {}}>
         <RenamedBox />
       </RenamedBox>
     </RenamedBox>

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-without-box-input.js

@@ -1,7 +1,7 @@
 import { Text, Flex } from 'gestalt';
 export default function TestElement() {
   return (
-    <div role="button">
+    <div onBlur={() => {}}>
       <Text>Test</Text>
     </div>
   );

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-without-box-output.js

@@ -1,7 +1,7 @@
 import { Box, Flex, Text } from 'gestalt';
 export default function TestElement() {
   return (
-    <Box role="button">
+    <Box onBlur={() => {}}>
       <Text>Test</Text>
     </Box>
   );

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/no-gestalt-import-input.js

@@ -1,6 +1,6 @@
 export default function TestElement() {
   return (
-    <div role="button">
+    <div onBlur={() => {}}>
       <button />
     </div>
   );

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/no-gestalt-import-output.js

@@ -1,7 +1,7 @@
 import { Box } from 'gestalt';
 export default function TestElement() {
   return (
-    <Box role="button">
+    <Box onBlur={() => {}}>
       <button />
     </Box>
   );

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/no-gestalt-import-selfclosed-input.js

@@ -1,3 +1,3 @@
 export default function TestElement() {
-  return <div role="button" />;
+  return <div onBlur={() => {}} />;
 }

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/no-gestalt-import-selfclosed-output.js

@@ -1,4 +1,4 @@
 import { Box } from 'gestalt';
 export default function TestElement() {
-  return <Box role="button" />;
+  return <Box onBlur={() => {}} />;
 }

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-disallowed/valid.js

@@ -5,6 +5,11 @@ export default function TestElement() {
       <Box ref={undefined} />
       <div ref={undefined} className={undefined} />
       <div ref={undefined} onClick={() => {}} />
+      <div ref={undefined} tabIndex={-1} />
+      <div ref={undefined} role="button" />
+      <div ref={undefined} onMouseOver={() => {}} />
+      <div ref={undefined} accessKey="test" />
+      <div ref={undefined} autoFocus />
     </Box>
   );
 }

packages/eslint-plugin-gestalt/src/eslintASTHelpers.js

@@ -254,7 +254,7 @@ export const hasLonelyAttribute: HasLonelyAttributeType = ({ elementNode, tagNam
   elementNode?.attributes?.length === 1 &&
   elementNode.attributes[0]?.name?.name === attribute;
 
-type HasAttributeType = ({|
+type HasAttributesType = ({|
   elementNode: GenericNode,
   tagName: string,
   attributes: $ReadOnlyArray<string>,
@@ -264,6 +264,19 @@ type HasAttributeType = ({|
 Example 1:
 \<div role="button" \/\> if attribute="role" returns true
 */
-export const hasAttributes: HasAttributeType = ({ elementNode, tagName, attributes }) =>
+export const hasAttributes: HasAttributesType = ({ elementNode, tagName, attributes }) =>
   isTag({ elementNode, tagName }) &&
   elementNode?.attributes.some((nodeAttribute) => attributes.includes(nodeAttribute?.name?.name));
+
+type HasAriaAttributesType = ({|
+  elementNode: GenericNode,
+  tagName: string,
+|}) => boolean;
+
+/** This function checks is a given tag (tagName) in a node (elementNode) contains an ARIA attribute (attribute), and returns true if so.
+Example 1:
+\<div aria-label="test" \/\> returns true
+*/
+export const hasAriaAttributes: HasAriaAttributesType = ({ elementNode, tagName }) =>
+  isTag({ elementNode, tagName }) &&
+  elementNode?.attributes.some((nodeAttribute) => nodeAttribute?.name?.name.startsWith('aria-'));

packages/eslint-plugin-gestalt/src/prefer-box-no-disallowed.js

@@ -3,7 +3,13 @@
  */
 
 // @flow strict
-import { isTag, hasAttributes, hasImport, hasLonelyAttribute } from './eslintASTHelpers.js';
+import {
+  isTag,
+  hasAriaAttributes,
+  hasAttributes,
+  hasImport,
+  hasLonelyAttribute,
+} from './eslintASTHelpers.js';
 import { renameTagFixer, updateGestaltImportFixer } from './eslintASTFixers.js';
 import { type ESLintRule } from './eslintFlowTypes.js';
 
@@ -41,12 +47,27 @@ const rule: ESLintRule = {
     };
 
     const jSXElementFnc = (node) => {
+      const disallowedAttributes = ['className', 'onClick'];
+      const ignoreEslintPluginJsxA11yAttributes = [
+        'role',
+        'onMouseOver',
+        'onMouseOut',
+        'accessKey',
+        'autoFocus',
+        'tabIndex',
+      ];
+
+      const ignoreAttributes = [...disallowedAttributes, ...ignoreEslintPluginJsxA11yAttributes];
       if (
         !isTag({ elementNode: node.openingElement, tagName: 'div' }) ||
         hasAttributes({
           elementNode: node.openingElement,
           tagName: 'div',
-          attributes: ['className', 'onClick'],
+          attributes: ignoreAttributes,
+        }) ||
+        hasAriaAttributes({
+          elementNode: node.openingElement,
+          tagName: 'div',
         })
       ) {
         return null;

packages/eslint-plugin-gestalt/src/prefer-box-no-disallowed.test.js

@@ -144,22 +144,6 @@ const noDisallowedGestaltImportWithBoxOutput = readFileSync(
   'utf-8',
 );
 
-const noDisallowedGestaltImportWithBoxWithOnclickInput = readFileSync(
-  path.resolve(
-    __dirname,
-    './__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-box-with-onclick-input.js',
-  ),
-  'utf-8',
-);
-
-const noDisallowedGestaltImportWithBoxWithOnclickOutput = readFileSync(
-  path.resolve(
-    __dirname,
-    './__fixtures__/prefer-box-no-disallowed/invalid-no-disallowed/gestalt-import-with-box-with-onclick-output.js',
-  ),
-  'utf-8',
-);
-
 const noDisallowedGestaltImportWithBoxInlineStyleInput = readFileSync(
   path.resolve(
     __dirname,
@@ -255,11 +239,6 @@ ruleTester.run('prefer-box-no-disallowed', rule, {
       noDisallowedGestaltImportWithBoxOutput,
       errorMessageNoDisallowed,
     ],
-    [
-      noDisallowedGestaltImportWithBoxWithOnclickInput,
-      noDisallowedGestaltImportWithBoxWithOnclickOutput,
-      errorMessageNoDisallowed,
-    ],
     [
       noDisallowedGestaltImportWithRenamedBoxInput,
       noDisallowedGestaltImportWithRenamedBoxOutput,