ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
gerjanvangeest 2025-01-21 09:35:42 +01:00 committed by GitHub
parent dd598125ef
commit 81e2a1d2d1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 169 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/nine-keys-matter.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[calendar] add translations for an information message for screen reader users when a date is disabled

19
packages/ui/components/calendar/src/LionCalendar.js
View file

@ -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);

88
packages/ui/components/calendar/test/lion-calendar.test.js
View file

@ -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>
`);
});
});
});
});

5
packages/ui/components/calendar/translations/bg.js
View file

@ -3,4 +3,9 @@ export default {
previousMonth: 'Предишен месец',
nextFullYear: 'Следващ година',
previousFullYear: 'Предишен година',
defaultDisabledDate: 'Тази дата не е налична. Моля, изберете друга дата.',
beforeDisabledDate:
'Тази дата не е налична. Най-ранната налична да е {params}. Моля, изберете друга дата.',
afterDisabledDate:
'Тази дата не е налична. Най-късната налична дата е {params}. Моля, изберете друга дата.',
};

5
packages/ui/components/calendar/translations/cs.js
View file

@ -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.',
};

5
packages/ui/components/calendar/translations/de.js
View file

@ -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.',
};

5
packages/ui/components/calendar/translations/en.js
View file

@ -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.',
};

5
packages/ui/components/calendar/translations/es.js
View file

@ -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.',
};

5
packages/ui/components/calendar/translations/fr.js
View file

@ -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.",
};

5
packages/ui/components/calendar/translations/hu.js
View file

@ -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.',
};

5
packages/ui/components/calendar/translations/it.js
View file

@ -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.",
};

5
packages/ui/components/calendar/translations/nl.js
View file

@ -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.',
};

5
packages/ui/components/calendar/translations/pl.js
View file

@ -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ę.',
};

5
packages/ui/components/calendar/translations/ro.js
View file

@ -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ă.',
};

5
packages/ui/components/calendar/translations/ru.js
View file

@ -3,4 +3,9 @@ export default {
previousMonth: 'Предыдущий месяц',
nextFullYear: 'Следующий год',
previousFullYear: 'Предыдущий год',
defaultDisabledDate: 'Эта дата недоступна. Выберите другую дату.',
beforeDisabledDate:
'Эта дата недоступна. Самая ранняя доступная дата — {params}. Выберите другую дату.',
afterDisabledDate:
'Эта дата недоступна. Самая поздняя доступная дата — {params}. Выберите другую дату.',
};

5
packages/ui/components/calendar/translations/sk.js
View file

@ -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.',
};

3
packages/ui/components/calendar/translations/uk.js
View file

@ -3,4 +3,7 @@ export default {
previousMonth: 'Попередній місяць',
nextFullYear: 'Наступний року',
previousFullYear: 'Попередній року',
defaultDisabledDate: 'Ця дата недоступна. Виберіть іншу дату.',
beforeDisabledDate: 'Ця дата недоступна. Найближча доступна дата {params}. Виберіть іншу дату.',
afterDisabledDate: 'Ця дата недоступна. Остання доступна дата {params}. Виберіть іншу дату.',
};

3
packages/ui/components/calendar/translations/zh.js
View file

@ -3,4 +3,7 @@ export default {
previousMonth: '前一个月',
nextFullYear: '明一年',
previousFullYear: '前一年',
defaultDisabledDate: '此日期不可选。请选择另一个日期。',
beforeDisabledDate: '此日期不可选。最早可选日期为 {params}。请选择另一个日期。',
afterDisabledDate: '此日期不可选。最晚可选日期为 {params}。请选择另一个日期。',
};