feat: add internationalization support for openCalendarAriaLabel (#4082)

Author: Harsh-Anand-Singh

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -10320,7 +10320,7 @@ Defaults to \`day\`.",
 the component.",
       "i18nTag": true,
       "inlineType": {
-        "name": "CalendarProps.I18nStrings",
+        "name": "DatePickerProps.I18nStrings",
         "properties": [
           {
             "name": "currentMonthAriaLabel",
@@ -10337,6 +10337,22 @@ the component.",
             "optional": true,
             "type": "string",
           },
+          {
+            "inlineType": {
+              "name": "DatePickerProps.OpenCalendarAriaLabel",
+              "parameters": [
+                {
+                  "name": "selectedDate",
+                  "type": "string | null",
+                },
+              ],
+              "returnType": "string",
+              "type": "function",
+            },
+            "name": "openCalendarAriaLabel",
+            "optional": true,
+            "type": "DatePickerProps.OpenCalendarAriaLabel",
+          },
           {
             "name": "previousMonthAriaLabel",
             "optional": true,
@@ -10357,7 +10373,7 @@ the component.",
       },
       "name": "i18nStrings",
       "optional": true,
-      "type": "CalendarProps.I18nStrings",
+      "type": "DatePickerProps.I18nStrings",
     },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
@@ -10440,6 +10456,7 @@ Supported values and formats are listed in the
       "type": "string",
     },
     {
+      "deprecatedTag": "Use \`i18nStrings.openCalendarAriaLabel\` instead.",
       "description": "Specifies a function that generates the \`aria-label\` for the 'open calendar' button. The \`selectedDate\` parameter is
 a human-readable localised string representing the current value of the input.
 (for example, \`\`selectedDate => 'Choose Date' + (selectedDate ? \`, selected date is \${selectedDate}\` : '')\`\`)",

src/date-picker/__tests__/date-picker.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 
 import DatePicker, { DatePickerProps } from '../../../lib/components/date-picker';
 import FormField from '../../../lib/components/form-field';
+import TestI18nProvider from '../../../lib/components/i18n/testing';
 import { NonCancelableEventHandler } from '../../../lib/components/internal/events';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import DatePickerWrapper from '../../../lib/components/test-utils/dom/date-picker';
@@ -422,3 +423,68 @@ describe('generates aria-label for the "Open calendar" button', () => {
     expect(button).toHaveAttribute('aria-label', 'Choose Date');
   });
 });
+
+describe('i18n', () => {
+  test('uses openCalendarAriaLabel from i18n provider when no date is selected', () => {
+    const { container } = render(
+      <TestI18nProvider
+        messages={{
+          'date-picker': {
+            'i18nStrings.openCalendarAriaLabel':
+              '{selectedDate, select, none {Choose calendar date} other {Choose calendar date, selected {selectedDate}}}',
+          },
+        }}
+      >
+        <DatePicker value="" locale="en-US" openCalendarAriaLabel={undefined} />
+      </TestI18nProvider>
+    );
+    const wrapper = createWrapper(container).findDatePicker()!;
+    expect(wrapper.findOpenCalendarButton().getElement()).toHaveAttribute('aria-label', 'Choose calendar date');
+  });
+
+  test('uses openCalendarAriaLabel from i18n provider when date is selected', () => {
+    const { container } = render(
+      <TestI18nProvider
+        messages={{
+          'date-picker': {
+            'i18nStrings.openCalendarAriaLabel':
+              '{selectedDate, select, none {Choose calendar date} other {Choose calendar date, selected {selectedDate}}}',
+          },
+        }}
+      >
+        <DatePicker value="2003-04-11" locale="en-US" openCalendarAriaLabel={undefined} />
+      </TestI18nProvider>
+    );
+    const wrapper = createWrapper(container).findDatePicker()!;
+    expect(wrapper.findOpenCalendarButton().getElement()).toHaveAttribute(
+      'aria-label',
+      'Choose calendar date, selected Friday, April 11, 2003'
+    );
+  });
+
+  test('uses openCalendarAriaLabel prop over i18n provider', () => {
+    const { container } = render(
+      <TestI18nProvider
+        messages={{
+          'date-picker': {
+            'i18nStrings.openCalendarAriaLabel':
+              '{selectedDate, select, none {Choose calendar date} other {Choose calendar date, selected {selectedDate}}}',
+          },
+        }}
+      >
+        <DatePicker
+          value="2003-04-11"
+          locale="en-US"
+          openCalendarAriaLabel={selectedDate =>
+            selectedDate ? `Custom label, selected ${selectedDate}` : 'Custom label'
+          }
+        />
+      </TestI18nProvider>
+    );
+    const wrapper = createWrapper(container).findDatePicker()!;
+    expect(wrapper.findOpenCalendarButton().getElement()).toHaveAttribute(
+      'aria-label',
+      'Custom label, selected Friday, April 11, 2003'
+    );
+  });
+});

src/date-picker/index.tsx

@@ -11,6 +11,7 @@ import { InternalButton } from '../button/internal';
 import InternalCalendar from '../calendar/internal';
 import { useFormFieldContext } from '../contexts/form-field.js';
 import InternalDateInput from '../date-input/internal';
+import { useInternalI18n } from '../i18n/context.js';
 import { useLocale } from '../i18n/context.js';
 import { InputProps } from '../input/interfaces';
 import { getBaseProps } from '../internal/base-component';
@@ -73,6 +74,7 @@ const DatePicker = React.forwardRef(
     });
     checkControlled('DatePicker', 'value', value, 'onChange', onChange);
 
+    const i18n = useInternalI18n('date-picker');
     const contextLocale = useLocale();
     const normalizedLocale = normalizeLocale('DatePicker', locale || contextLocale);
 
@@ -123,13 +125,17 @@ const DatePicker = React.forwardRef(
 
     const hasFullValue = isValidFullDate({ date: value, granularity });
 
-    const buttonAriaLabel =
-      openCalendarAriaLabel &&
-      openCalendarAriaLabel(
-        hasFullValue && parsedValue
-          ? getSelectedDateLabel({ date: parsedValue, granularity, locale: normalizedLocale })
-          : null
-      );
+    const defaultOpenCalendarAriaLabel = i18n(
+      'i18nStrings.openCalendarAriaLabel',
+      i18nStrings?.openCalendarAriaLabel ?? openCalendarAriaLabel,
+      format => (selectedDate: string | null) => format({ selectedDate: selectedDate ?? 'none' })
+    );
+
+    const buttonAriaLabel = defaultOpenCalendarAriaLabel?.(
+      hasFullValue && parsedValue
+        ? getSelectedDateLabel({ date: parsedValue, granularity, locale: normalizedLocale })
+        : null
+    );
 
     const trigger = (
       <div className={styles['date-picker-trigger']}>

src/date-picker/interfaces.ts

@@ -22,6 +22,7 @@ export interface DatePickerProps
    * Specifies a function that generates the `aria-label` for the 'open calendar' button. The `selectedDate` parameter is
    * a human-readable localised string representing the current value of the input.
    * (for example, ``selectedDate => 'Choose Date' + (selectedDate ? `, selected date is ${selectedDate}` : '')``)
+   * @deprecated Use `i18nStrings.openCalendarAriaLabel` instead.
    */
   openCalendarAriaLabel?: DatePickerProps.OpenCalendarAriaLabel;
 
@@ -130,7 +131,14 @@ export namespace DatePickerProps {
     focus(): void;
   }
 
-  export type I18nStrings = CalendarProps.I18nStrings;
+  export interface I18nStrings extends CalendarProps.I18nStrings {
+    /**
+     * Specifies a function that generates the `aria-label` for the 'open calendar' button. The `selectedDate` parameter is
+     * a human-readable localised string representing the current value of the input, or `null` when no date is selected.
+     * @i18n
+     */
+    openCalendarAriaLabel?: OpenCalendarAriaLabel;
+  }
 
   export type Granularity = DateGranularity;
 

src/i18n/messages-types.ts

@@ -166,6 +166,11 @@ export interface I18nFormatArgTypes {
   "copy-to-clipboard": {
     "i18nStrings.copyButtonText": never;
   }
+  "date-picker": {
+    "i18nStrings.openCalendarAriaLabel": {
+      "selectedDate": string;
+    }
+  }
   "date-range-picker": {
     "i18nStrings.relativeModeTitle": never;
     "i18nStrings.absoluteModeTitle": never;
@@ -217,6 +222,12 @@ export interface I18nFormatArgTypes {
   "drawer": {
     "i18nStrings.loadingText": never;
   }
+  "error-boundary": {
+    "i18nStrings.headerText": never;
+    "i18nStrings.descriptionText": never;
+    "i18nStrings.descriptionWithFeedbackText": never;
+    "i18nStrings.refreshActionText": never;
+  }
   "file-token-group": {
     "i18nStrings.limitShowFewer": never;
     "i18nStrings.limitShowMore": never;

src/i18n/messages/all.ar.json

@@ -130,6 +130,9 @@
   "copy-to-clipboard": {
     "i18nStrings.copyButtonText": "نسخ"
   },
+  "date-picker": {
+    "i18nStrings.openCalendarAriaLabel": "{selectedDate, select, none {اختر التاريخ} other {اختر التاريخ، التاريخ المحدد هو {selectedDate}}}"
+  },
   "date-range-picker": {
     "i18nStrings.relativeModeTitle": "الوضع النسبي",
     "i18nStrings.absoluteModeTitle": "الوضع المُطلق",
@@ -172,6 +175,12 @@
   "drawer": {
     "i18nStrings.loadingText": "جار تحميل المحتوى"
   },
+  "error-boundary": {
+    "i18nStrings.headerText": "خطأ غير متوقع، فشل عرض المحتوى",
+    "i18nStrings.descriptionText": "حدِّث الصفحة للمحاولة مرة أخرى.",
+    "i18nStrings.descriptionWithFeedbackText": "حدِّث الصفحة للمحاولة مرة أخرى. نحن نتتبع هذه المشكلة، ولكن يمكنك مشاركة <Feedback>المزيد من المعلومات هنا</Feedback>.",
+    "i18nStrings.refreshActionText": "تحديث الصفحة"
+  },
   "file-token-group": {
     "i18nStrings.limitShowFewer": "إظهار عدد أقل من عوامل التصفية",
     "i18nStrings.limitShowMore": "عرض المزيد من عوامل التصفية",

src/i18n/messages/all.de.json

@@ -130,6 +130,9 @@
   "copy-to-clipboard": {
     "i18nStrings.copyButtonText": "Kopieren"
   },
+  "date-picker": {
+    "i18nStrings.openCalendarAriaLabel": "{selectedDate, select, none {Datum wählen} other {Datum wählen, ausgewähltes Datum ist {selectedDate}}}"
+  },
   "date-range-picker": {
     "i18nStrings.relativeModeTitle": "Relativer Modus",
     "i18nStrings.absoluteModeTitle": "Absoluter Modus",
@@ -172,6 +175,12 @@
   "drawer": {
     "i18nStrings.loadingText": "Inhalte werden geladen"
   },
+  "error-boundary": {
+    "i18nStrings.headerText": "Unerwarteter Fehler, Inhalt konnte nicht angezeigt werden",
+    "i18nStrings.descriptionText": "Aktualisieren Sie die Seite, um es erneut zu versuchen.",
+    "i18nStrings.descriptionWithFeedbackText": "Aktualisieren Sie die Seite, um es erneut zu versuchen. Wir verfolgen dieses Problem nach, Sie können aber <Feedback>hier zusätzliche Informationen mitteilen</Feedback>.",
+    "i18nStrings.refreshActionText": "Seite aktualisieren"
+  },
   "file-token-group": {
     "i18nStrings.limitShowFewer": "Weniger anzeigen",
     "i18nStrings.limitShowMore": "Mehr anzeigen",

src/i18n/messages/all.en-GB.json

@@ -130,6 +130,9 @@
   "copy-to-clipboard": {
     "i18nStrings.copyButtonText": "Copy"
   },
+  "date-picker": {
+    "i18nStrings.openCalendarAriaLabel": "{selectedDate, select, none {Choose a date} other {Choose a date, the selected date is {selectedDate}}}"
+  },
   "date-range-picker": {
     "i18nStrings.relativeModeTitle": "Relative mode",
     "i18nStrings.absoluteModeTitle": "Absolute mode",
@@ -172,6 +175,12 @@
   "drawer": {
     "i18nStrings.loadingText": "Loading content"
   },
+  "error-boundary": {
+    "i18nStrings.headerText": "Unexpected error, content failed to show",
+    "i18nStrings.descriptionText": "Refresh to try again.",
+    "i18nStrings.descriptionWithFeedbackText": "Refresh to try again. We are tracking this issue, but you can share <Feedback>more information here</Feedback>.",
+    "i18nStrings.refreshActionText": "Refresh page"
+  },
   "file-token-group": {
     "i18nStrings.limitShowFewer": "Show fewer",
     "i18nStrings.limitShowMore": "Show more",

src/i18n/messages/all.en.json

@@ -130,6 +130,9 @@
   "copy-to-clipboard": {
     "i18nStrings.copyButtonText": "Copy"
   },
+  "date-picker": {
+    "i18nStrings.openCalendarAriaLabel": "{selectedDate, select, none {Choose date} other {Choose date, selected date is {selectedDate}}}"
+  },
   "date-range-picker": {
     "i18nStrings.relativeModeTitle": "Relative mode",
     "i18nStrings.absoluteModeTitle": "Absolute mode",
@@ -172,6 +175,12 @@
   "drawer": {
     "i18nStrings.loadingText": "Loading content"
   },
+  "error-boundary": {
+    "i18nStrings.headerText": "Unexpected error, content failed to show",
+    "i18nStrings.descriptionText": "Refresh to try again.",
+    "i18nStrings.descriptionWithFeedbackText": "Refresh to try again. We are tracking this issue, but you can share <Feedback>more information here</Feedback>.",
+    "i18nStrings.refreshActionText": "Refresh page"
+  },
   "file-token-group": {
     "i18nStrings.limitShowFewer": "Show fewer",
     "i18nStrings.limitShowMore": "Show more",

src/i18n/messages/all.es.json

@@ -130,6 +130,9 @@
   "copy-to-clipboard": {
     "i18nStrings.copyButtonText": "Copiar"
   },
+  "date-picker": {
+    "i18nStrings.openCalendarAriaLabel": "{selectedDate, select, none {Elegir fecha} other {Elegir fecha; la fecha seleccionada es {selectedDate}}}"
+  },
   "date-range-picker": {
     "i18nStrings.relativeModeTitle": "Modo relativo",
     "i18nStrings.absoluteModeTitle": "Modo absoluto",
@@ -172,6 +175,12 @@
   "drawer": {
     "i18nStrings.loadingText": "Cargando contenido"
   },
+  "error-boundary": {
+    "i18nStrings.headerText": "Error inesperado. No se pudo mostrar el contenido",
+    "i18nStrings.descriptionText": "Actualice para intentarlo de nuevo.",
+    "i18nStrings.descriptionWithFeedbackText": "Actualice para intentarlo de nuevo. Estamos siguiendo este problema, pero puede compartir <Feedback>más información aquí</Feedback>.",
+    "i18nStrings.refreshActionText": "Actualizar página"
+  },
   "file-token-group": {
     "i18nStrings.limitShowFewer": "Mostrar menos",
     "i18nStrings.limitShowMore": "Mostrar más",