Add recommended configuration to no-interactive-element-to-noninteractive-role

Author: jessebeach

__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js

@@ -10,8 +10,10 @@
 // -----------------------------------------------------------------------------
 
 import { RuleTester } from 'eslint';
+import { configs } from '../../../src/index';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/no-interactive-element-to-noninteractive-role';
+import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
 
 // -----------------------------------------------------------------------------
 // Tests
@@ -239,6 +241,7 @@ const alwaysValid = [
   { code: '<hr role="button" />;' },
   { code: '<img role="button" />;' },
   { code: '<li role="button" />;' },
+  { code: '<li role="presentation" />;' },
   { code: '<nav role="button" />;' },
   { code: '<ol role="button" />;' },
   { code: '<table role="button" />;' },
@@ -358,11 +361,27 @@ const neverValid = [
   { code: '<tr role="listitem" />;', errors: [expectedError] },
 ];
 
-ruleTester.run(`${ruleName}`, rule, {
+const recommendedOptions = (configs.recommended.rules[ruleName][1] || {});
+ruleTester.run(`${ruleName}:recommended`, rule, {
+  valid: [
+    ...alwaysValid,
+    { code: '<tr role="presentation" />;' },
+  ]
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+  invalid: [
+    ...neverValid,
+  ]
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+});
+
+ruleTester.run(`${ruleName}:strict`, rule, {
   valid: [
     ...alwaysValid,
   ].map(parserOptionsMapper),
   invalid: [
     ...neverValid,
+    { code: '<tr role="presentation" />;', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js

@@ -71,6 +71,7 @@ const alwaysValid = [
   { code: '<select className="foo" role="button" />' },
   { code: '<textarea className="foo" role="button" />' },
   { code: '<tr role="button" />;' },
+  { code: '<tr role="presentation" />;' },
   /* Interactive elements */
   { code: '<a tabIndex="0" role="img" />' },
   { code: '<a href="http://x.y.z" role="img" />' },
@@ -314,6 +315,7 @@ const alwaysValid = [
   { code: '<hr role="listitem" />;' },
   { code: '<img role="listitem" />;' },
   { code: '<li role="listitem" />;' },
+  { code: '<li role="presentation" />;' },
   { code: '<nav role="listitem" />;' },
   { code: '<ol role="listitem" />;' },
   { code: '<table role="listitem" />;' },

src/index.js

@@ -62,7 +62,12 @@ module.exports = {
         'jsx-a11y/no-access-key': 'error',
         'jsx-a11y/no-autofocus': 'error',
         'jsx-a11y/no-distracting-elements': 'error',
-        'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error',
+        'jsx-a11y/no-interactive-element-to-noninteractive-role': [
+          'error',
+          {
+            tr: ['none', 'presentation'],
+          },
+        ],
         'jsx-a11y/no-noninteractive-element-interactions': 'error',
         'jsx-a11y/no-noninteractive-element-to-interactive-role': [
           'error',