Search code examples
javascriptandroidreactjsaccessibilitytalkback

Android Talkback not registering onFocus for web. How do I manipulate accessibility focus with Android Talkback?

As the title says, Android Talkback is not registering the onFocus event. I understand that the onFocus event is not ever registered since the screen reader is using a special type of accessibility focus. How, then, can we drive/manipulate the accessibility focus to provide the user a better experience?

I have an example here: https://codesandbox.io/s/r54j2mqrl4 . So here the console.log("hello!") is not registering for me in mobile Android Talkback, however it is registering correctly on desktop mac OSX(with no screen reader on). I am using the tab key to navigate.

Is there something similar to an onFocus event to use for Android Talkback's accessibility focus?

Thank you in advance for your time.

Device and versions:

Mobile Android Talkback: Samsung Galaxy Tab S2, Android version 7.0, Google Chrome 62.0.3202.84

Desktop Mac OSX: macOS Sierra 10.12.6, Google Chrome 61.0.3163.100

Solution

  • The ".focus()" method theoretically should work. The problem would come into play in the event that the thing that was receiving "focus" would not also receive accessibility focus. An Android Accessibility Service can only accessibility focus things that are also Accessibility focusable.

    Unfortunately you cannot manipulate Accessibility Focus directly from Javascript, only focus. This being said, when you're in Android and something requests focus, this usually suggests accessibility focus will also move to that item along with focus. In TalkBack terms, this is how Tab navigation works, Accessibility Focus just follows input focus around. It's not perfect, but it's a reasonable expectation that Focus and Accessibility Focus want to be the same. Though not always: EditTexts can be in an quazi focused/unfocused state in TalkBack, for good reason... you may need to interact with the onscreen keyboard while the field still has the cursor (input focus).

    If the following is true:

    • Your Element is Accessibility Focusable
    • Your element is focusable
    • The thing that is A11yFocusable and the thing that is focusable are the same, and not just descendants (very important).

    You can easily confirm the above three things by exploring in Android Device monitor. Triple check that you aren't focusing something (like a child of the element) of the thing that you are envision getting accessibility focus.

    If, after that, you call .focus() on the thing, and it doesn't work, you have essentially found a bug in the webview you are using to render your HTML/Javascript content, and no there is nothing you can do about it.