made the tripDetailsection more accessible (#5028)

* made the tripDetailsection more accessible * added a11y label * updated translations * updated translations
AtB-AS · Feb 21, 2025 · 226ca2c · 226ca2c
1 parent 0a2118c
commit 226ca2c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 20 deletions.
diff --git a/src/mobility/components/ShmoTripDetailsSectionItem.tsx b/src/mobility/components/ShmoTripDetailsSectionItem.tsx
@@ -1,4 +1,4 @@
-import {useTranslation} from '@atb/translations';
+import {dictionary, useTranslation} from '@atb/translations';
 import {View} from 'react-native';
 import {StyleSheet} from '@atb/theme';
 import {Duration} from '@atb/assets/svg/mono-icons/mobility';
@@ -30,23 +30,47 @@ export const ShmoTripDetailsSectionItem = ({
   const timeUsed = getTimeBetweenFormatted(startDateTime, endDateTime);
   return (
     <View style={[topContainer, styles.container]}>
-      {withHeader && (
-        <View style={styles.heading}>
-          <ThemeText typography="body__secondary" color="secondary">
+      <View
+        style={styles.leftSection}
+        accessible={true}
+        accessibilityLabel={`${t(MobilityTexts.time)} ${timeUsed} ${t(
+          dictionary.date.units.long.minutes,
+        )}`}
+      >
+        {withHeader && (
+          <ThemeText
+            typography="body__secondary"
+            color="secondary"
+            accessibilityRole="header"
+          >
             {t(MobilityTexts.time)}
           </ThemeText>
-          <ThemeText typography="body__secondary" color="secondary">
-            {t(MobilityTexts.totalCost)}
-          </ThemeText>
-        </View>
-      )}
-
-      <View style={styles.content}>
+        )}
         <View style={styles.timeWrapper}>
           <ThemeIcon svg={Duration} color="primary" size="large" />
           <ThemeText typography="body__primary--big">{timeUsed}</ThemeText>
         </View>
-        <ThemeText typography="body__primary--big">{totalAmount} kr</ThemeText>
+      </View>
+
+      <View
+        style={styles.rightSection}
+        accessible={true}
+        accessibilityLabel={`${t(MobilityTexts.totalCost)} ${totalAmount} ${t(
+          dictionary.currency.nok.long,
+        )}`}
+      >
+        {withHeader && (
+          <ThemeText
+            typography="body__secondary"
+            color="secondary"
+            accessibilityRole="header"
+          >
+            {t(MobilityTexts.totalCost)}
+          </ThemeText>
+        )}
+        <ThemeText typography="body__primary--big">
+          {totalAmount} {t(dictionary.currency.nok.short)}
+        </ThemeText>
       </View>
     </View>
   );
@@ -55,16 +79,17 @@ export const ShmoTripDetailsSectionItem = ({
 const useStyles = StyleSheet.createThemeHook((theme) => ({
   container: {
     flex: 1,
-    flexDirection: 'column',
-  },
-  heading: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: theme.spacing.medium,
   },
-  content: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+  leftSection: {
+    flexDirection: 'column',
+    gap: theme.spacing.medium,
+  },
+  rightSection: {
+    flexDirection: 'column',
+    gap: theme.spacing.medium,
+    alignItems: 'flex-end',
   },
   timeWrapper: {
     flexDirection: 'row',

diff --git a/src/translations/dictionary.ts b/src/translations/dictionary.ts
@@ -73,7 +73,10 @@ const dictionary = {
         second: _('sek', 'sec', `s`),
         ms: _('ms', 'msec', `ms`),
       },
-      long: {},
+      long: {
+        minutes: _('minutter', 'minutes', `minuttar`),
+        minute: _('minutt', 'minute', `minutt`),
+      },
     },
     relativeDayNames: (daysDifference: number) => {
       switch (daysDifference) {
@@ -109,6 +112,12 @@ const dictionary = {
     km: _('km', 'km', `km`),
     m: _('m', 'm', `m`),
   },
+  currency: {
+    nok: {
+      short: _('kr', 'kr', `kr`),
+      long: _('kroner', 'kroner', `kroner`),
+    },
+  },
   messageActions: {
     positiveButton: _('OK', 'OK', 'OK'),
   },