fix(accessibility): label puce (#1452)

* fix(accesibility): label puce * fix(accessibility): puce politique de conf
SocialGouv · Oct 11, 2022 · ef6202e · ef6202e
1 parent 8bcddf3
commit ef6202e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/front/src/components/article/links.component.tsx b/front/src/components/article/links.component.tsx
@@ -34,19 +34,18 @@ const Links: FC<Props> = ({ linksArray }) => {
       <SubTitle title={Labels.article.learnMoreAboutIt} />
       <View style={styles.linksContainer}>
         {_.filter(linksArray, "label").map((item, index) => (
-          <ListItem.Content key={index} style={[styles.linkContainer]}>
-            <SecondaryText
-              style={styles.dot}
-              importantForAccessibility="no"
-              accessibilityElementsHidden
-              accessible={false}
-            >
+          <ListItem.Content
+            key={index}
+            style={[styles.linkContainer]}
+            accessibilityRole="tab"
+          >
+            <SecondaryText style={styles.dot} accessibilityLabel="Puces">
               {SpecialChars.blackLargeCircle}
             </SecondaryText>
             <SecondaryText
-              accessibilityRole="link"
               style={styles.link}
               onPress={goToUrl(item.url)}
+              accessibilityRole="link"
             >
               {item.label}
             </SecondaryText>
@@ -60,7 +59,7 @@ const Links: FC<Props> = ({ linksArray }) => {
 const styles = StyleSheet.create({
   dot: {
     color: Colors.primaryBlue,
-    fontSize: Sizes.xxxxxs,
+    fontSize: Sizes.xxxxs,
     lineHeight: Sizes.lg,
     textAlignVertical: "top",
   },

diff --git a/front/src/components/html/li.component.tsx b/front/src/components/html/li.component.tsx
@@ -1,19 +1,38 @@
 import * as React from "react";
 import { StyleSheet } from "react-native";
 
-import { Paddings } from "../../styles";
+import SpecialChars from "../../constants/specialChars";
+import { Colors, Margins, Paddings, Sizes } from "../../styles";
 import type { TextProps } from "../baseComponents";
-import { SecondaryText } from "../baseComponents";
+import { SecondaryText, View } from "../baseComponents";
 
 const Li: React.FC<TextProps> = (props) => {
   const newProps = {
     ...props,
     children: `${props.children}`,
   };
-  return <SecondaryText {...newProps} style={[styles.li, props.style]} />;
+  return (
+    <View style={styles.content}>
+      <SecondaryText style={styles.dot} accessibilityLabel="Puces">
+        {SpecialChars.blackLargeCircle}
+      </SecondaryText>
+      <SecondaryText {...newProps} style={[styles.li, props.style]} />
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
+  content: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  dot: {
+    color: Colors.primaryBlue,
+    fontSize: Sizes.xxxxs,
+    lineHeight: Sizes.lg,
+    marginRight: Margins.default,
+    textAlignVertical: "top",
+  },
   li: {
     paddingVertical: Paddings.smallest,
   },

diff --git a/front/src/utils/aroundMe/aroundMe.util.ts b/front/src/utils/aroundMe/aroundMe.util.ts
@@ -26,7 +26,7 @@ export const getPostalCodeCoords = async (
 
     return newCoords;
   } catch (error: unknown) {
-    console.log(error);
+    console.warn(error);
     return undefined;
   }
 };