From 9dc1fe55d75a42f09744f605e8ca0461d1fc83fd Mon Sep 17 00:00:00 2001
From: uncommon-type <uncommon.type@rambler.ru>
Date: Wed, 16 Mar 2022 11:12:16 +0300
Subject: [PATCH] [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
---
 .../no-static-element-interactions-test.js     |  2 +-
 src/rules/no-static-element-interactions.js    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index 329c79f35..403f0974b 100644
--- 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
index 8348f1578..fb1c80727 100644
--- 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,10 +85,10 @@ 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;
@@ -96,7 +96,7 @@ export default ({
 
         if (
           allowExpressionValues === true
-          && isNonLiteralProperty(attributes, 'role')
+                    && isNonLiteralProperty(attributes, 'role')
         ) {
           // This rule has no opinion about non-literal roles.
           return;