fix(calendar): add translations for disabled dates (#2450)

ing-bank · Jan 21, 2025 · 81e2a1d · 81e2a1d
1 parent dd59812
commit 81e2a1d
Show file tree

Hide file tree

Showing 18 changed files with 169 additions and 14 deletions.
diff --git a/.changeset/nine-keys-matter.md b/.changeset/nine-keys-matter.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[calendar] add translations for an information message for screen reader users when a date is disabled
diff --git a/packages/ui/components/calendar/src/LionCalendar.js b/packages/ui/components/calendar/src/LionCalendar.js
@@ -658,25 +658,16 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.ariaCurrent = day.today ? 'date' : undefined;
     day.disabledInfo = '';
 
+    if (day.disabled) {
+      day.disabledInfo = `${this.msgLit(`lion-calendar:defaultDisabledDate`)}`;
+    }
     if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Earliest date to select is ${
-        this.__getSelectableDateRange().earliestSelectableDate
-      }. Please select another date.`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:beforeDisabledDate`, { params: this.__getSelectableDateRange().earliestSelectableDate })}`;
     }
-
     if (this.maxDate && normalizeDateTime(day.date) > normalizeDateTime(this.maxDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Latest date to select is ${
-        this.__getSelectableDateRange().latestSelectableDate
-      }. Please select another date.`;
-    }
-
-    if (day.disabled) {
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Please select another date`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:afterDisabledDate`, { params: this.__getSelectableDateRange().latestSelectableDate })}`;
     }
 
     return this.dayPreprocessor(day);

diff --git a/packages/ui/components/calendar/test/lion-calendar.test.js b/packages/ui/components/calendar/test/lion-calendar.test.js
@@ -896,6 +896,94 @@ describe('<lion-calendar>', () => {
             'Next year, December 2001',
           );
         });
+
+        it('disables a date with disableDates function provide a correct message', async () => {
+          /** @param {Date} d */
+          const disable15th = d => d.getDate() === 15;
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/01')}"
+              .disableDates=${disable15th}
+            ></lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(15).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(15).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                15
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days before "minDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .minDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(1).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(1).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                1
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Earliest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days after "maxDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .maxDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(30).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(30).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                30
+              </span>
+              <span class="u-sr-only">
+                December 2000 Saturday This date is unavailable. Latest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
       });
     });
   });

diff --git a/packages/ui/components/calendar/translations/bg.js b/packages/ui/components/calendar/translations/bg.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предишен месец',
   nextFullYear: 'Следващ година',
   previousFullYear: 'Предишен година',
+  defaultDisabledDate: 'Тази дата не е налична. Моля, изберете друга дата.',
+  beforeDisabledDate:
+    'Тази дата не е налична. Най-ранната налична да е {params}. Моля, изберете друга дата.',
+  afterDisabledDate:
+    'Тази дата не е налична. Най-късната налична дата е {params}. Моля, изберете друга дата.',
 };
diff --git a/packages/ui/components/calendar/translations/cs.js b/packages/ui/components/calendar/translations/cs.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Předchozí měsíc',
   nextFullYear: 'Příští rok',
   previousFullYear: 'Předchozí rok',
+  defaultDisabledDate: 'Toto datum není k dispozici. Vyberte jiné datum.',
+  beforeDisabledDate:
+    'Toto datum není k dispozici. Nejbližší dostupné datum je {params}. Vyberte jiné datum.',
+  afterDisabledDate:
+    'Toto datum není k dispozici. Poslední dostupné datum je {params}. Vyberte jiné datum.',
 };
diff --git a/packages/ui/components/calendar/translations/de.js b/packages/ui/components/calendar/translations/de.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorheriger Monat',
   nextFullYear: 'Nächstes Jahr',
   previousFullYear: 'Vorheriges Jahr',
+  defaultDisabledDate: 'Dieses Datum ist nicht verfügbar. Bitte wählen Sie ein anderes Datum aus.',
+  beforeDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das früheste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
+  afterDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das späteste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
 };
diff --git a/packages/ui/components/calendar/translations/en.js b/packages/ui/components/calendar/translations/en.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Previous month',
   nextFullYear: 'Next year',
   previousFullYear: 'Previous year',
+  defaultDisabledDate: 'This date is unavailable. Please choose another date.',
+  beforeDisabledDate:
+    'This date is unavailable. Earliest available date is {params}. Please choose another date.',
+  afterDisabledDate:
+    'This date is unavailable. Latest available date is {params}. Please choose another date.',
 };
diff --git a/packages/ui/components/calendar/translations/es.js b/packages/ui/components/calendar/translations/es.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mes anterior',
   nextFullYear: 'Año siguiente',
   previousFullYear: 'Año anterior',
+  defaultDisabledDate: 'Esta fecha no está disponible. Elija otra.',
+  beforeDisabledDate:
+    'Esta fecha no está disponible. La fecha más próxima disponible es {params}. Elija otra.',
+  afterDisabledDate:
+    'Esta fecha no está disponible. La fecha más lejana disponible es {params}. Elija otra.',
 };
diff --git a/packages/ui/components/calendar/translations/fr.js b/packages/ui/components/calendar/translations/fr.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mois précédent',
   nextFullYear: 'An prochain',
   previousFullYear: 'An précédent',
+  defaultDisabledDate: "Cette date n'est pas disponible. Veuillez choisir une autre date.",
+  beforeDisabledDate:
+    "Cette date n'est pas disponible. La prochaine date disponible est la suivante : {params}. Veuillez choisir une autre date.",
+  afterDisabledDate:
+    "Cette date n'est pas disponible. La dernière date disponible est la suivante : {params}. Veuillez choisir une autre date.",
 };
diff --git a/packages/ui/components/calendar/translations/hu.js b/packages/ui/components/calendar/translations/hu.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Előző hónap',
   nextFullYear: 'Következő év',
   previousFullYear: 'Előző év',
+  defaultDisabledDate: 'Ez a dátum nem választható. Válasszon másik dátumot.',
+  beforeDisabledDate:
+    'Ez a dátum nem választható. A legkorábbi elérhető dátum {params}. Válasszon másik dátumot.',
+  afterDisabledDate:
+    'Ez a dátum nem választható. A legkésőbbi elérhető dátum {params}. Válasszon másik dátumot.',
 };
diff --git a/packages/ui/components/calendar/translations/it.js b/packages/ui/components/calendar/translations/it.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mese precedente',
   nextFullYear: 'Anno successivo',
   previousFullYear: 'Anno precedente',
+  defaultDisabledDate: "Questa data non è disponibile. Scegline un'altra.",
+  beforeDisabledDate:
+    "Questa data non è disponibile. La prima data disponibile è {params}. Scegline un'altra.",
+  afterDisabledDate:
+    "Questa data non è disponibile. L'ultima data disponibile è {params}. Scegline un'altra.",
 };
diff --git a/packages/ui/components/calendar/translations/nl.js b/packages/ui/components/calendar/translations/nl.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorige maand',
   nextFullYear: 'Volgend jaar',
   previousFullYear: 'Vorig jaar',
+  defaultDisabledDate: 'Deze datum is niet beschikbaar. Kies een andere datum.',
+  beforeDisabledDate:
+    'Deze datum is niet beschikbaar. Vroegste beschikbare datum is {params}. Kies een andere datum.',
+  afterDisabledDate:
+    'Deze datum is niet beschikbaar. Laatste beschikbare datum is {params}. Kies een andere datum.',
 };
diff --git a/packages/ui/components/calendar/translations/pl.js b/packages/ui/components/calendar/translations/pl.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Poprzedni miesiąc',
   nextFullYear: 'Następny rok',
   previousFullYear: 'Poprzedni rok',
+  defaultDisabledDate: 'Ta data jest niedostępna. Wybierz inną datę.',
+  beforeDisabledDate:
+    'Ta data jest niedostępna. Najwcześniejsza dostępna data to {params}. Wybierz inną datę.',
+  afterDisabledDate:
+    'Ta data jest niedostępna. Najpóźniejsza dostępna data to {params}. Wybierz inną datę.',
 };
diff --git a/packages/ui/components/calendar/translations/ro.js b/packages/ui/components/calendar/translations/ro.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Luna anterioară',
   nextFullYear: 'An viitoare',
   previousFullYear: 'An anterioară',
+  defaultDisabledDate: 'Această dată nu este disponibilă. Vă rugăm să alegeți altă dată.',
+  beforeDisabledDate:
+    'Această dată nu este disponibilă. Cea mai apropiată dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
+  afterDisabledDate:
+    'Această dată nu este disponibilă. Ultima dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
 };
diff --git a/packages/ui/components/calendar/translations/ru.js b/packages/ui/components/calendar/translations/ru.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предыдущий месяц',
   nextFullYear: 'Следующий год',
   previousFullYear: 'Предыдущий год',
+  defaultDisabledDate: 'Эта дата недоступна. Выберите другую дату.',
+  beforeDisabledDate:
+    'Эта дата недоступна. Самая ранняя доступная дата — {params}. Выберите другую дату.',
+  afterDisabledDate:
+    'Эта дата недоступна. Самая поздняя доступная дата — {params}. Выберите другую дату.',
 };
diff --git a/packages/ui/components/calendar/translations/sk.js b/packages/ui/components/calendar/translations/sk.js
@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Predchádzajúci mesiac',
   nextFullYear: 'Nasledujúci rok',
   previousFullYear: 'Predchádzajúci rok',
+  defaultDisabledDate: 'Tento dátum nie je k dispozícii. Vyberte iný dátum.',
+  beforeDisabledDate:
+    'Tento dátum nie je k dispozícii. Najbližší možný dátum je {params}. Vyberte iný dátum.',
+  afterDisabledDate:
+    'Tento dátum nie je k dispozícii. Posledný možný dátum je {params}. Vyberte iný dátum.',
 };
diff --git a/packages/ui/components/calendar/translations/uk.js b/packages/ui/components/calendar/translations/uk.js
@@ -3,4 +3,7 @@ export default {
   previousMonth: 'Попередній місяць',
   nextFullYear: 'Наступний року',
   previousFullYear: 'Попередній року',
+  defaultDisabledDate: 'Ця дата недоступна. Виберіть іншу дату.',
+  beforeDisabledDate: 'Ця дата недоступна. Найближча доступна дата {params}. Виберіть іншу дату.',
+  afterDisabledDate: 'Ця дата недоступна. Остання доступна дата {params}. Виберіть іншу дату.',
 };
diff --git a/packages/ui/components/calendar/translations/zh.js b/packages/ui/components/calendar/translations/zh.js
@@ -3,4 +3,7 @@ export default {
   previousMonth: '前一个月',
   nextFullYear: '明一年',
   previousFullYear: '前一年',
+  defaultDisabledDate: '此日期不可选。请选择另一个日期。',
+  beforeDisabledDate: '此日期不可选。最早可选日期为 {params}。请选择另一个日期。',
+  afterDisabledDate: '此日期不可选。最晚可选日期为 {params}。请选择另一个日期。',
 };