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;