Accessibility

[maki3000]

I added accessibility props and tested it on expo web and expo go client on iOS.

[thidasapankaja]

Does this work for Android? I tried the same, but the accessibilityRole doesn't seem to be applied.

[maki3000]

Hey @thidasapankaja this is just a pull request and isn't yet applied to the package. Did you pull my branch?

[thidasapankaja]

@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)

[maki3000]

@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?

[thidasapankaja]

@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',
    });
  }
};

[maki3000]

@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.

[seba9999]

Nice ! This should be merged 👍

[milkmouth]

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'
             });