Flag aria-label and aria-labelledby on non-interactive elements

__tests__/src/rules/role-supports-aria-props-test.js

@@ -50,11 +50,14 @@ const nonAbstractRoles = [...roles.keys()].filter((role) => roles.get(role).abst
 const createTests = (rolesNames) => rolesNames.reduce((tests, role) => {
   const {
     props: propKeyValues,
+    prohibitedProps,
   } = roles.get(role);
-  const validPropsForRole = Object.keys(propKeyValues);
+  const validPropsForRole = Object.keys(propKeyValues)
+    .filter((attribute) => prohibitedProps.indexOf(attribute) === -1);
   const invalidPropsForRole = [...aria.keys()]
     .map((attribute) => attribute.toLowerCase())
-    .filter((attribute) => validPropsForRole.indexOf(attribute) === -1);
+    .filter((attribute) => validPropsForRole.indexOf(attribute) === -1)
+    .concat(prohibitedProps);
   const normalRole = role.toLowerCase();
 
   const allTests = [];
@@ -568,5 +571,21 @@ ruleTester.run('role-supports-aria-props', rule, {
       errors: [errorMessage('aria-checked', 'link', 'a', true)],
       settings: componentsSettings,
     },
+    {
+      code: '<span aria-label />',
+      errors: [errorMessage('aria-label', 'generic', 'span', true)],
+    },
+    {
+      code: '<span aria-labelledby />',
+      errors: [errorMessage('aria-labelledby', 'generic', 'span', true)],
+    },
+    {
+      code: '<div aria-label />',
+      errors: [errorMessage('aria-label', 'generic', 'div', true)],
+    },
+    {
+      code: '<div aria-labelledby />',
+      errors: [errorMessage('aria-labelledby', 'generic', 'div', true)],
+    },
   ].concat(invalidTests).map(parserOptionsMapper),
 });

__tests__/src/util/getComputedRole-test.js

@@ -24,7 +24,7 @@ describe('getComputedRole', () => {
       describe('lacks implicit', () => {
         it('should return null', () => {
           expect(getComputedRole(
-            'div',
+            'custom-element',
             [JSXAttributeMock('role', 'beeswax')],
           )).toBeNull();
         });
@@ -43,7 +43,7 @@ describe('getComputedRole', () => {
       describe('lacks implicit', () => {
         it('should return null', () => {
           expect(getComputedRole(
-            'div',
+            'custom-element',
             [],
           )).toBeNull();
         });
@@ -62,7 +62,7 @@ describe('getComputedRole', () => {
     describe('lacks implicit', () => {
       it('should return null', () => {
         expect(getComputedRole(
-          'div',
+          'custom-element',
           [],
         )).toBeNull();
       });

__tests__/src/util/getExplicitRole-test.js

@@ -14,15 +14,15 @@ describe('getExplicitRole', () => {
   describe('invalid role', () => {
     it('should return null', () => {
       expect(getExplicitRole(
-        'div',
+        'custom-element',
         [JSXAttributeMock('role', 'beeswax')],
       )).toBeNull();
     });
   });
   describe('no role', () => {
     it('should return null', () => {
       expect(getExplicitRole(
-        'div',
+        'custom-element',
         [],
       )).toBeNull();
     });

__tests__/src/util/getImplicitRole-test.js

@@ -13,7 +13,7 @@ describe('getImplicitRole', () => {
   describe('lacks implicit', () => {
     it('should return null', () => {
       expect(getImplicitRole(
-        'div',
+        'custom-element',
         [],
       )).toBeNull();
     });

src/rules/role-supports-aria-props.js

@@ -65,9 +65,11 @@ export default {
         // Make sure it has no aria-* properties defined outside of its property set.
         const {
           props: propKeyValues,
+          prohibitedProps,
         } = roles.get(roleValue);
         const invalidAriaPropsForRole = [...aria.keys()]
-          .filter((attribute) => !(attribute in propKeyValues));
+          .filter((attribute) => !(attribute in propKeyValues))
+          .concat(prohibitedProps);
 
         node.attributes.filter((prop) => (
           getPropValue(prop) != null // Ignore the attribute if its value is null or undefined.

src/util/implicitRoles/div.js

@@ -0,0 +1,6 @@
+/**
+ * Returns the implicit role for a div tag.
+ */
+export default function getImplicitRoleForDiv() {
+  return 'generic';
+}

src/util/implicitRoles/index.js

@@ -7,6 +7,7 @@ import button from './button';
 import datalist from './datalist';
 import details from './details';
 import dialog from './dialog';
+import div from './div';
 import form from './form';
 import h1 from './h1';
 import h2 from './h2';
@@ -29,6 +30,7 @@ import output from './output';
 import progress from './progress';
 import section from './section';
 import select from './select';
+import span from './span';
 import tbody from './tbody';
 import textarea from './textarea';
 import tfoot from './tfoot';
@@ -45,6 +47,7 @@ export default {
   datalist,
   details,
   dialog,
+  div,
   form,
   h1,
   h2,
@@ -67,6 +70,7 @@ export default {
   progress,
   section,
   select,
+  span,
   tbody,
   textarea,
   tfoot,

src/util/implicitRoles/span.js

@@ -0,0 +1,6 @@
+/**
+ * Returns the implicit role for a span tag.
+ */
+export default function getImplicitRoleForSpan() {
+  return 'generic';
+}