accessibilityRole="link" is not focusable

The problem An element with accessibilityRole="link", like <TouchableOpacity>, is not focusable.

<TouchableOpacity accessibilityRole="link" onPress={() => console.log("navigate")}>
  <Text>Focus Me!</Text>
</TouchableOpacity>

How to reproduce

Simplified test case: https://codesandbox.io/s/w2n7514m9l

Steps to reproduce:

1. Focus the first <TouchableOpacity accessibilityRole="button">
2. Press tab.

Expected behavior

The focused element should be the second <TouchableOpacity accessibilityRole="link"> but instead focus is given to the third <TouchableOpacity accessibilityRole="button">.

Environment

• Browser: Chrome
• OS: MacOS

Workaround

For now, my workaround is to use:

<TouchableOpacity
  accessibilityComponentType="a"
  accessible={true}
  onPress={() => console.log("navigate")}
>
  <Text>Focus Me!</Text>
</TouchableOpacity>

Fix?

Here:

https://github.com/necolas/react-native-web/blob/eb7706260813f843a9d7d7ad90e2d612d11f867f/packages/react-native-web/src/modules/createDOMProps/index.js#L123-L125

It’s assumed that <a> is focusable by default. Based on basic testing that might not be true? Not sure how this is specced.

[calebmer]

So one should not use accessibilityRole="link" if you want a focusable element? Maybe this should be documented?

[rveruna]

Yes, I just ‘faked’ the href, as the linking works with or without it. and no matter what you put in it