feat: add a11y label for price

sbb-design-systems · Oct 16, 2023 · 619f416 · 619f416
1 parent 09b3660
commit 619f416
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/sbb-timetable-row/sbb-timetable-row.tsx b/src/components/sbb-timetable-row/sbb-timetable-row.tsx
@@ -13,6 +13,7 @@ import {
   i18nNew,
   i18nOccupancy,
   i18nRealTimeInfo,
+  i18nSupersaver,
   i18nTransferProcedures,
   i18nTravelhints,
   i18nTripDuration,
@@ -233,9 +234,9 @@ export class SbbTimetableRow {
 
     const boardingText = this.boarding ? `${this.boarding.text}. ` : '';
 
-    const priceText = `${
+    const priceText = `${this.price?.isDiscount ? i18nSupersaver[this._currentLanguage] : ''} ${
       this.price?.text && this.price?.price
-        ? (this.price?.text || '') + ' ' + (this.price?.price || '') + '. '
+        ? (this.price?.text || '') + ' ' + (this.price?.price || '') + ', '
         : ''
     }`;
 
@@ -317,7 +318,11 @@ export class SbbTimetableRow {
           {this.loadingPrice && <sbb-card-badge class="sbb-loading__badge" />}
           {this.price && !this.loadingPrice && (
             <sbb-card-badge color={this.price.isDiscount ? 'charcoal' : 'white'}>
-              {this.price.isDiscount && <span>%</span>}
+              {this.price.isDiscount && (
+                <span aria-hidden="true">
+                  %<span class="sbb-screenreaderonly">{i18nSupersaver[this._currentLanguage]}</span>
+                </span>
+              )}
               {this.price.text && <span>{this.price.text}</span>}
               {this.price.price && <span>{this.price.price}</span>}
             </sbb-card-badge>

diff --git a/src/global/i18n.ts b/src/global/i18n.ts
@@ -369,6 +369,13 @@ export const i18nFromPier: Record<string, Record<string, string>> = {
   },
 };
 
+export const i18nSupersaver: Record<string, string> = {
+  de: 'Sparbillette',
+  en: 'Supersaver tickets',
+  fr: 'Billets dégriffés',
+  it: 'Biglietti risparmio',
+};
+
 export const i18nNone: Record<string, string> = {
   de: 'Keine',
   en: 'None',