fix: bonus accessibility

AtB-AS · Feb 21, 2025 · f4a7e74 · f4a7e74
1 parent 4a6bc4f
commit f4a7e74
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 40 deletions.
diff --git a/src/bonus/BonusPriceTag.tsx b/src/bonus/BonusPriceTag.tsx
@@ -15,11 +15,16 @@ export const BonusPriceTag = ({price, ...props}: Props) => {
 
   return (
     <View {...props} style={[styles.container, props.style]}>
-      <ThemeText>{price}</ThemeText>
+      <ThemeText
+        accessible={true}
+        accessibilityLabel={t(BonusProgramTexts.costA11yLabel(price))}
+      >
+        {price}
+      </ThemeText>
       <ThemeIcon
         svg={StarFill}
         size="small"
-        accessibilityHint={t(BonusProgramTexts.bonuspoints)}
+        accessibilityLabel={t(BonusProgramTexts.bonuspoints)}
       />
     </View>
   );

diff --git a/src/stacks-hierarchy/Root_TabNavigatorStack/TabNav_ProfileStack/Profile_BonusScreen.tsx b/src/stacks-hierarchy/Root_TabNavigatorStack/TabNav_ProfileStack/Profile_BonusScreen.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   ExpandableSectionItem,
   GenericSectionItem,
@@ -41,7 +41,7 @@ export const Profile_BonusScreen = () => {
   return (
     <FullScreenView
       headerProps={{
-        title: t(BonusProgramTexts.header.title),
+        title: t(BonusProgramTexts.bonusProfile.header.title),
         leftButton: {type: 'back', withIcon: true},
       }}
     >
@@ -50,17 +50,25 @@ export const Profile_BonusScreen = () => {
           <GenericSectionItem style={styles.horizontalContainer}>
             <View>
               <View style={styles.currentPointsDisplay}>
-                <ThemeText typography="body__primary--jumbo--bold">
+                <ThemeText
+                  typography="body__primary--jumbo--bold"
+                  accessibilityLabel={t(
+                    BonusProgramTexts.bonusProfile.yourBonusPointsA11yLabel(
+                      currentPoints,
+                    ),
+                  )}
+                >
                   {currentPoints}
                 </ThemeText>
                 <ThemeIcon
                   svg={StarFill}
                   size="large"
-                  accessibilityHint={t(BonusProgramTexts.bonuspoints)}
+                  accessible
+                  accessibilityLabel={t(BonusProgramTexts.bonuspoints)}
                 />
               </View>
               <ThemeText typography="body__secondary" color="secondary">
-                {t(BonusProgramTexts.yourBonusPoints)}
+                {t(BonusProgramTexts.bonusProfile.yourBonusPoints)}
               </ThemeText>
             </View>
             <ThemedCityBike />
@@ -70,11 +78,13 @@ export const Profile_BonusScreen = () => {
           <View style={styles.noAccount}>
             <MessageInfoBox
               type="warning"
-              message={t(BonusProgramTexts.noProfile)}
+              message={t(BonusProgramTexts.bonusProfile.noProfile)}
             />
           </View>
         )}
-        <ContentHeading text={t(BonusProgramTexts.spendPoints.heading)} />
+        <ContentHeading
+          text={t(BonusProgramTexts.bonusProfile.spendPoints.heading)}
+        />
         <View style={styles.bonusProductsContainer}>
           {bonusProducts?.filter(isActive).map((bonusProduct, index) => (
             <Section>
@@ -122,17 +132,19 @@ export const Profile_BonusScreen = () => {
             </Section>
           ))}
         </View>
-        <ContentHeading text={t(BonusProgramTexts.readMore.heading)} />
+        <ContentHeading
+          text={t(BonusProgramTexts.bonusProfile.readMore.heading)}
+        />
         <Section>
           <GenericSectionItem>
             <View style={styles.horizontalContainer}>
               <ThemedCityBike />
               <View style={styles.bonusProgramDescription}>
                 <ThemeText typography="body__primary--bold">
-                  {t(BonusProgramTexts.readMore.info.title)}
+                  {t(BonusProgramTexts.bonusProfile.readMore.info.title)}
                 </ThemeText>
                 <ThemeText typography="body__secondary" color="secondary">
-                  {t(BonusProgramTexts.readMore.info.description)}
+                  {t(BonusProgramTexts.bonusProfile.readMore.info.description)}
                 </ThemeText>
               </View>
             </View>

diff --git a/src/translations/screens/subscreens/BonusProgram.ts b/src/translations/screens/subscreens/BonusProgram.ts
@@ -1,35 +1,47 @@
 import {translation as _} from '../../commons';
 const BonusProgramTexts = {
   bonuspoints: _('Bonuspoeng', 'Bonus points', 'Bonuspoeng'),
-  header: {
-    title: _('Bonus', 'Bonus', 'Bonus'),
-  },
-  yourBonusPoints: _(
-    'Dine bonuspoeng',
-    'Your bonus points',
-    'Bonuspoenga dine',
-  ),
-  spendPoints: {
-    heading: _('Bruk poeng på', 'Spend points on', 'Bruk poeng på'),
-  },
-  noProfile: _(
-    'Du må logge inn for å få tilgang til Bonus.',
-    'You must log in to get access to Bonus.',
-    'Du må logga inn for å få tilgang til Bonus.',
-  ),
-  readMore: {
-    heading: _('Les mer', 'Read more', 'Les meir'),
-    info: {
-      title: _(
-        'Hvordan funker Bonus?',
-        'How does the Bonus work?',
-        'Korleis fungerer bonus?',
-      ),
-      description: _(
-        'Tjen poeng hver gang du kjøper en billett for buss eller trikk i sone A.',
-        'Earn points every time you buy a bus or tram ticket in zone A.',
-        'Ten poeng kvar gong du kjøper ein billett for buss eller trikk i sone A.',
+  costA11yLabel: (price: number) =>
+    _(`Koster ${price}`, `Costs ${price}`, `Kostar ${price}`),
+
+  bonusProfile: {
+    header: {
+      title: _('Bonus', 'Bonus', 'Bonus'),
+    },
+    yourBonusPoints: _(
+      'Dine bonuspoeng',
+      'Your bonus points',
+      'Bonuspoenga dine',
+    ),
+    yourBonusPointsA11yLabel: (bonuspoints: number) =>
+      _(
+        `Du har ${bonuspoints}`,
+        `You have ${bonuspoints}`,
+        `Du har ${bonuspoints}`,
       ),
+
+    spendPoints: {
+      heading: _('Bruk poeng på', 'Spend points on', 'Bruk poeng på'),
+    },
+    noProfile: _(
+      'Du må logge inn for å få tilgang til Bonus.',
+      'You must log in to get access to Bonus.',
+      'Du må logga inn for å få tilgang til Bonus.',
+    ),
+    readMore: {
+      heading: _('Les mer', 'Read more', 'Les meir'),
+      info: {
+        title: _(
+          'Hvordan funker Bonus?',
+          'How does the Bonus work?',
+          'Korleis fungerer bonus?',
+        ),
+        description: _(
+          'Tjen poeng hver gang du kjøper en billett for buss eller trikk i sone A.',
+          'Earn points every time you buy a bus or tram ticket in zone A.',
+          'Ten poeng kvar gong du kjøper ein billett for buss eller trikk i sone A.',
+        ),
+      },
     },
   },
   youHave: _('Du har ', 'You have ', 'Du har '),