JAWS reads non-interactive elements as Clickable

[Lily418]

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.

[gaearon]

That would be great. Unfortunately I don't have a good strategy for how to reliably detect iOS or Safari WebViews to only apply the hack there.

[Lily418]

I started looking at a PR for this. I was looking at
https://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari

and came up with

  const userAgent = window.navigator.userAgent;
  const isIos = !!userAgent.match(/(iPod|iPhone|iPad)/);
  const isWebkit = !!userAgent.match(/WebKit/);
  const iosSafari = isIos && isWebkit && !userAgent.match(/CriOS/i);

but seems very brittle

[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.

[EmanAskar]

we just upgraded our project from 3 days and our accessibilty got broken and we did downgrade

Yeah, I know in Android for instance you can do something like WebView.android.getSettings().setUserAgentString(“your-custom-user-agent”); to manipulate the User-Agent directly, so I assume that is doable in almost every scenario (non-Android ofc). So that is a good point!

[gaearon]

@EmanAskar

we just upgraded our project from 3 days and our accessibilty got broken and we did downgrade

This code has been in React for many years. Don't know what you mean.

[EmanAskar]

We upgraded from 15.6 to latest react then the issue started to happen

[weyert]

I am not sure why you should worry about the change of user agent? Guess you mean the case like viewing website from inside the Twitter app and Twitter happen have defined some weird user agent?

[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>