react-native-root-toast
react-native-root-toast copied to clipboard
Accessibility
I added accessibility props and tested it on expo web and expo go client on iOS.
Does this work for Android? I tried the same, but the accessibilityRole doesn't seem to be applied.
Hey @thidasapankaja this is just a pull request and isn't yet applied to the package. Did you pull my branch?
@maki3000 Yes, I did pull your branch and tried it. The role doesn't seem to be applied ( meaning, the toast message not being read by TalkBack automatically)
@thidasapankaja Then I may did something wrong in my pull-request, sorry! Could you post, how you call your toast message with your settings?
Do you use TypeScript?
@maki3000 I also couldn't figure out. label and hint are being applied. Just not being read by talkback even the accessibilityRole
is alert
export const toastSuccess = (
message,
accessibilityLabel,
accessibilityHint,
) => {
if (message && message !== '') {
Toast.show(message, {
duration: Toast.durations.SHORT,
position: -60,
shadow: true,
animation: true,
hideOnPress: true,
backgroundColor: '#36e0b7',
shadowColor: 'rgba(0, 0, 0, 0.05)',
textColor: '#fff',
opacity: 0.8,
delay: 0,
accessible: true,
accessibilityLabel: accessibilityLabel || message,
accessibilityHint: accessibilityHint || message,
accessibilityRole: 'alert',
});
}
};
@thidasapankaja Sorry for the late answer. I guess, it has to do with how the toast message is appearing. The package makes use of RootSiblings
of which I don't have any clue on how it works. This may be the reason, why it's not read by talkback.
Nice ! This should be merged 👍
Try
diff --git a/node_modules/react-native-root-toast/lib/ToastContainer.js b/node_modules/react-native-root-toast/lib/ToastContainer.js
index e18a707..6ecfedb 100644
--- a/node_modules/react-native-root-toast/lib/ToastContainer.js
+++ b/node_modules/react-native-root-toast/lib/ToastContainer.js
@@ -10,7 +10,9 @@ import {
Dimensions,
TouchableWithoutFeedback,
Easing,
- Keyboard
+ Keyboard,
+ AccessibilityInfo,
+ findNodeHandle
} from 'react-native';
import { ViewPropTypes, TextPropTypes } from 'deprecated-react-native-prop-types';
const TOAST_MAX_WIDTH = 0.8;
@@ -164,6 +166,13 @@ class ToastContainer extends Component {
if (!this._animating) {
clearTimeout(this._hideTimeout);
this._animating = true;
+
+ // voice over focus
+ const focusPoint = findNodeHandle(this._root);
+ if (focusPoint) {
+ AccessibilityInfo.setAccessibilityFocus(focusPoint);
+ }
+
this._root.setNativeProps({
pointerEvents: 'auto'
});