[pickers] Fix time related aria labels to depend on ampm flag value (…

…#16572)
mui · Feb 14, 2025 · 6e19f24 · 6e19f24
1 parent 0d24408
commit 6e19f24
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 13 deletions.
diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx
@@ -397,12 +397,7 @@ export function Clock(inProps: ClockProps) {
           aria-activedescendant={selectedId}
           aria-label={translations.clockLabelText(
             type,
-            value == null
-              ? null
-              : utils.format(
-                  value,
-                  utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h',
-                ),
+            value == null ? null : utils.format(value, ampm ? 'fullTime12h' : 'fullTime24h'),
           )}
           ref={listboxRef}
           role="listbox"

diff --git a/packages/x-date-pickers/src/managers/useTimeManager.ts b/packages/x-date-pickers/src/managers/useTimeManager.ts
@@ -20,7 +20,7 @@ import { PickerValue } from '../internals/models';
 export function useTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(
   parameters: UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure> = {},
 ): UseTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure> {
-  const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } =
+  const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, ampm } =
     parameters;
 
   return React.useMemo(
@@ -36,15 +36,12 @@ export function useTimeManager<TEnableAccessibleFieldDOMStructure extends boolea
       }),
       internal_getOpenPickerButtonAriaLabel: ({ value, utils, localeText }) => {
         const formattedValue = utils.isValid(value)
-          ? utils.format(
-              value,
-              utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h',
-            )
+          ? utils.format(value, ampm ? 'fullTime12h' : 'fullTime24h')
           : null;
         return localeText.openTimePickerDialogue(formattedValue);
       },
     }),
-    [enableAccessibleFieldDOMStructure],
+    [ampm, enableAccessibleFieldDOMStructure],
   );
 }
 
@@ -66,7 +63,8 @@ export function getTimeFieldInternalPropsDefaults(
   };
 }
 
-export interface UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
+export interface UseTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends AmPmProps {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }