feat: add locale i18n property, use Intl.DateTimeFormat for aria-labe…

…ls (#8433)
vaadin · Jan 3, 2025 · e77c513 · e77c513
1 parent c014f16
commit e77c513
Show file tree

Hide file tree

Showing 9 changed files with 621 additions and 194 deletions.
diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.d.ts b/packages/date-picker/src/vaadin-date-picker-mixin.d.ts
@@ -19,6 +19,12 @@ export interface DatePickerDate {
 }
 
 export interface DatePickerI18n {
+  /**
+   * A locale in BCP 47 format, e.g. "en-US". If not specified
+   * defaults to the browser's locale. Used for screen reader
+   * announcements.
+   */
+  locale?: string | undefined;
   /**
    * An array with the full names of months starting
    * with January.
@@ -151,6 +157,11 @@ export declare class DatePickerMixinClass {
    *
    * ```
    * {
+   *   // A locale in BCP 47 format, e.g. "en-US". If not specified
+   *   // defaults to the browser's locale. Used for screen reader
+   *   // announcements.
+   *   locale: 'en-US',
+   *
    *   // An array with the full names of months starting
    *   // with January.
    *   monthNames: [

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -204,6 +204,11 @@ export const DatePickerMixin = (subclass) =>
          *
          * ```
          * {
+         *   // A locale in BCP 47 format, e.g. "en-US". If not specified
+         *   // defaults to the browser's locale. Used for screen reader
+         *   // announcements.
+         *   locale: 'en-US',
+         *
          *   // An array with the full names of months starting
          *   // with January.
          *   monthNames: [

diff --git a/packages/date-picker/src/vaadin-lit-month-calendar.js b/packages/date-picker/src/vaadin-lit-month-calendar.js
@@ -81,7 +81,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                         this.maxDate,
                         this.isDateDisabled,
                       )}"
-                      aria-label="${this.__computeDayAriaLabel(date)}"
+                      aria-label="${this.__computeDayAriaLabel(date, this.i18n)}"
                       >${this._getDate(date)}</td
                     >
                   `;

diff --git a/packages/date-picker/src/vaadin-month-calendar-mixin.js b/packages/date-picker/src/vaadin-month-calendar-mixin.js
@@ -316,20 +316,8 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    __computeDayAriaLabel(date) {
-      if (!date) {
-        return '';
-      }
-
-      let ariaLabel = `${this._getDate(date)} ${this.i18n.monthNames[date.getMonth()]} ${date.getFullYear()}, ${
-        this.i18n.weekdays[date.getDay()]
-      }`;
-
-      if (this._isToday(date)) {
-        ariaLabel += `, ${this.i18n.today}`;
-      }
-
-      return ariaLabel;
+    __computeDayAriaLabel(date, i18n) {
+      return date ? Intl.DateTimeFormat(i18n.locale, { dateStyle: 'full' }).format(date) : '';
     }
 
     /** @private */

diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/src/vaadin-month-calendar.js
@@ -59,7 +59,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
                   disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
                   aria-selected$="[[__computeDayAriaSelected(item, selectedDate)]]"
                   aria-disabled$="[[__computeDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
-                  aria-label$="[[__computeDayAriaLabel(item)]]"
+                  aria-label$="[[__computeDayAriaLabel(item, i18n)]]"
                   >[[_getDate(item)]]</td
                 >
               </template>