fix

Author: alexfauquette

packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts

@@ -96,7 +96,7 @@ export const getLetterEditingOptions = (
 
 // This format should be the same on all the adapters
 // If some adapter does not respect this convention, then we will need to hardcode the format on each adapter.
-export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
+const FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
 
 const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 

packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts

@@ -5,6 +5,7 @@ import type { FieldSection, MuiPickersAdapter } from '../../../models';
 import type { UseFieldDOMGetters, UseFieldInternalProps } from './useField.types';
 import { usePickerAdapter, usePickerTranslations } from '../../../hooks';
 import { syncSelectionToDOM } from './syncSelectionToDOM';
+import { getLocalizedDigits, removeLocalizedDigits } from './useField.utils';
 import type { UseFieldCharacterEditingReturnValue } from './useFieldCharacterEditing';
 import type { FieldRangeSection, PickerAnyManager } from '../../models';
 import type { PickersSectionElement } from '../../../PickersSectionList';
@@ -19,6 +20,7 @@ export function useFieldSectionContentProps(
 ): UseFieldSectionContentPropsReturnValue {
   const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
 
   const {
     focused,
@@ -173,11 +175,11 @@ export function useFieldSectionContentProps(
 
         // Aria attributes
         'aria-readonly': readOnly,
-        'aria-valuenow': getSectionValueNow(section, adapter),
+        'aria-valuenow': getSectionValueNow(section, adapter, localizedDigits),
         'aria-valuemin': sectionBoundaries.minimum,
         'aria-valuemax': sectionBoundaries.maximum,
         'aria-valuetext': section.value
-          ? getSectionValueText(section, adapter)
+          ? getSectionValueText(section, adapter, localizedDigits)
           : translations.empty,
         'aria-label': translations[section.type],
         'aria-disabled': disabled,
@@ -204,6 +206,7 @@ export function useFieldSectionContentProps(
       isEditable,
       translations,
       adapter,
+      localizedDigits,
       handleInput,
       handlePaste,
       handleMouseUp,
@@ -232,14 +235,18 @@ type UseFieldSectionContentPropsReturnValue = (
 function getSectionValueText(
   section: FieldSection,
   adapter: MuiPickersAdapter,
+  localizedDigits: string[],
 ): string | undefined {
   if (!section.value) {
     return undefined;
   }
   switch (section.type) {
     case 'month': {
       if (section.contentType === 'digit') {
-        const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+        const dateWithMonth = adapter.setMonth(
+          adapter.date(),
+          Number(removeLocalizedDigits(section.value, localizedDigits)) - 1,
+        );
         return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
       }
       const parsedDate = adapter.parse(section.value, section.format);
@@ -251,7 +258,7 @@ function getSectionValueText(
       if (section.contentType === 'digit') {
         const dateWithDay = adapter.setDate(
           adapter.startOfYear(adapter.date()),
-          Number(section.value),
+          Number(removeLocalizedDigits(section.value, localizedDigits)),
         );
         // Announce a cardinal day (e.g. "2"), not a locale ordinal (e.g. French "2ème").
         // See https://github.com/mui/mui-x/issues/22915.
@@ -266,17 +273,22 @@ function getSectionValueText(
   }
 }
 
-function getSectionValueNow(section: FieldSection, adapter: MuiPickersAdapter): number | undefined {
+function getSectionValueNow(
+  section: FieldSection,
+  adapter: MuiPickersAdapter,
+  localizedDigits: string[],
+): number | undefined {
   if (!section.value) {
     return undefined;
   }
+  const nonLocalizedValue = removeLocalizedDigits(section.value, localizedDigits);
   switch (section.type) {
     case 'weekDay': {
       if (section.contentType === 'letter') {
         // TODO: improve by resolving the week day number from a letter week day
         return undefined;
       }
-      return Number(section.value);
+      return Number(nonLocalizedValue);
     }
     case 'meridiem': {
       const parsedDate = adapter.parse(
@@ -290,16 +302,16 @@ function getSectionValueNow(section: FieldSection, adapter: MuiPickersAdapter):
     }
     case 'day':
       return section.contentType === 'digit-with-letter'
-        ? parseInt(section.value, 10)
-        : Number(section.value);
+        ? parseInt(nonLocalizedValue, 10)
+        : Number(nonLocalizedValue);
     case 'month': {
       if (section.contentType === 'digit') {
-        return Number(section.value);
+        return Number(nonLocalizedValue);
       }
       const parsedDate = adapter.parse(section.value, section.format);
       return parsedDate ? adapter.getMonth(parsedDate) + 1 : undefined;
     }
     default:
-      return section.contentType !== 'letter' ? Number(section.value) : undefined;
+      return section.contentType !== 'letter' ? Number(nonLocalizedValue) : undefined;
   }
 }