a11y

yevmoroz · Jan 29, 2024 · 1426c3e · 1426c3e
1 parent ce34246
commit 1426c3e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/src/features/charging-station/charging-station-details/index.tsx b/src/features/charging-station/charging-station-details/index.tsx
@@ -28,12 +28,24 @@ export const ChargingStationDetails = (props: Props) => {
     <View style={styles.container}>
       <Pressable onPress={props.onBack}>
         <View style={styles.row}>
-          <Ionicons style={styles.icon} name="arrow-back" size={32} color={styles.icon.color} />
+          <Ionicons
+            aria-label="Arrow pointing to the left"
+            style={styles.icon}
+            name="arrow-back"
+            size={32}
+            color={styles.icon.color}
+          />
           <Text style={styles.back}>go back to all</Text>
         </View>
       </Pressable>
       <View style={styles.row}>
-        <Ionicons style={styles.icon} name="location-sharp" size={32} color={styles.icon.color} />
+        <Ionicons
+          aria-label="POI"
+          style={styles.icon}
+          name="location-sharp"
+          size={32}
+          color={styles.icon.color}
+        />
         <View>
           <Text style={styles.title}>{props.item.addressInfo.title}</Text>
           <Text
@@ -50,16 +62,28 @@ export const ChargingStationDetails = (props: Props) => {
       {!props.isActive && !chargingError && (
         <Pressable onPress={startCharging}>
           <View style={styles.row}>
-            <Ionicons style={styles.icon} name="flash" size={32} color={styles.icon.color} />
+            <Ionicons
+              aria-label="Charge icon"
+              style={styles.icon}
+              name="flash"
+              size={32}
+              color={styles.icon.color}
+            />
             <View>
-              <Text style={styles.title}>Start Charging!</Text>
+              <Text style={styles.title}>Start Charging</Text>
             </View>
           </View>
         </Pressable>
       )}
       {chargingError && (
         <View style={styles.row}>
-          <Ionicons style={styles.icon} name="warning" size={32} color={styles.icon.color} />
+          <Ionicons
+            aria-label="Warning sign"
+            style={styles.icon}
+            name="warning"
+            size={32}
+            color={styles.icon.color}
+          />
           <View>
             <Text style={styles.title}>Charging is currently unavailable</Text>
           </View>

diff --git a/src/features/charging-station/charging-station-list-item/index.tsx b/src/features/charging-station/charging-station-list-item/index.tsx
@@ -23,7 +23,13 @@ export const ChargingStationListItem = (props: Props) => {
   return (
     <Pressable onPress={() => props.onPress(props.item.id)}>
       <View style={styles.listItem}>
-        <Ionicons style={styles.icon} name="location-sharp" size={32} color={styles.icon.color} />
+        <Ionicons
+          style={styles.icon}
+          aria-label="POI"
+          name="location-sharp"
+          size={32}
+          color={styles.icon.color}
+        />
         <View>
           <Text style={styles.title}>{props.item.addressInfo.title}</Text>
           <Text