Handle list of roles for valid-aria-role.

Author: Ethan Cohen

src/rules/valid-aria-role.js

@@ -47,14 +47,11 @@ module.exports = context => ({
     }
 
     // If value is a literal.
-    const normalizedValue = attribute.value.value.toUpperCase();
-    const isValid = validRoleTypes.indexOf(normalizedValue) > -1;
+    const normalizedValues = attribute.value.value.toUpperCase().split(" ");
+    const isValid = normalizedValues.every(value => validRoleTypes.indexOf(value) > -1);
 
     if (isValid === false) {
-      context.report({
-        node: attribute,
-        message: errorMessage
-      });
+      report(context, attribute);
     }
   }
 });

tests/src/rules/valid-aria-role.js

@@ -46,13 +46,16 @@ ruleTester.run('valid-aria-role', rule, {
     { code: '<div role={role} />', parserOptions },
     { code: '<div role={role || "button"} />', parserOptions },
     { code: '<div role={role || "foobar"} />', parserOptions },
+    { code: '<div role="tabpanel row" />', parserOptions },
     { code: '<Bar baz />', parserOptions }
   ].concat(basicValidityTests),
   invalid: [
     { code: '<div role="foobar" />', errors: [ errorMessage ], parserOptions },
     { code: '<div role="datepicker"></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role="range"></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role=""></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role="tabpanel row foobar"></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role="tabpanel row range"></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role={undefined}></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role />', errors: [ errorMessage ], parserOptions },
     { code: '<div role={null}></div>', errors: [ errorMessage ], parserOptions }