Merge pull request #456 from jessebeach/fix-aria-proptypes-rule

[#454] Fix for aria-proptypes rule failure

Author: ljharb

CHANGELOG.md

@@ -1,3 +1,7 @@
+6.1.1 / 2018-07-03
+
+- [fix] aria-proptypes support for idlist, #454
+
 6.1.0 / 2018-06-26
 ==================
 - [new] Support for eslint v5, #451

__tests__/src/rules/aria-proptypes-test.js

@@ -35,6 +35,10 @@ const errorMessage = (name) => {
     case 'tokenlist':
       return `The value for ${name} must be a list of one or more \
 tokens from the following: ${permittedValues}.`;
+    case 'idlist':
+      return `The value for ${name} must be a list of strings that represent DOM element IDs (idlist)`;
+    case 'id':
+      return `The value for ${name} must be a string that represents a DOM element ID`;
     case 'boolean':
     case 'string':
     case 'integer':
@@ -155,6 +159,40 @@ ruleTester.run('aria-proptypes', rule, {
     { code: '<div aria-relevant={`removals additions text all`} />' },
     { code: '<div aria-relevant={foo} />' },
     { code: '<div aria-relevant={foo.bar} />' },
+
+    // ID
+    { code: '<div aria-activedescendant="ascending" />' },
+    { code: '<div aria-activedescendant="ASCENDING" />' },
+    { code: '<div aria-activedescendant={"ascending"} />' },
+    { code: '<div aria-activedescendant={`ascending`} />' },
+    { code: '<div aria-activedescendant="descending" />' },
+    { code: '<div aria-activedescendant={"descending"} />' },
+    { code: '<div aria-activedescendant={`descending`} />' },
+    { code: '<div aria-activedescendant="none" />' },
+    { code: '<div aria-activedescendant={"none"} />' },
+    { code: '<div aria-activedescendant={`none`} />' },
+    { code: '<div aria-activedescendant="other" />' },
+    { code: '<div aria-activedescendant={"other"} />' },
+    { code: '<div aria-activedescendant={`other`} />' },
+    { code: '<div aria-activedescendant={foo} />' },
+    { code: '<div aria-activedescendant={foo.bar} />' },
+
+    // IDLIST
+    { code: '<div aria-labelledby="additions" />' },
+    { code: '<div aria-labelledby={"additions"} />' },
+    { code: '<div aria-labelledby={`additions`} />' },
+    { code: '<div aria-labelledby="additions removals" />' },
+    { code: '<div aria-labelledby="additions additions" />' },
+    { code: '<div aria-labelledby={"additions removals"} />' },
+    { code: '<div aria-labelledby={`additions removals`} />' },
+    { code: '<div aria-labelledby="additions removals text" />' },
+    { code: '<div aria-labelledby={"additions removals text"} />' },
+    { code: '<div aria-labelledby={`additions removals text`} />' },
+    { code: '<div aria-labelledby="additions removals text all" />' },
+    { code: '<div aria-labelledby={"additions removals text all"} />' },
+    { code: '<div aria-labelledby={`removals additions text all`} />' },
+    { code: '<div aria-labelledby={foo} />' },
+    { code: '<div aria-labelledby={foo.bar} />' },
   ].map(parserOptionsMapper),
   invalid: [
     // BOOLEAN

src/rules/aria-proptypes.js

@@ -20,6 +20,10 @@ const errorMessage = (name, type, permittedValues) => {
     case 'tokenlist':
       return `The value for ${name} must be a list of one or more \
 tokens from the following: ${permittedValues}.`;
+    case 'idlist':
+      return `The value for ${name} must be a list of strings that represent DOM element IDs (idlist)`;
+    case 'id':
+      return `The value for ${name} must be a string that represents a DOM element ID`;
     case 'boolean':
     case 'string':
     case 'integer':
@@ -34,6 +38,7 @@ const validityCheck = (value, expectedType, permittedValues) => {
     case 'boolean':
       return typeof value === 'boolean';
     case 'string':
+    case 'id':
       return typeof value === 'string';
     case 'tristate':
       return typeof value === 'boolean' || value === 'mixed';
@@ -44,6 +49,9 @@ const validityCheck = (value, expectedType, permittedValues) => {
       return typeof value !== 'boolean' && isNaN(Number(value)) === false;
     case 'token':
       return permittedValues.indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1;
+    case 'idlist':
+      return typeof value === 'string'
+        && value.split(' ').every(token => validityCheck(token, 'id', []));
     case 'tokenlist':
       return typeof value === 'string'
         && value.split(' ').every(token => permittedValues.indexOf(token.toLowerCase()) > -1);