Fix TalkBack

cds-snc · Jul 6, 2020 · c4180d9 · c4180d9
1 parent b04402c
commit c4180d9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -71,12 +71,20 @@ const BottomSheetInternal = (
       <SheetContentsContainer>
         <>
           <View
+            style={styles.collapseContent}
             accessibilityElementsHidden={isExpanded}
             importantForAccessibility={isExpanded ? 'no-hide-descendants' : undefined}
+            pointerEvents={isExpanded ? 'none' : undefined}
           >
             {collapsedComponentWrapper}
           </View>
-          <View pointerEvents={isExpanded ? undefined : 'none'}>{expandedComponentWrapper}</View>
+          <View
+            pointerEvents={isExpanded ? undefined : 'none'}
+            accessibilityElementsHidden={!isExpanded}
+            importantForAccessibility={isExpanded ? undefined : 'no-hide-descendants'}
+          >
+            {expandedComponentWrapper}
+          </View>
         </>
       </SheetContentsContainer>
     );
@@ -106,6 +114,10 @@ const styles = StyleSheet.create({
   spacer: {
     marginBottom: -18,
   },
+  collapseContent: {
+    position: 'absolute',
+    width: '100%',
+  },
 });
 
 export const BottomSheet = forwardRef(BottomSheetInternal);
diff --git a/src/screens/home/views/CollapsedOverlayView.tsx b/src/screens/home/views/CollapsedOverlayView.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {TouchableHighlight, View, StyleSheet} from 'react-native';
+import {TouchableOpacity, View, StyleSheet} from 'react-native';
 import Animated, {pow} from 'react-native-reanimated';
 import {Box, Text, BottomSheetBehavior, Icon} from 'components';
 import {useI18n} from '@shopify/react-i18n';
@@ -22,12 +22,12 @@ export const CollapsedOverlayView = ({status, notificationWarning, bottomSheetBe
   }, [notificationWarning, bottomSheetBehavior]);
 
   return (
-    <TouchableHighlight onPress={bottomSheetBehavior.expand}>
-      <Animated.View style={{...styles.collapseContent, opacity: pow(bottomSheetBehavior.callbackNode, 2)}}>
-        <View style={styles.collapseContentHandleBar}>
-          <Icon name="sheet-handle-bar" size={36} />
-        </View>
+    <TouchableOpacity onPress={bottomSheetBehavior.expand}>
+      <Animated.View style={{opacity: pow(bottomSheetBehavior.callbackNode, 2)}}>
         <View style={styles.content}>
+          <View style={styles.collapseContentHandleBar}>
+            <Icon name="sheet-handle-bar" size={36} />
+          </View>
           <Box>
             <Box marginBottom="m">
               <StatusHeaderView enabled={status === SystemStatus.Active} />
@@ -63,17 +63,14 @@ export const CollapsedOverlayView = ({status, notificationWarning, bottomSheetBe
           </Box>
         </View>
       </Animated.View>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   content: {
-    marginTop: 10,
-  },
-  collapseContent: {
-    position: 'absolute',
-    width: '100%',
+    paddingTop: 10,
+    paddingBottom: 10,
   },
   collapseContentHandleBar: {
     position: 'absolute',

diff --git a/src/screens/home/views/OverlayView.tsx b/src/screens/home/views/OverlayView.tsx
@@ -140,6 +140,9 @@ export const OverlayView = ({
     <Animated.View style={{opacity: abs(sub(bottomSheetBehavior.callbackNode, 1))}}>
       <View style={styles.content}>
         <Box maxWidth={maxWidth}>
+          <Box marginBottom="s">
+            <StatusHeaderView enabled={status === SystemStatus.Active} />
+          </Box>
           <View style={styles.collapseContentHandleBar}>
             <TouchableOpacity
               onPress={bottomSheetBehavior.collapse}
@@ -150,9 +153,6 @@ export const OverlayView = ({
               <Icon name="sheet-handle-bar-close" size={36} />
             </TouchableOpacity>
           </View>
-          <Box marginBottom="s">
-            <StatusHeaderView enabled={status === SystemStatus.Active} />
-          </Box>
           <Box marginBottom="m" marginTop="s" marginHorizontal="m">
             <ShareDiagnosisCode i18n={i18n} />
           </Box>
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
     top: -32,
   },
   collapseButton: {
-    height: 36,
+    height: 48,
     width: '100%',
     alignItems: 'center',
     justifyContent: 'flex-start',