refactor: address some deprecations warnings take 1/n

[ecreeth]

1. Replaced accessibilityRole with role
2. Replaced accessibilityLabel with aria-label
3. Replaced returnKeyType with enterKeyHint
4. Replaced textAlignVertical with verticalAlign
5. Replaced resizeMode with contentFit
6. use id instead of testID for UserBanner
7. Replaced search with searchbox for role prop
8. use id instead of nativeId
9. move pointerEvents prop to pointerEvents style
10. replaced accessibilityLabelledBy with aria-labelledby

See react-native-web v0.19 deprecations for more information.

NOTE: : react-native-a11y is not aware of these accessibility props changes, if you try to run yarn lint --fix is going to add the accessibility* props even though we use aria-* and role props.

[ecreeth]

I'm planning to remove Touchable* components and use Pressable in another PR. Let me know if that is ok :)

[ecreeth]

This is added automatically by lint-staged

[gaearon]

NOTE: : react-native-a11y is not aware of these accessibility props changes, if you try to run yarn lint --fix is going to add the accessibility* props even though we use aria-* and role props.

What's your plan for this?

I'm planning to remove Touchable* components and use Pressable in another PR. Let me know if that is ok :)

Do these have semantic differences (e.g. different tap handling logic)? If yes we'd need to make sure we don't regress any tapping behaviors. We already have some weirdness with gestures. So this needs to be tested with real devices.

[ecreeth]

What's your plan for this?

The only way for now is to patch react-native-a11y (I don't know if that is ok). The repo hasn't been updated since January. There's a PR FormidableLabs/eslint-plugin-react-native-a11y#150 that try to address the issue, but hasn't gained any response.

Do these have semantic differences (e.g. different tap handling logic)? If yes we'd need to make sure we don't regress any tapping behaviors. We already have some weirdness with gestures. So this needs to be tested with real devices.

This is quite difficult to answer. Both have different implementations trying to archive the same thing, but Pressable is the modern recommended way (it can handle onHover*, delayHover*, delayLongPress).

As you said, this need to be tested in physical devices. I'll provide more info once is implemented 🤞

[pfrazee]

What's the situation with RN's use of accessibility* props vs aria-*? I couldn't find anything definitive about the difference, or why RNW deprecated the former

[ecreeth]

What's the situation with RN's use of accessibility* props vs aria-*?

They changed the name match web standard. accessibility* is deprecated in RNW but no in RN (should be in the future)

I couldn't find anything definitive about the difference, or why RNW deprecated the former

Here is the text: Reduce API fragmentation across platforms

[ecreeth]

🚁 I'm going to close this PR for now. I'm going to split it into small ones.