fix(accessibility): focus map (#1390)

* fix(accessibility): focus map * feat(accessibility): fix style
SocialGouv · Sep 12, 2022 · 767111f · 767111f
1 parent 746c1f7
commit 767111f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 27 deletions.
diff --git a/front/src/components/aroundMe/aroundMeMap.component.tsx b/front/src/components/aroundMe/aroundMeMap.component.tsx
@@ -19,7 +19,7 @@ import {
   SCREEN_HEIGHT,
 } from "../../constants/platform.constants";
 import { useAccessibilityReader } from "../../hooks";
-import { Colors, Margins } from "../../styles";
+import { Colors, Margins, Paddings } from "../../styles";
 import {
   AroundMeUtils,
   KeyboardUtils,
@@ -274,6 +274,16 @@ const AroundMeMap: FC<ExtendedPropsForSimpleMap> = ({
         />
       </View>
       <View style={styles.map} onLayout={onViewMapLayout}>
+        <AroundMeMapHeader
+          headerStyle={styles.headerButtonsMapView}
+          displayMap
+          setDisplayMap={onDisplayMap}
+          relaunchSearch={onRelaunchSearch}
+          showRelaunchResearchButton={showRelaunchResearchButton}
+          setIsLoading={setIsLoading}
+          showDisplayListButton={showDisplayListButton}
+          hideDisplayListButton={isFromSimpleCarto}
+        />
         <MapView
           minZoomLevel={AroundMeConstants.MAPVIEW_MIN_ZOOM_LEVEL}
           ref={setMapViewRef}
@@ -315,16 +325,6 @@ const AroundMeMap: FC<ExtendedPropsForSimpleMap> = ({
             </Marker>
           )}
         </MapView>
-        <AroundMeMapHeader
-          headerStyle={styles.headerButtonsMapView}
-          displayMap
-          setDisplayMap={onDisplayMap}
-          relaunchSearch={onRelaunchSearch}
-          showRelaunchResearchButton={showRelaunchResearchButton}
-          setIsLoading={setIsLoading}
-          showDisplayListButton={showDisplayListButton}
-          hideDisplayListButton={isFromSimpleCarto}
-        />
         <CustomSnackbar
           isAccessibilityModeOn={isAccessibilityModeOn}
           visible={showSnackBar}
@@ -380,18 +380,19 @@ const styles = StyleSheet.create({
   headerButtonsMapView: {
     backgroundColor: "transparent",
     flexDirection: "row",
-    height: "15%",
     left: 0,
-    margin: Margins.smaller,
+    padding: Paddings.smaller,
     position: "absolute",
     right: 0,
     top: 0,
+    zIndex: 1,
   },
   mainContainer: {
     flex: 1,
   },
   map: {
     flex: 1,
+    marginTop: 1,
   },
 });
 

diff --git a/front/src/components/aroundMe/aroundMeMapHeader.component.tsx b/front/src/components/aroundMe/aroundMeMapHeader.component.tsx
@@ -76,7 +76,7 @@ const AroundMeMapHeader: FC<Props> = ({
 
   return (
     <>
-      <View style={headerStyle}>
+      <View style={[headerStyle, styles.headerBasic]}>
         <CustomButton
           buttonStyle={styles.headerButton}
           title={Labels.articleList.filters}
@@ -163,6 +163,9 @@ const styles = StyleSheet.create({
   buttonMarginTop: {
     marginTop: Margins.smaller,
   },
+  headerBasic: {
+    flexWrap: "wrap",
+  },
   headerButton: {
     backgroundColor: Colors.white,
     borderColor: Colors.primaryBlue,
@@ -177,19 +180,7 @@ const styles = StyleSheet.create({
   headerButtonsRightPartView: {
     alignItems: "flex-end",
     backgroundColor: "transparent",
-    justifyContent: "flex-end",
-    position: "absolute",
-    right: 0,
-  },
-  headerButtonsView: {
-    backgroundColor: "transparent",
-    flexDirection: "row",
-    height: "15%",
-    left: 0,
-    margin: Margins.smaller,
-    position: "absolute",
-    right: 0,
-    top: 0,
+    flexGrow: 1,
   },
 });