Commit 602a2d2
Summary:
This is my PR 2 out of 3 to improve accessibility on iOS. If you're reading this, please also have a look at facebook#54131, this is a critical race condition bug that basically makes accessibility extremely hard to handle on large apps.
Fix for facebook#53496: on the new architecture, any accessibility label is ignored and only the "name" is read by VoiceOver. We want to use name as an "action id", and label as the translatable value. While android has a id/label system for actions, iOS doesn't so my implementation, inspired by the old paper architecture, maps labels to name. Native iOS will only see the labels but the JS side will properly receive names when an action is executed. I believe this is the correct way of handling this. Another thing we could do is just deprecate "label" and expect name to be in the correct language, but I do not like that.
## Changelog:
[IOS][FIXED] - Accessibility actions labels are not read by VoiceOver
Pull Request resolved: facebook#54286
Test Plan:
Open RN-Tester, go to Accessibility -> Accessibility Action Examples, enable VoiceOver and select "This view supports many actions". Now scroll up fast to select the actions.
On the current implementation you will hear VoiceOver say "copy", then "cut", then "paste". It now says "cut label", "copy label", "paste label".
As a reference, here's how this view is implemented:
```jsx
<View
accessible={true}
accessibilityActions={[
{name: 'cut', label: 'cut label'},
{name: 'copy', label: 'copy label'},
{name: 'paste', label: 'paste label'},
]}
onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
break;
case 'copy':
Alert.alert('Alert', 'copy action success');
break;
case 'paste':
Alert.alert('Alert', 'paste action success');
break;
}
}}>
<RNTesterText>This view supports many actions.</RNTesterText>
</View>
```
Reviewed By: cipolleschi
Differential Revision: D87766483
Pulled By: javache
fbshipit-source-id: a979f0126efce4b87c6d823519d512229fb4118e
1 parent d0e9b9c commit 602a2d2
File tree
1 file changed
+19
-2
lines changed- packages/react-native/React/Fabric/Mounting/ComponentViews/View
1 file changed
+19
-2
lines changedLines changed: 19 additions & 2 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1497 | 1497 | | |
1498 | 1498 | | |
1499 | 1499 | | |
| 1500 | + | |
| 1501 | + | |
| 1502 | + | |
| 1503 | + | |
| 1504 | + | |
| 1505 | + | |
| 1506 | + | |
1500 | 1507 | | |
1501 | | - | |
| 1508 | + | |
1502 | 1509 | | |
1503 | 1510 | | |
1504 | 1511 | | |
| |||
1553 | 1560 | | |
1554 | 1561 | | |
1555 | 1562 | | |
1556 | | - | |
| 1563 | + | |
| 1564 | + | |
| 1565 | + | |
| 1566 | + | |
| 1567 | + | |
| 1568 | + | |
| 1569 | + | |
| 1570 | + | |
| 1571 | + | |
| 1572 | + | |
| 1573 | + | |
1557 | 1574 | | |
1558 | 1575 | | |
1559 | 1576 | | |
| |||
0 commit comments