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:

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

Line 267 in 49f10fd

public void setImportantForAccessibility(

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.

[fabOnReact]

importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images

Nested Test with accessibilityRole="link" is accessible when parent sets importantForAccessibility="yes"

https://github.com/facebook/react-native/pull/33215/files#diff-37199b6b562523b453547e7fb56c95fd9aed5dc01fee3f6bdd50e97297ff8e7fR78
https://developer.android.com/reference/android/view/View#IMPORTANT_FOR_ACCESSIBILITY_YES
#30375 (comment)

sourcecode of the example

class AccessibilityExample extends React.Component<{}> {
  render(): React.Node {
    const uri =
      'https://portfoliofabrizio.s3.eu-central-1.amazonaws.com/videos/surfcheck-poster.png';
    return (
      <View>
        <RNTesterBlock title="TextView without label">
          <Text importantForAccessibility="no" accessible={true}>
            This is a Text with an Image as nested Child and a Link.
            <Text
              accessibilityRole="link">
              This is a link
            </Text>
            <Image
              accessible={true}
              focusable={true}
              importantForAccessibility="yes"
              accessibilityLabel="image accessibilityLabel"
              source={{uri}}
              style={{height: 400, width: 200}}
            />
          </Text>
        </RNTesterBlock>
      </View>
    );
  }
}

edited.copy.mp4

Nested Test with accessibilityRole="link" is **not** accessible when parent sets importantForAccessibility="no"

2022-07-22.15-47-18.mp4

ExploreByTouchHelper#requestAccessibiltyFocus

https://github.com/aosp-mirror/platform_frameworks_base/blob/19e53cfdc8a5c6ef45c0adf2dd239576ddce5822/core/java/com/android/internal/widget/ExploreByTouchHelper.java#L595

    /**
     * Attempts to give accessibility focus to a virtual view.
     * <p>
     * A virtual view will not actually take focus if
     * {@link AccessibilityManager#isEnabled()} returns false,
     * {@link AccessibilityManager#isTouchExplorationEnabled()} returns false,
     * or the view already has accessibility focus.
     *
     * @param virtualViewId The id of the virtual view on which to place
     *            accessibility focus.
     * @return Whether this virtual view actually took accessibility focus.
     */
    private boolean requestAccessibilityFocus(int virtualViewId) {
        final AccessibilityManager accessibilityManager =
                (AccessibilityManager) mContext.getSystemService(Context.ACCESSIBILITY_SERVICE);

        if (!mManager.isEnabled()
                || !accessibilityManager.isTouchExplorationEnabled()) {
            return false;
        }
        // TODO: Check virtual view visibility.
        if (!isAccessibilityFocused(virtualViewId)) {
            // Clear focus from the previously focused view, if applicable.
            if (mFocusedVirtualViewId != INVALID_ID) {
                sendEventForVirtualView(mFocusedVirtualViewId,
                        AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUS_CLEARED);
            }

            // Set focus on the new view.
            mFocusedVirtualViewId = virtualViewId;

            // TODO: Only invalidate virtual view bounds.
            mView.invalidate();
            sendEventForVirtualView(virtualViewId,
                    AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED);
            return true;
        }
        return false;
    }

View#onFocusChanged

https://github.com/aosp-mirror/platform_frameworks_base/blob/19e53cfdc8a5c6ef45c0adf2dd239576ddce5822/core/java/android/view/View.java#L12837

    /**
     * Called by the view system when the focus state of this view changes.
     * When the focus change event is caused by directional navigation, direction
     * and previouslyFocusedRect provide insight into where the focus is coming from.
     * When overriding, be sure to call up through to the super class so that
     * the standard focus handling will occur.
     *
     * @param gainFocus True if the View has focus; false otherwise.
     * @param direction The direction focus has moved when requestFocus()
     *                  is called to give this view focus. Values are
     *                  {@link #FOCUS_UP}, {@link #FOCUS_DOWN}, {@link #FOCUS_LEFT},
     *                  {@link #FOCUS_RIGHT}, {@link #FOCUS_FORWARD}, or {@link #FOCUS_BACKWARD}.
     *                  It may not always apply, in which case use the default.
     * @param previouslyFocusedRect The rectangle, in this view's coordinate
     *        system, of the previously focused view.  If applicable, this will be
     *        passed in as finer grained information about where the focus is coming
     *        from (in addition to direction).  Will be <code>null</code> otherwise.
     */
    @CallSuper
    protected void onFocusChanged(boolean gainFocus, @FocusDirection int direction,
            @Nullable Rect previouslyFocusedRect) {
        if (gainFocus) {
            sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
        } else {
            notifyViewAccessibilityStateChangedIfNeeded(
                    AccessibilityEvent.CONTENT_CHANGE_TYPE_UNDEFINED);
        }

        // Here we check whether we still need the default focus highlight, and switch it on/off.
        switchDefaultFocusHighlight();

        if (!gainFocus) {
            if (isPressed()) {
                setPressed(false);
            }
            if (hasWindowFocus()) {
                notifyFocusChangeToImeFocusController(false /* hasFocus */);
            }
            onFocusLost();
        } else if (hasWindowFocus()) {
            notifyFocusChangeToImeFocusController(true /* hasFocus */);
        }

        invalidate(true);
        ListenerInfo li = mListenerInfo;
        if (li != null && li.mOnFocusChangeListener != null) {
            li.mOnFocusChangeListener.onFocusChange(this, gainFocus);
        }

        if (mAttachInfo != null) {
            mAttachInfo.mKeyDispatchState.reset(this);
        }

        if (mParent != null) {
            mParent.onDescendantUnbufferedRequested();
        }

        notifyEnterOrExitForAutoFillIfNeeded(gainFocus);
    }

View#findAccessibilityFocusHost

    /**
     * Returns the view within this view's hierarchy that is hosting
     * accessibility focus.
     *
     * @param searchDescendants whether to search for focus in descendant views
     * @return the view hosting accessibility focus, or {@code null}
     */
    private View findAccessibilityFocusHost(boolean searchDescendants) {
        if (isAccessibilityFocusedViewOrHost()) {
            return this;
        }

        if (searchDescendants) {
            final ViewRootImpl viewRoot = getViewRootImpl();
            if (viewRoot != null) {
                final View focusHost = viewRoot.getAccessibilityFocusedHost();
                if (focusHost != null && ViewRootImpl.isViewDescendantOf(focusHost, this)) {
                    return focusHost;
                }
            }
        }

        return null;
    }

[fabOnReact]

Text that has a nested child Image is 1 unique element (the child becomes a Span on Native Android)

sourcecode of the example

class AccessibilityExample extends React.Component<{}> {
  render(): React.Node {
    const uri =
      'https://portfoliofabrizio.s3.eu-central-1.amazonaws.com/videos/surfcheck-poster.png';
    return (
      <View>
        <RNTesterBlock title="TextView without label">
          <Text importantForAccessibility="yes" accessible={true}>
            This is a Text with an Image as nested Child.
            <Image
              accessible={true}
              importantForAccessibility="yes"
              accessibilityLabel="image accessibilityLabel"
              source={{uri}}
              style={{height: 400, width: 200}}
            />
          </Text>
        </RNTesterBlock>
      </View>
    );
  }
}

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java

Line 236 in 1237952

// TODO T31905686: add support for inline Images

2022-07-22.15-54-15.mp4

Nested child Image is accessible

example sourcecode

class AccessibilityExample extends React.Component<{}> {
  render(): React.Node {
    const uri =
      'https://portfoliofabrizio.s3.eu-central-1.amazonaws.com/videos/surfcheck-poster.png';
    return (
      <View>
        <RNTesterBlock title="TextView without label">
          <Text importantForAccessibility="yes" accessible={true}>
            This is a Text with an Image as nested Child.
            <View accessible={true} focusable={true}>
              <Image
                accessibilityLabel="image accessibilityLabel"
                source={{uri}}
                style={{height: 400, width: 200}}
              />
            </View>
          </Text>
        </RNTesterBlock>
      </View>
    );
  }
}

2022-07-22.16-08-35.mp4

[fabOnReact]

TODOs - importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images

• Read ReactAccessibiltyDelegate and ExploreByTouchHelper 15+15min
• Debug Parent VirtualView with importantForAccessibility="no"
• Read android View, ExploreByTouchHelper, and jetpack sourcecode 15+15min|
  Search for a method to control the screenreader focus (requestFocus,)
• Debug Parent VirtualView with importantForAccessibility="yes"
• Trigger Screenreader focus to move to next child (sendEventForVirtualView)
• Avoid focusing on element with importantForAccessibility="no" (AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUS_CLEARED)
• the element with importantForAccessibility="no" is focusable when getVirtualViewAt is not called
  find the method used to trigger focus on that element when swiping outside of the virtual view (getVirtualViewAt is not called in this case) and change the logic (dispatchHoverEvent, 9c730f5)
  over-riding performAccessibilityAction to focus on the virtualView

[RowlandOti]

@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 did this resolve it for you? I am facing similar issues.