@vkontakte/vkui 7.2.0 → 7.3.0

package/dist/components/DateInput/DateInput.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
 import { type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
@@ -6,39 +7,73 @@ import { type FormFieldProps } from '../FormField/FormField';
 import '../InputLike/InputLike.module.css';
 export type DateInputPropsTestsProps = {
     /**
-     * Передает атрибут `data-testid` для поля ввода дня
+     * Передает атрибут `data-testid` для поля ввода дня.
      */
     dayFieldTestId?: string;
     /**
-     * Передает атрибут `data-testid` для поля ввода месяца
+     * Передает атрибут `data-testid` для поля ввода месяца.
      */
     monthFieldTestId?: string;
     /**
-     * Передает атрибут `data-testid` для поля ввода года
+     * Передает атрибут `data-testid` для поля ввода года.
      */
     yearFieldTestId?: string;
     /**
-     * Передает атрибут `data-testid` для поля ввода часа
+     * Передает атрибут `data-testid` для поля ввода часа.
      */
     hourFieldTestId?: string;
     /**
-     * Передает атрибут `data-testid` для поля ввода минут
+     * Передает атрибут `data-testid` для поля ввода минут.
      */
     minuteFieldTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки показа календаря.
+     */
+    showCalendarButtonTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки очистки даты.
+     */
+    clearButtonTestId?: string;
 };
-export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'size'>, Pick<CalendarProps, 'disablePast' | 'disableFuture' | 'enableTime' | 'shouldDisableDate' | 'onChange' | 'value' | 'defaultValue' | 'doneButtonText' | 'DoneButton' | 'weekStartsOn' | 'disablePickers' | 'changeHoursLabel' | 'changeMinutesLabel' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'showNeighboringMonth' | 'size' | 'viewDate' | 'onHeaderChange' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'minDateTime' | 'maxDateTime' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'>, DateInputPropsTestsProps {
+export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'size'>, Pick<CalendarProps, 'disablePast' | 'disableFuture' | 'enableTime' | 'shouldDisableDate' | 'onChange' | 'value' | 'defaultValue' | 'doneButtonText' | 'DoneButton' | 'weekStartsOn' | 'disablePickers' | 'changeHoursLabel' | 'changeMinutesLabel' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'showNeighboringMonth' | 'size' | 'viewDate' | 'onHeaderChange' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'minDateTime' | 'maxDateTime' | 'renderDayContent'>, Pick<UseFocusTrapProps, 'restoreFocus'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'>, DateInputPropsTestsProps {
     /**
-     * Передает атрибуты `data-testid` для интерактивных элементов в календаре
+     * Передает атрибуты `data-testid` для интерактивных элементов в календаре.
      */
     calendarTestsProps?: CalendarTestsProps;
+    /**
+     * Расположение календаря относительно поля ввода.
+     */
     calendarPlacement?: PlacementWithAuto;
+    /**
+     * Автоматически закрывать календарь при изменениях.
+     */
     closeOnChange?: boolean;
+    /**
+     * `aria-label` для календаря.
+     */
+    calendarLabel?: string;
+    /**
+     * Label для кнопки очистки. Делает доступным для ассистивных технологий.
+     */
     clearFieldLabel?: string;
+    /**
+     * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.
+     */
     showCalendarLabel?: string;
+    /**
+     * Отключение открытия календаря.
+     */
     disableCalendar?: boolean;
+    /**
+     * Обработчик изменения состояния открытия календаря.
+     */
     onCalendarOpenChanged?: (opened: boolean) => void;
     /**
-     * Колбэк срабатывающий при нажатии на кнопку "Done". Используется совместно с флагом `enableTime`.
+     * `aria-label` для поля изменения дня.
+     */
+    changeDayLabel?: string;
+    /**
+     * Обработчик нажатия на кнопку `"Done"`. Используется совместно с флагом `enableTime`.
      */
     onApply?: (value?: Date) => void;
     /**
@@ -47,12 +82,29 @@ export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivEl
      */
     renderCustomValue?: (date: Date | undefined) => React.ReactNode;
     /**
-     * Свойство для отображения времени в нужной таймзоне
+     * Часовой пояс для отображения даты.
      */
     timezone?: string;
+    /**
+     * Включает режим в котором DateInput доступен
+     * для ассистивных технологий.
+     * В этом режиме:
+     * - календарь больше не открывает при фокусе на DateInput;
+     * - иконка календаря видна всегда, чтобы пользователи
+     * ассистивных технологий могли открыть календарь по клику на иконку;
+     * - календарь при открытии получает фокус, клавиатурный
+     * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт;
+     *
+     * TODO [>=8]: включить по умолчанию.
+     */
+    accessible?: boolean;
+    /**
+     * Позволяет отключить захват фокуса при появлении календаря.
+     */
+    disableFocusTrap?: UseFocusTrapProps['disabled'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */
-export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp, style, className, doneButtonText, DoneButton, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, id, onApply, renderCustomValue, timezone, ...props }: DateInputProps) => React.ReactNode;
+export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, "value": valueProp, defaultValue, onChange, "calendarPlacement": calendarPlacementProp, style, className, doneButtonText, DoneButton, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, accessible, calendarLabel, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, "aria-label": ariaLabel, ...props }: DateInputProps) => React.ReactNode;
 //# sourceMappingURL=DateInput.d.ts.map

package/dist/components/DateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQxE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EACzC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC/C,EACD,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,YAAY,GACZ,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,GACb,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,uxBAsDvB,cAAc,KAAG,KAAK,CAAC,SA+PzB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/DateInput/DateInput.js

@@ -10,10 +10,11 @@ import { startOfDay, startOfMinute } from "date-fns";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useDateInput } from "../../hooks/useDateInput.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { callMultiple } from "../../lib/callMultiple.js";
 import { format, isMatch, parse } from "../../lib/date.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { Calendar } from "../Calendar/Calendar.js";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
+import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { FormField } from "../FormField/FormField.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { InputLike } from "../InputLike/InputLike.js";
@@ -75,17 +76,17 @@ const getInternalValue = (value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */ export const DateInput = (_param)=>{
-    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', showNeighboringMonth, size, changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, id, onApply, renderCustomValue, timezone } = _param, props = _object_without_properties(_param, [
+    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, 'value': valueProp, defaultValue, onChange, 'calendarPlacement': calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, accessible, calendarLabel = 'Календарь', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'День', changeMonthLabel = 'Месяц', changeYearLabel = 'Год', changeHoursLabel = 'Час', changeMinutesLabel = 'Минута', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, 'aria-label': ariaLabel = '' } = _param, props = _object_without_properties(_param, [
         "enableTime",
         "shouldDisableDate",
         "disableFuture",
         "disablePast",
         "minDateTime",
         "maxDateTime",
-        "value",
+        'value',
         "defaultValue",
         "onChange",
-        "calendarPlacement",
+        'calendarPlacement',
         "style",
         "className",
         "doneButtonText",
@@ -98,17 +99,19 @@ const getInternalValue = (value)=>{
         "disabled",
         "onClick",
         "onFocus",
+        "accessible",
+        "calendarLabel",
         "prevMonthLabel",
         "nextMonthLabel",
-        "showNeighboringMonth",
-        "size",
+        "changeDayLabel",
         "changeMonthLabel",
         "changeYearLabel",
-        "changeDayLabel",
         "changeHoursLabel",
         "changeMinutesLabel",
         "clearFieldLabel",
         "showCalendarLabel",
+        "showNeighboringMonth",
+        "size",
         "viewDate",
         "onHeaderChange",
         "onNextMonth",
@@ -124,17 +127,22 @@ const getInternalValue = (value)=>{
         "yearFieldTestId",
         "hourFieldTestId",
         "minuteFieldTestId",
+        "showCalendarButtonTestId",
+        "clearButtonTestId",
         "id",
         "onApply",
         "renderCustomValue",
-        "timezone"
+        "timezone",
+        "restoreFocus",
+        "disableFocusTrap",
+        'aria-label'
     ]);
     const daysRef = React.useRef(null);
     const monthsRef = React.useRef(null);
     const yearsRef = React.useRef(null);
     const hoursRef = React.useRef(null);
     const minutesRef = React.useRef(null);
-    const { value, updateValue, setInternalValue, getLastUpdatedValue } = useDateInputValue({
+    const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } = useDateInputValue({
         value: valueProp,
         defaultValue,
         onChange,
@@ -176,17 +184,18 @@ const getInternalValue = (value)=>{
         hoursRef,
         minutesRef
     ]);
-    const { rootRef, calendarRef, open, openCalendar, internalValue, handleKeyDown, setFocusedElement, handleFieldEnter, clear, removeFocusFromField } = useDateInput({
+    const { rootRef, calendarRef, open, internalValue, handleKeyDown, setFocusedElement, handleFieldEnter, clear, removeFocusFromField, closeCalendar, toggleCalendar, openCalendar } = useDateInput({
         maxElement,
         refs,
         autoFocus,
         disabled,
         elementsConfig,
-        onChange: updateValue,
+        onClear: clearValue,
         onInternalValueChange,
         getInternalValue,
         value,
-        onCalendarOpenChanged
+        onCalendarOpenChanged,
+        accessible
     });
     const { sizeY = 'none' } = useAdaptivity();
     const handleRootRef = useExternRef(rootRef, getRootRef);
@@ -199,6 +208,9 @@ const getInternalValue = (value)=>{
         getLastUpdatedValue
     ]);
     const onCalendarChange = React.useCallback((value)=>{
+        if (!value) {
+            return;
+        }
         if (enableTime) {
             setInternalValue(value);
             return;
@@ -215,6 +227,9 @@ const getInternalValue = (value)=>{
         removeFocusFromField
     ]);
     const onDoneButtonClick = React.useCallback(()=>{
+        if (!value) {
+            return;
+        }
         const newValue = updateValue(value);
         onApply === null || onApply === void 0 ? void 0 : onApply(newValue);
         removeFocusFromField();
@@ -224,7 +239,7 @@ const getInternalValue = (value)=>{
         updateValue,
         value
     ]);
-    const customValue = React.useMemo(()=>!open && (renderCustomValue === null || renderCustomValue === void 0 ? void 0 : renderCustomValue(value)), [
+    const customValue = React.useMemo(()=>!open && (renderCustomValue === null || renderCustomValue === void 0 ? void 0 : renderCustomValue(value || undefined)), [
         open,
         renderCustomValue,
         value
@@ -234,52 +249,97 @@ const getInternalValue = (value)=>{
     // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
     // на ней, пока помещается.
     const [calendarPlacement, setCalendarPlacement] = React.useState(calendarPlacementProp);
+    const { locale } = useConfigProvider();
+    const currentDateLabel = value ? new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }).format(value) : null;
+    const currentDateLabelId = React.useId();
+    const ariaLabelId = React.useId();
+    const showCalendarOnInputAreaClick = React.useCallback(()=>{
+        handleFieldEnter();
+        if (accessible) {
+            openCalendar();
+        }
+    }, [
+        handleFieldEnter,
+        openCalendar,
+        accessible
+    ]);
     return /*#__PURE__*/ _jsxs(FormField, _object_spread_props(_object_spread({
         style: style,
         className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         getRootRef: handleRootRef,
-        after: value ? /*#__PURE__*/ _jsx(IconButton, {
-            hoverMode: "opacity",
-            label: clearFieldLabel,
-            onClick: clear,
-            children: /*#__PURE__*/ _jsx(Icon16Clear, {})
-        }) : /*#__PURE__*/ _jsx(IconButton, {
-            hoverMode: "opacity",
-            label: showCalendarLabel,
-            onClick: openCalendar,
-            children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
+        role: "group",
+        "aria-labelledby": `${ariaLabelId} ${currentDateLabelId}`,
+        after: /*#__PURE__*/ _jsxs(React.Fragment, {
+            children: [
+                !disableCalendar && (accessible || !accessible && !value) ? /*#__PURE__*/ _jsx(IconButton, {
+                    hoverMode: "opacity",
+                    label: showCalendarLabel,
+                    onClick: toggleCalendar,
+                    "data-testid": showCalendarButtonTestId,
+                    children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
+                }) : null,
+                value ? /*#__PURE__*/ _jsx(IconButton, {
+                    hoverMode: "opacity",
+                    label: clearFieldLabel,
+                    onClick: clear,
+                    "data-testid": clearButtonTestId,
+                    children: /*#__PURE__*/ _jsx(Icon16Clear, {})
+                }) : null
+            ]
         }),
         disabled: disabled,
-        onClick: callMultiple(handleFieldEnter, onClick),
-        onFocus: callMultiple(handleFieldEnter, onFocus)
+        onClick: onClick
     }, props), {
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: "vkuiDateInput__wrapper",
                 children: [
+                    ariaLabel && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                        id: ariaLabelId,
+                        children: ariaLabel
+                    }),
+                    currentDateLabel && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                        id: currentDateLabelId,
+                        children: currentDateLabel
+                    }),
                     /*#__PURE__*/ _jsx(VisuallyHidden, {
                         id: id,
                         Component: "input",
+                        readOnly: true,
+                        "aria-hidden": true,
+                        tabIndex: -1,
                         name: name,
-                        value: value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''
+                        value: value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : '',
+                        onFocus: handleFieldEnter
                     }),
                     /*#__PURE__*/ _jsxs(Text, {
                         className: classNames("vkuiDateInput__input", customValue && "vkuiDateInput__hidden"),
-                        onKeyDown: handleKeyDown,
                         // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
                         // из-за чего `.Typography--normalize` перебивает стили.
                         normalize: false,
                         Component: "span" // для <span> нормализация не нужна
                         ,
+                        onClick: showCalendarOnInputAreaClick,
                         children: [
                             /*#__PURE__*/ _jsx(InputLike, {
                                 length: 2,
                                 getRootRef: daysRef,
                                 index: 0,
+                                onKeyDown: handleKeyDown,
                                 onElementSelect: setFocusedElement,
                                 value: internalValue[0],
                                 label: changeDayLabel,
-                                "data-testid": dayFieldTestId
+                                "data-testid": dayFieldTestId,
+                                role: "spinbutton",
+                                "aria-valuemin": 1,
+                                "aria-valuemax": 31,
+                                "aria-valuetext": internalValue[0],
+                                "aria-label": changeDayLabel
                             }),
                             /*#__PURE__*/ _jsx(InputLikeDivider, {
                                 children: "."
@@ -289,9 +349,15 @@ const getInternalValue = (value)=>{
                                 getRootRef: monthsRef,
                                 index: 1,
                                 onElementSelect: setFocusedElement,
+                                onKeyDown: handleKeyDown,
                                 value: internalValue[1],
                                 label: changeMonthLabel,
-                                "data-testid": monthFieldTestId
+                                "data-testid": monthFieldTestId,
+                                role: "spinbutton",
+                                "aria-valuemin": 1,
+                                "aria-valuemax": 12,
+                                "aria-valuetext": internalValue[1],
+                                "aria-label": changeMonthLabel
                             }),
                             /*#__PURE__*/ _jsx(InputLikeDivider, {
                                 children: "."
@@ -303,7 +369,13 @@ const getInternalValue = (value)=>{
                                 onElementSelect: setFocusedElement,
                                 value: internalValue[2],
                                 label: changeYearLabel,
-                                "data-testid": yearFieldTestId
+                                onKeyDown: handleKeyDown,
+                                "data-testid": yearFieldTestId,
+                                role: "spinbutton",
+                                "aria-valuemin": 1,
+                                "aria-valuemax": 275750,
+                                "aria-valuetext": internalValue[2],
+                                "aria-label": changeYearLabel
                             }),
                             enableTime && /*#__PURE__*/ _jsxs(React.Fragment, {
                                 children: [
@@ -318,7 +390,13 @@ const getInternalValue = (value)=>{
                                         onElementSelect: setFocusedElement,
                                         value: internalValue[3],
                                         label: changeHoursLabel,
-                                        "data-testid": hourFieldTestId
+                                        onKeyDown: handleKeyDown,
+                                        "data-testid": hourFieldTestId,
+                                        role: "spinbutton",
+                                        "aria-valuemin": 1,
+                                        "aria-valuemax": 24,
+                                        "aria-valuetext": internalValue[3],
+                                        "aria-label": changeHoursLabel
                                     }),
                                     /*#__PURE__*/ _jsx(InputLikeDivider, {
                                         children: ":"
@@ -330,7 +408,13 @@ const getInternalValue = (value)=>{
                                         onElementSelect: setFocusedElement,
                                         value: internalValue[4],
                                         label: changeMinutesLabel,
-                                        "data-testid": minuteFieldTestId
+                                        onKeyDown: handleKeyDown,
+                                        "data-testid": minuteFieldTestId,
+                                        role: "spinbutton",
+                                        "aria-valuemin": 1,
+                                        "aria-valuemax": 59,
+                                        "aria-valuetext": internalValue[4],
+                                        "aria-label": changeMinutesLabel
                                     })
                                 ]
                             })
@@ -349,37 +433,44 @@ const getInternalValue = (value)=>{
                 placement: calendarPlacement,
                 onPlacementChange: setCalendarPlacement,
                 autoUpdateOnTargetResize: true,
-                children: /*#__PURE__*/ _jsx(Calendar, _object_spread({
-                    value: value,
-                    onChange: onCalendarChange,
-                    enableTime: enableTime,
-                    disablePast: disablePast,
-                    disableFuture: disableFuture,
-                    shouldDisableDate: shouldDisableDate,
-                    onDoneButtonClick: onDoneButtonClick,
-                    getRootRef: calendarRef,
-                    doneButtonText: doneButtonText,
-                    DoneButton: DoneButton,
-                    disablePickers: disablePickers,
-                    changeHoursLabel: changeHoursLabel,
-                    changeMinutesLabel: changeMinutesLabel,
-                    prevMonthLabel: prevMonthLabel,
-                    nextMonthLabel: nextMonthLabel,
-                    changeMonthLabel: changeMonthLabel,
-                    changeYearLabel: changeYearLabel,
-                    changeDayLabel: changeDayLabel,
-                    showNeighboringMonth: showNeighboringMonth,
-                    renderDayContent: renderDayContent,
-                    size: size,
-                    viewDate: viewDate,
-                    onHeaderChange: onHeaderChange,
-                    onNextMonth: onNextMonth,
-                    onPrevMonth: onPrevMonth,
-                    prevMonthIcon: prevMonthIcon,
-                    nextMonthIcon: nextMonthIcon,
-                    minDateTime: minDateTime,
-                    maxDateTime: maxDateTime
-                }, calendarTestsProps))
+                children: /*#__PURE__*/ _jsx(FocusTrap, {
+                    onClose: closeCalendar,
+                    disabled: disableFocusTrap !== null && disableFocusTrap !== void 0 ? disableFocusTrap : !accessible,
+                    restoreFocus: restoreFocus !== null && restoreFocus !== void 0 ? restoreFocus : Boolean(accessible),
+                    captureEscapeKeyboardEvent: false,
+                    children: /*#__PURE__*/ _jsx(Calendar, _object_spread({
+                        "aria-label": calendarLabel,
+                        role: "dialog",
+                        value: value,
+                        onChange: onCalendarChange,
+                        enableTime: enableTime,
+                        disablePast: disablePast,
+                        disableFuture: disableFuture,
+                        shouldDisableDate: shouldDisableDate,
+                        onDoneButtonClick: onDoneButtonClick,
+                        getRootRef: calendarRef,
+                        doneButtonText: doneButtonText,
+                        DoneButton: DoneButton,
+                        disablePickers: disablePickers,
+                        changeHoursLabel: changeHoursLabel,
+                        changeMinutesLabel: changeMinutesLabel,
+                        prevMonthLabel: prevMonthLabel,
+                        nextMonthLabel: nextMonthLabel,
+                        changeMonthLabel: changeMonthLabel,
+                        changeYearLabel: changeYearLabel,
+                        showNeighboringMonth: showNeighboringMonth,
+                        renderDayContent: renderDayContent,
+                        size: size,
+                        viewDate: viewDate,
+                        onHeaderChange: onHeaderChange,
+                        onNextMonth: onNextMonth,
+                        onPrevMonth: onPrevMonth,
+                        prevMonthIcon: prevMonthIcon,
+                        nextMonthIcon: nextMonthIcon,
+                        minDateTime: minDateTime,
+                        maxDateTime: maxDateTime
+                    }, calendarTestsProps))
+                })
             })
         ]
     }));