[Docs] Update error message for no-static-element-interactions rule

- Recommend using native HTML whenever possible - If using native counterpart is impossible, recommend adding to all interactive non-semantic elements an appropriate role along with support for mouse, keyboard and touch inputs. Fixes #761
jsx-eslint · Mar 16, 2022 · 9dc1fe5 · 9dc1fe5
1 parent 5e966e5
commit 9dc1fe5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -19,7 +19,7 @@ import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
 
 const ruleTester = new RuleTester();
 
-const errorMessage = 'Static HTML elements with event handlers require a role.';
+const errorMessage = 'The best replacement for an interactive static element is the corresponding semantic HTML element. If using native HTML is not possible, an interactive content element needs an appropriate role and support for tabbing, mouse, keyboard and touch inputs.';
 
 const expectedError = {
   message: errorMessage,

diff --git a/src/rules/no-static-element-interactions.js b/src/rules/no-static-element-interactions.js
@@ -29,7 +29,7 @@ import isNonInteractiveRole from '../util/isNonInteractiveRole';
 import isNonLiteralProperty from '../util/isNonLiteralProperty';
 import isPresentationRole from '../util/isPresentationRole';
 
-const errorMessage = 'Static HTML elements with event handlers require a role.';
+const errorMessage = 'The best replacement for an interactive static element is the corresponding semantic HTML element. If using native HTML is not possible, an interactive content element needs an appropriate role and support for tabbing, mouse, keyboard and touch inputs.';
 
 const domElements = [...dom.keys()];
 const defaultInteractiveProps = [
@@ -65,7 +65,7 @@ export default ({
         const hasInteractiveProps = handlers
           .some((prop) => (
             hasProp(attributes, prop)
-            && getPropValue(getProp(attributes, prop)) != null
+                        && getPropValue(getProp(attributes, prop)) != null
           ));
 
         if (!includes(domElements, type)) {
@@ -75,8 +75,8 @@ export default ({
         }
         if (
           !hasInteractiveProps
-          || isHiddenFromScreenReader(type, attributes)
-          || isPresentationRole(type, attributes)
+                    || isHiddenFromScreenReader(type, attributes)
+                    || isPresentationRole(type, attributes)
         ) {
           // Presentation is an intentional signal from the author that this
           // element is not meant to be perceivable. For example, a click screen
@@ -85,18 +85,18 @@ export default ({
         }
         if (
           isInteractiveElement(type, attributes)
-          || isInteractiveRole(type, attributes)
-          || isNonInteractiveElement(type, attributes)
-          || isNonInteractiveRole(type, attributes)
-          || isAbstractRole(type, attributes)
+                    || isInteractiveRole(type, attributes)
+                    || isNonInteractiveElement(type, attributes)
+                    || isNonInteractiveRole(type, attributes)
+                    || isAbstractRole(type, attributes)
         ) {
           // This rule has no opinion about abstract roles.
           return;
         }
 
         if (
           allowExpressionValues === true
-          && isNonLiteralProperty(attributes, 'role')
+                    && isNonLiteralProperty(attributes, 'role')
         ) {
           // This rule has no opinion about non-literal roles.
           return;