feat: Header title first focus (#651)

* fix: Accessible header + header content reorder * fix: reorder + accessible header title for animated header * Remove unused imports
AtB-AS · Nov 6, 2020 · e453a6a · e453a6a
1 parent 222c2b0
commit e453a6a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/ScreenHeader/animated-header.tsx b/src/ScreenHeader/animated-header.tsx
@@ -50,7 +50,6 @@ const AnimatedScreenHeader: React.FC<ScreenHeaderProps> = ({
 
   return (
     <View style={style.container} {...props}>
-      <View style={style.iconContainerLeft}>{leftIcon}</View>
       <View
         accessible={true}
         accessibilityRole="header"
@@ -62,10 +61,13 @@ const AnimatedScreenHeader: React.FC<ScreenHeaderProps> = ({
             {transform: [{translateY: titleOffset}]},
           ]}
         >
-          <ThemeText type="paragraphHeadline">{title}</ThemeText>
+          <View accessible={true} accessibilityRole="header">
+            <ThemeText type="paragraphHeadline">{title}</ThemeText>
+          </View>
         </Animated.View>
         {altTitle}
       </View>
+      <View style={style.iconContainerLeft}>{leftIcon}</View>
       <View style={style.iconContainerRight}>{rightIcon}</View>
     </View>
   );

diff --git a/src/ScreenHeader/index.tsx b/src/ScreenHeader/index.tsx
@@ -24,8 +24,10 @@ const ScreenHeader: React.FC<ScreenHeaderProps> = ({
 
   return (
     <View style={[css.container, style]}>
+      <View accessible={true} accessibilityRole="header">
+        <ThemeText type="paragraphHeadline">{title}</ThemeText>
+      </View>
       <View style={css.iconContainerLeft}>{leftIcon}</View>
-      <ThemeText type="paragraphHeadline">{title}</ThemeText>
       <View style={css.iconContainerRight}>{rightIcon}</View>
     </View>
   );
@@ -37,14 +39,14 @@ const useHeaderStyle = StyleSheet.createThemeHook((theme) => ({
     alignItems: 'center',
     justifyContent: 'center',
     padding: theme.spacings.medium,
-    height: 64,
+    minHeight: 64,
   },
   iconContainerLeft: {
     position: 'absolute',
-    left: 12,
+    left: theme.spacings.medium,
   },
   iconContainerRight: {
     position: 'absolute',
-    right: 12,
+    right: theme.spacings.medium,
   },
 }));