From 855df130f33fdc742a9de800c6d98de6167853c1 Mon Sep 17 00:00:00 2001
From: Maki Mikkelson <maki.mikkelson@gmail.com>
Date: Wed, 10 Feb 2021 18:49:59 +0100
Subject: [PATCH 1/3] add accessibility props

---
 lib/ToastContainer.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js
index a645d4d..726b2ba 100644
--- a/lib/ToastContainer.js
+++ b/lib/ToastContainer.js
@@ -81,7 +81,11 @@ class ToastContainer extends Component {
         onHide: PropTypes.func,
         onHidden: PropTypes.func,
         onShow: PropTypes.func,
-        onShown: PropTypes.func
+        onShown: PropTypes.func,
+        accessible: PropTypes.bool,
+        accessibilityLabel: PropTypes.string,
+        accessibilityHint: PropTypes.string,
+        accessibilityRole: PropTypes.string
     };
 
     static defaultProps = {
@@ -93,7 +97,11 @@ class ToastContainer extends Component {
         opacity: 0.8,
         delay: 0,
         hideOnPress: true,
-        keyboardAvoiding: true
+        keyboardAvoiding: true,
+        accessible: true,
+        accessibilityLabel: undefined,
+        accessibilityHint: undefined,
+        accessibilityRole: "alert"
     };
 
     constructor() {
@@ -194,11 +202,11 @@ class ToastContainer extends Component {
                     pointerEvents: 'none'
                 });
             }
-            
+
             if (this.props.onHide) {
                 this.props.onHide(this.props.siblingManager);
             }
-            
+
             Animated.timing(this.state.opacity, {
                 toValue: 0,
                 duration: this.props.animation ? TOAST_ANIMATION_DURATION : 0,
@@ -233,6 +241,10 @@ class ToastContainer extends Component {
                 position
             ]}
             pointerEvents="box-none"
+            accessible={this.props.accessible ? this.props.accessible : true}
+            accessibilityLabel={this.props.accessibilityLabel ? this.props.accessibilityLabel : undefined}
+            accessibilityHint={this.props.accessibilityHint ? this.props.accessibilityHint : undefined}
+            accessibilityRole={this.props.accessibilityRole ? this.props.accessibilityRole : "alert"}
         >
             <TouchableWithoutFeedback
                 onPress={() => {

From 062affe477e7dc0bea36ed8ed8db9d3cd958c916 Mon Sep 17 00:00:00 2001
From: Maki Mikkelson <maki.mikkelson@gmail.com>
Date: Wed, 10 Feb 2021 19:05:56 +0100
Subject: [PATCH 2/3] declare new added accessibility props

---
 index.d.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 88c2647..7c93779 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -25,7 +25,11 @@ declare module "react-native-root-toast"{
         onHidden?: Function,
         onShow?: Function,
         onShown?: Function,
-        onPress?: Function
+        onPress?: Function,
+        accessible?: boolean,
+        accessibilityLabel?: string,
+        accessibilityHint?: string,
+        accessibilityRole?: string
     }
 
     export interface ToastProps extends ToastOptions,ReactNative.ViewProperties{

From f036933368e0932a4c5cf5f1bdd5f24df07f9d7e Mon Sep 17 00:00:00 2001
From: Ly Nguyen <ly@getmaple.ca>
Date: Tue, 22 Jun 2021 09:02:58 -0400
Subject: [PATCH 3/3] treat container as primary a11y view

---
 lib/Toast.js          |   3 --
 lib/ToastContainer.js | 100 ++++++++++++++++++++++++++----------------
 2 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/lib/Toast.js b/lib/Toast.js
index f765306..9b78590 100644
--- a/lib/Toast.js
+++ b/lib/Toast.js
@@ -1,9 +1,6 @@
 import React, {
     Component,
 } from 'react';
-import {
-    View
-} from 'react-native';
 import RootSiblings from 'react-native-root-siblings';
 import ToastContainer, {positions, durations} from './ToastContainer';
 
diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js
index 726b2ba..8fa84af 100644
--- a/lib/ToastContainer.js
+++ b/lib/ToastContainer.js
@@ -215,12 +215,18 @@ class ToastContainer extends Component {
             }).start(({finished}) => {
                 if (finished) {
                     this._animating = false;
+                    this.setState({ visible: false });
                     this.props.onHidden && this.props.onHidden(this.props.siblingManager);
                 }
             });
         }
     };
 
+    onHide = () => {
+        typeof this.props.onPress === 'function' ? this.props.onPress() : null;
+        this.props.hideOnPress ? this._hide() : null;
+    }
+
     render() {
         let {props} =  this;
         const { windowWidth } = this.state;
@@ -235,48 +241,64 @@ class ToastContainer extends Component {
             bottom: keyboardHeight
         };
 
-        return (this.state.visible || this._animating) ? <View
-            style={[
-                styles.defaultStyle,
-                position
-            ]}
-            pointerEvents="box-none"
-            accessible={this.props.accessible ? this.props.accessible : true}
-            accessibilityLabel={this.props.accessibilityLabel ? this.props.accessibilityLabel : undefined}
-            accessibilityHint={this.props.accessibilityHint ? this.props.accessibilityHint : undefined}
-            accessibilityRole={this.props.accessibilityRole ? this.props.accessibilityRole : "alert"}
-        >
-            <TouchableWithoutFeedback
-                onPress={() => {
-                  typeof this.props.onPress === 'function' ? this.props.onPress() : null
-                  this.props.hideOnPress ? this._hide() : null
+        return (this.state.visible || this._animating) ? (
+            <View
+                style={[
+                    styles.defaultStyle,
+                    position
+                ]}
+                pointerEvents="box-none"
+                accessibilityLiveRegion='polite'
+                accessibilityActions={[
+                    {
+                        name: 'activate',
+                        label: this.props.accessibilityActionLabel
+                            ? this.props.accessibilityActionLabel
+                            : undefined,
+                    },
+                ]}
+                onAccessibilityAction={event => {
+                    switch (event.nativeEvent.actionName) {
+                        case 'activate':
+                            this.onHide();
+                            break;
+                        default:
+                            break;
+                    }
                 }}
+                accessibilityLabel={this.props.accessibilityLabel ? this.props.accessibilityLabel : undefined}
+                accessibilityHint={this.props.accessibilityHint ? this.props.accessibilityHint : undefined}
+                accessibilityRole={this.props.accessibilityRole ? this.props.accessibilityRole : "alert"}
             >
-                <Animated.View
-                    style={[
-                        styles.containerStyle,
-                        { marginHorizontal: windowWidth * ((1 - TOAST_MAX_WIDTH) / 2) },
-                        props.containerStyle,
-                        props.backgroundColor && {backgroundColor: props.backgroundColor},
-                        {
-                            opacity: this.state.opacity
-                        },
-                        props.shadow && styles.shadowStyle,
-                        props.shadowColor && {shadowColor: props.shadowColor}
-                    ]}
-                    pointerEvents="none"
-                    ref={ele => this._root = ele}
+                <TouchableWithoutFeedback
+                    onPress={this.onHide}
                 >
-                    <Text style={[
-                        styles.textStyle,
-                        props.textStyle,
-                        props.textColor && {color: props.textColor}
-                    ]}>
-                        {this.props.children}
-                    </Text>
-                </Animated.View>
-            </TouchableWithoutFeedback>
-        </View> : null;
+                    <Animated.View
+                        style={[
+                            styles.containerStyle,
+                            { marginHorizontal: windowWidth * ((1 - TOAST_MAX_WIDTH) / 2) },
+                            props.containerStyle,
+                            props.backgroundColor && {backgroundColor: props.backgroundColor},
+                            {
+                                opacity: this.state.opacity
+                            },
+                            props.shadow && styles.shadowStyle,
+                            props.shadowColor && {shadowColor: props.shadowColor}
+                        ]}
+                        pointerEvents="none"
+                        ref={ele => this._root = ele}
+                    >
+                        <Text style={[
+                            styles.textStyle,
+                            props.textStyle,
+                            props.textColor && {color: props.textColor}
+                        ]}>
+                            {this.props.children}
+                        </Text>
+                    </Animated.View>
+                </TouchableWithoutFeedback>
+            </View>
+        ) : null;
     }
 }