Better support for keyboard navigation for accessibility

[Crare]

Introduction

Our project requires good highlighting of the buttons when using keyboard navigation. This is currently hard to do as there is no trigger on buttons that would indicate that it is currently focused component. And so I can't style a highlight to the button.

With keyboard navigation I mean some people may use wireless/USB keyboard to use the mobile-device for accessibility.

To improve the support it would be nice to have clear highlights on the buttons that are focused on. Currently there is very mild highlight that maybe comes from the OS itself. This is not enough as the contrast is not sufficient to any standard of accessibility.

Details

For example I have tried setting Pressable-components all on-triggers to a log call, but none of these will trigger when keyboard is used to focus on the component. commented out functions that need return value.

<Pressable
      onFocus={() => console.log("onFocus")}
      onBlur={() => console.log("onBlur")}
      onHoverIn={() => console.log("onHoverIn")}
      onHoverOut={() => console.log("onHoverOut")}
      onPress={() => console.log("onPress")}
      onPointerDown={() => console.log("onPointerDown")}
      onPointerEnter={() => console.log("onPointerEnter")}
      onPointerLeave={() => console.log("onPointerLeave")}
      onAccessibilityAction={() => console.log("onAccessibilityAction")}
      onAccessibilityEscape={() => console.log("onAccessibilityEscape")}
      onAccessibilityTap={() => console.log("onAccessibilityEscape")}
      onLayout={() => console.log("onLayout")}
      onLongPress={() => console.log("onLongPress")}
      onMagicTap={() => console.log("onMagicTap")}
      //   onMoveShouldSetResponder={() => console.log("onMoveShouldSetResponder")}
      //   onMoveShouldSetResponderCapture={() => console.log("onMoveShouldSetResponderCapture")}
      onPointerCancel={() => console.log("onPointerCancel")}
      onPointerCancelCapture={() => console.log("onPointerCancelCapture")}
      onPointerDownCapture={() => console.log("onPointerDownCapture")}
      onPointerEnterCapture={() => console.log("onPointerEnterCapture")}
      onPointerLeaveCapture={() => console.log("onPointerLeaveCapture")}
      onPointerMove={() => console.log("onPointerMove")}
      onPointerMoveCapture={() => console.log("onPointerMoveCapture")}
      onPointerUp={() => console.log("onPointerUp")}
      onPointerUpCapture={() => console.log("onPointerUpCapture")}
      onTouchMove={() => console.log("onTouchMove")}
      onPressIn={() => console.log("onPressIn")}
      onPressOut={() => console.log("onPressOut")}
      onResponderEnd={() => console.log("onResponderEnd")}
      onResponderGrant={() => console.log("onResponderGrant")}
      onResponderMove={() => console.log("onResponderMove")}
      onResponderReject={() => console.log("onResponderReject")}
      onResponderRelease={() => console.log("onResponderRelease")}
      onResponderStart={() => console.log("onResponderStart")}
      onResponderTerminate={() => console.log("onResponderTerminate")}
      //   onResponderTerminationRequest={() => console.log("onResponderTerminationRequest")}
      //   onStartShouldSetResponder={() => console.log("onStartShouldSetResponder")}
      //   onStartShouldSetResponderCapture={() => console.log("onStartShouldSetResponderCapture")}
      onTouchCancel={() => console.log("onTouchCancel")}
      onTouchEnd={() => console.log("onTouchEnd")}
      onTouchEndCapture={() => console.log("onTouchEndCapture")}
      onTouchStart={() => console.log("onTouchStart")}
    >
      button
    </Pressable>

To test same thing yourself you can:

1. make react native project
2. add Pressable button like above. or multiple to see the highlight switch from one to other.
3. run android emulator or real device with external keyboard.
4. press keyboard arrow keys or Tab-key to change the higlighted component. These need to be components that can be pressed like Pressable.
5. notice that none of the on-triggers are called when focused on the component.

Another thing is TextInput is not getting focused with the keyboard-navigation. I had to wrap the TextInput component inside TouchableOpacity-component and when call onPress is triggered on that it calls TextInput via reference to select the TextInput-component itself, which also triggers the on-screen virtual keyboard.(virtual keyboard is not the issue, main thing is that the TextInput is selected and can be added text with external keyboard)

Discussion points

• Keyboard navigation is lacking support. This maybe larger issue as well with native mobile API's.
• add support for triggers like onFocusedWithKeyboard or something similar. Or option to directly add styling when button is focused with keyboard navigation.

None of these have anything to do with on-screen-virtual keyboard to make it clear. I'm talking about physical external keyboards you can connect to your mobile devices.

Feel free to correct me if you have a solution or any other options in mind that would help. Thanks.