JAWS reads non-interactive elements as Clickable

Do you want to request a feature or report a bug? Bug

What is the current behavior?

1. I create an app using create-react-app
2. I use JAWS Professional Edition Version 2018 (build 1710.42 ILM) and Internet Explorer 11 on Windows 7
3. I use arrow keys to navigate to paragraph “Edit src/App.js and save to reload.”
4. Jaws announces “Edit src/App.js and save to reload. clickable”

What is the expected behavior? This paragraph is non interactive, it should not be announced as clickable.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• JAWS Professional Edition Version 2018 (build 1710.42 ILM)
• Internet Explorer 11
• Windows 7
• create-react-app 2.0.3

suspected cause Using Chrome Event Listener Breakpoints I observed there’s a function called trapClickOnNonInteractiveElement which is the onclick handler for non interactive elements. This noop function is causing JAWS to think this is an interactive element

possible solution In trapClickOnNonInteractiveElement there is a comment which reads

// TODO: Only do this for the relevant Safaris maybe?

I think that this would fix this issue.

[jkatherman]

This is a tricky problem… it is usually caused by click handlers. JAWS (and NVDA) announce “clickable” when an element or one of its ancestors has a click event handler.

For example, “clickable” is announced each time a JAWS user presses down arrow to read the p lines in the following div:

<div onclick=""> <p>The quick brown fox</p> <p>jumps over the lazy dog.</p> </div>

[philipp-spiess]

@Lily418 The problem with relying on the user agent is that webviews can overwrite them (I think) which would break our feature test and onClick events in React 😕 Check out #12989 for more context.