Android: Blocking elements from being focused

[amarlette]

Description

• ImportantForAccessibility="no" does not work on Text, Button, or Picker.
• ImportantForAccessibility="no-hide-descendants" does not work on Text, Button, Picker, or ImageBackground.
• Note: On ImageBackground, focus is prevented on the imageBackground node itself, but focus is not prevented on its descendants.

React Native version:

v0.63

Expected Behavior

Setting ImportantForAccessibility to "no" should block focus on that element, regardless of other properties that may indicate that it should be focusable (such as accessible={true}, focusable={true} onPress, etc.). Descendant elements however, may remain focusable. Setting ImportantForAccessibility to "no-hide-descendants" should block focus from this element, and any descendant element.

Setting ImportantForAccessibility to "yes" does not force an element to become focusable, but simply does not explicitly exclude it. It may become focusable if it was previously excluded by having its importantForAccessibility property set to no elsewhere.

Snack

https://snack.expo.io/ERFEn96ia

Android Details

This property should directly correlate with the View's importantForAccessibility property, and is currently being mapped correctly here: https://github.com/facebook/react-native/blob/49f10fd2e526b64294777357ab2fef8880739f26/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L267

Likely cause

The reason this doesn't work on some components and does work on others is likely due to some components them not strictly defining their props, so passing in standard ViewProps (like importantForAccessibility) works, but isn't intended behavior. Unless there is a good reason to not allow accessibility properties on a component, they should be supported.

This is likely a Javascript-only issue, and not related to any incorrect mapping on the Android side.

[grgr-dkrk]

I'd like to work on this issue.

The Picker is deprecated, so I also work with @react-native-picker/picker.

[amarlette]

Thank you @grgr-dkrk! I'll move this to in-progress

[aweary]

@blavalla wondering if y'alls definition of "focus" here also includes keyboard focus? we're running into a problem where we're unable to prevent external bluetooth keyboards from focusing elements in offscreen views (hidden with importantForAccessibility="no-hide-descendants").

Does this issue track that behavior by your current understanding or should I create another?

[blavalla]

@aweary , This one was specifically about screen reader focus.

Generally speaking, on Android screen reader focus and keyboard focus are two separate concepts. Most of the time screen reader focus will follow keyboard focus (for example if an input is auto-focused so that a users on screen keyboard appears), but not always (for example when a screen reader user swipes to navigate around keyboard focus can remain in the input).
The "importantForAccessibility" property only applies to screen reader focus, and not keyboard focus, as what it does under the hood is prevent accessibility events (such as focus events), hence blocking accessibility services from knowing when/where to move focus to.

If you are trying to prevent an off-screen element from being keyboard focusable, but you do want it to be screen reader focusable, then I think there isn't a convenient way to currently handle this in RN. In standard Android you'd set focusable="false" on the View to prevent keyboard focus, and then screenReaderFocusable="true" to still allow screen reader focus. I think your best bet would be to remove the thing that is making this keyboard focusable in the first place. Generally, only interactive elements such as those with a click handler, are going to get keyboard focus by default on Android, so if you don't need this element to be clickable, removing that will likely block keyboard focus from the element. If you do still need it to be clickable, but only for screen readers, you may be able to get this to work by using onAccessibilityTap or setting accessibilityActions to have an activate action. This, in theory at least as I've never tested this scenario, should keep this element interactive for screen readers, but not interactive for keyboards.

If you want this element to be not focusable by either keyboards or screen readers, then you'll just want to set accessible="false" on the element, which on Android maps directly to focusable="false".

[aweary]

@blavalla I have a view that I don't want to be focusable by keyboards or screen reader, but even with <View accessible={false}> descendants are still being focused when tabbing with a physical keyboard. Are you saying accessible={false} should also prevent physical keyboard focus for descendants similar to no-hide-descendants for screen readers?

In this situation we cannot just remove the offscreen view for performance reasons.

[blavalla]

@aweary, Ah, no accessible="false" just sets focusable="false" behind the scenes, which only applies to the element its set on, but not it's descendants. It's totally valid on Android to have something like this (android psuedo-code):

<View focusable="false"> <-- is not focusable by keyboard
 <View onClick="..." /> <-- is focusable by keyboard
</View>

The keyboard-focus equivalent of 'no-hide-descendants' would be to set the descendantFocusability property on the parent, along with the focusable property.

<View focusable="false" descendantFocusability="FOCUS_BLOCK_DESCENDANTS"> <-- is not focusable by keyboard
 <View onClick="..." /> <-- is also not focusable by keyboard, even though it has an onClick
</View>

Another common approach is to hide these elements with Android's "visibility" property. If this is set to INVISIBLE or GONE the element won't be focusable by a keyboard, and it's descendants will inherit this visibility. I'm guessing that either in RN thar "display: none" doesn't map to one of these (I think these go through Yoga, which I am not very familiar with), or you aren't using it because you want this to actually be drawn for performance reasons.

<View visibility="GONE"> <-- is not focusable by keyboard
 <View onClick="..." /> <-- is also not focusable by keyboard, even though it has an onClick
</View>

I think to really robustly support keyboard focus in RN we'd need to have separate properties for keyboard focus that aren't also manipulating accessibility focus. Something like having a "focusable" prop on all components that could be set to "true", "false", and "false-also-hide-descendants" would solve this use case for you, but unfortunately doesn't currently exist.

If you're interested in adding support for this though, feel free to make a PR and tag me on it, as I'd be happy to review.