carbon-react 123.2.2 → 123.4.0

package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -33,6 +33,13 @@ export interface DatePickerProps {
     open?: boolean;
     /** Callback triggered when a Day is clicked */
     onDayClick?: (date: Date, ev: React.MouseEvent<HTMLDivElement>) => void;
+    /** Sets the picker open state */
+    setOpen: (isOpen: boolean) => void;
+    /** Id passed to tab guard element */
+    pickerTabGuardId?: string;
 }
-export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: {
+    ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, }: DatePickerProps): React.JSX.Element | null;
+    displayName: string;
+};
 export default DatePicker;

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import PropTypes from "prop-types";
 import DayPicker from "react-day-picker";
 import { flip, offset } from "@floating-ui/dom";
@@ -9,13 +9,15 @@ import useLocale from "../../../../hooks/__internal__/useLocale";
 import Navbar from "../navbar";
 import Weekday from "../weekday";
 import StyledDayPicker from "./day-picker.style";
+import Events from "../../../../__internal__/utils/helpers/events";
+import { defaultFocusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
 
 /** there is an issue with typescript-to-proptypes package that means we need to override these types */
 
 const popoverMiddleware = [offset(3), flip({
   fallbackStrategy: "initialPlacement"
 })];
-const DatePicker = /*#__PURE__*/React.forwardRef(({
+export const DatePicker = ({
   inputElement,
   minDate,
   maxDate,
@@ -24,8 +26,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   onDayClick,
   pickerMouseDown,
   pickerProps,
-  open
-}, ref) => {
+  open,
+  setOpen,
+  pickerTabGuardId
+}) => {
   const l = useLocale();
   const {
     localize,
@@ -58,6 +62,28 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
   }, [l, localize]);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (open) {
+      // this is a temporary fix for some axe issues that are baked into the library we use for the picker
+      const captionElement = ref.current?.querySelector(".DayPicker-Caption");
+      /* istanbul ignore else */
+      if (captionElement) {
+        captionElement.removeAttribute("role");
+        captionElement.removeAttribute("aria-live");
+      }
+
+      // focus the selected or today's date first
+      const selectedDay = ref.current?.querySelector(".DayPicker-Day--selected") || ref.current?.querySelector(".DayPicker-Day--today");
+      const firstDay = ref.current?.querySelector(".DayPicker-Day[tabindex='0']");
+
+      /* istanbul ignore else */
+      if (selectedDay && firstDay !== selectedDay) {
+        selectedDay?.setAttribute("tabindex", "0");
+        firstDay?.setAttribute("tabindex", "-1");
+      }
+    }
+  }, [open]);
   const handleDayClick = (date, modifiers, ev) => {
     if (!modifiers.disabled) {
       const {
@@ -72,6 +98,35 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
       onDayClick?.(date, ev);
     }
   };
+  const handleOnKeyDown = ev => {
+    if (Events.isEscKey(ev)) {
+      inputElement.current?.querySelector("input")?.focus();
+      setOpen(false);
+    }
+    if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && Events.isTabKey(ev) && Events.isShiftKey(ev)) {
+      ev.preventDefault();
+      setOpen(false);
+      inputElement.current?.querySelector("input")?.focus();
+    }
+  };
+  const handleOnDayKeyDown = (_day, _modifiers, ev) => {
+    // we need to manually handle this as the picker may be in a Portal
+    /* istanbul ignore else */
+    if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
+      ev.preventDefault();
+      setOpen(false);
+      const input = inputElement.current?.querySelector("input");
+
+      /* istanbul ignore else */
+      if (input) {
+        const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
+        const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
+        const nextIndex = filteredElements.indexOf(input) + 1;
+        filteredElements[nextIndex]?.focus();
+      }
+    }
+  };
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
   if (!open) {
     return null;
@@ -79,6 +134,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   const localeUtils = {
     formatDay
   };
+  const handleTabGuardFocus = () => {
+    ref.current?.querySelector("button")?.focus();
+  };
   return /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-start",
     reference: inputElement,
@@ -86,8 +144,15 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
     disablePortal: disablePortal
   }, /*#__PURE__*/React.createElement(StyledDayPicker, {
     ref: ref,
-    onMouseDown: pickerMouseDown
-  }, /*#__PURE__*/React.createElement(DayPicker, _extends({
+    onMouseDown: pickerMouseDown,
+    onKeyDown: handleOnKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
+    id: pickerTabGuardId
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    onFocus: handleTabGuardFocus
+  }), /*#__PURE__*/React.createElement(DayPicker, _extends({
     month: selectedDays,
     months: monthsLong,
     firstDayOfWeek: weekStartsOn,
@@ -108,237 +173,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
     initialMonth: selectedDays || undefined,
     disabledDays: getDisabledDays(minDate, maxDate),
     locale: l.locale(),
-    localeUtils: localeUtils
+    localeUtils: localeUtils,
+    onDayKeyDown: handleOnDayKeyDown
   }, pickerProps))));
-});
-DatePicker.propTypes = {
-  "disablePortal": PropTypes.bool,
-  "inputElement": PropTypes.shape({
-    "current": function (props, propName) {
-      if (props[propName] == null) {
-        return null;
-      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error("Expected prop '" + propName + "' to be of type Element");
-      }
-    }
-  }).isRequired,
-  "maxDate": PropTypes.string,
-  "minDate": PropTypes.string,
-  "onDayClick": PropTypes.func,
-  "open": PropTypes.bool,
-  "pickerMouseDown": PropTypes.func,
-  "pickerProps": PropTypes.shape({
-    "canChangeMonth": PropTypes.bool,
-    "captionElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
-      "childContextTypes": PropTypes.object,
-      "contextType": PropTypes.shape({
-        "Consumer": PropTypes.func.isRequired,
-        "displayName": PropTypes.string,
-        "Provider": PropTypes.func.isRequired
-      }),
-      "contextTypes": PropTypes.object,
-      "defaultProps": PropTypes.shape({
-        "classNames": PropTypes.object,
-        "date": PropTypes.instanceOf(Date),
-        "locale": PropTypes.string,
-        "localeUtils": PropTypes.object,
-        "months": PropTypes.arrayOf(PropTypes.string),
-        "onClick": PropTypes.func
-      }),
-      "displayName": PropTypes.string,
-      "getDerivedStateFromError": PropTypes.func,
-      "getDerivedStateFromProps": PropTypes.func,
-      "propTypes": PropTypes.shape({
-        "classNames": PropTypes.func,
-        "date": PropTypes.func,
-        "locale": PropTypes.func,
-        "localeUtils": PropTypes.func,
-        "months": PropTypes.func,
-        "onClick": PropTypes.func
-      })
-    })]),
-    "className": PropTypes.string,
-    "classNames": PropTypes.shape({
-      "body": PropTypes.string.isRequired,
-      "caption": PropTypes.string.isRequired,
-      "container": PropTypes.string.isRequired,
-      "day": PropTypes.string.isRequired,
-      "disabled": PropTypes.string.isRequired,
-      "footer": PropTypes.string.isRequired,
-      "interactionDisabled": PropTypes.string.isRequired,
-      "month": PropTypes.string.isRequired,
-      "months": PropTypes.string.isRequired,
-      "navBar": PropTypes.string.isRequired,
-      "navButtonInteractionDisabled": PropTypes.string.isRequired,
-      "navButtonNext": PropTypes.string.isRequired,
-      "navButtonPrev": PropTypes.string.isRequired,
-      "outside": PropTypes.string.isRequired,
-      "selected": PropTypes.string.isRequired,
-      "today": PropTypes.string.isRequired,
-      "todayButton": PropTypes.string.isRequired,
-      "week": PropTypes.string.isRequired,
-      "weekday": PropTypes.string.isRequired,
-      "weekdays": PropTypes.string.isRequired,
-      "weekdaysRow": PropTypes.string.isRequired,
-      "weekNumber": PropTypes.string.isRequired,
-      "wrapper": PropTypes.string.isRequired
-    }),
-    "containerProps": PropTypes.object,
-    "dir": PropTypes.string,
-    "disabledDays": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-      "from": PropTypes.instanceOf(Date),
-      "to": PropTypes.instanceOf(Date)
-    })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-      "from": PropTypes.instanceOf(Date),
-      "to": PropTypes.instanceOf(Date)
-    })]),
-    "enableOutsideDaysClick": PropTypes.bool,
-    "firstDayOfWeek": PropTypes.number,
-    "fixedWeeks": PropTypes.bool,
-    "fromMonth": PropTypes.instanceOf(Date),
-    "initialMonth": PropTypes.instanceOf(Date),
-    "labels": PropTypes.shape({
-      "nextMonth": PropTypes.string.isRequired,
-      "previousMonth": PropTypes.string.isRequired
-    }),
-    "locale": PropTypes.string,
-    "localeUtils": PropTypes.shape({
-      "formatDate": PropTypes.func.isRequired,
-      "formatDay": PropTypes.func.isRequired,
-      "formatMonthTitle": PropTypes.func.isRequired,
-      "formatWeekdayLong": PropTypes.func.isRequired,
-      "formatWeekdayShort": PropTypes.func.isRequired,
-      "getFirstDayOfWeek": PropTypes.func.isRequired,
-      "getMonths": PropTypes.func.isRequired,
-      "parseDate": PropTypes.func.isRequired
-    }),
-    "modifiers": PropTypes.shape({
-      "outside": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-        "from": PropTypes.instanceOf(Date),
-        "to": PropTypes.instanceOf(Date)
-      })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-        "from": PropTypes.instanceOf(Date),
-        "to": PropTypes.instanceOf(Date)
-      })]),
-      "today": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-        "from": PropTypes.instanceOf(Date),
-        "to": PropTypes.instanceOf(Date)
-      })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-        "from": PropTypes.instanceOf(Date),
-        "to": PropTypes.instanceOf(Date)
-      })])
-    }),
-    "modifiersStyles": PropTypes.object,
-    "month": PropTypes.instanceOf(Date),
-    "months": PropTypes.arrayOf(PropTypes.string),
-    "navbarElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
-      "childContextTypes": PropTypes.object,
-      "contextType": PropTypes.shape({
-        "Consumer": PropTypes.func.isRequired,
-        "displayName": PropTypes.string,
-        "Provider": PropTypes.func.isRequired
-      }),
-      "contextTypes": PropTypes.object,
-      "defaultProps": PropTypes.shape({
-        "className": PropTypes.string,
-        "classNames": PropTypes.object,
-        "dir": PropTypes.string,
-        "labels": PropTypes.object,
-        "locale": PropTypes.string,
-        "localeUtils": PropTypes.object,
-        "month": PropTypes.instanceOf(Date),
-        "nextMonth": PropTypes.instanceOf(Date),
-        "onNextClick": PropTypes.func,
-        "onPreviousClick": PropTypes.func,
-        "previousMonth": PropTypes.instanceOf(Date),
-        "showNextButton": PropTypes.bool,
-        "showPreviousButton": PropTypes.bool
-      }),
-      "displayName": PropTypes.string,
-      "getDerivedStateFromError": PropTypes.func,
-      "getDerivedStateFromProps": PropTypes.func,
-      "propTypes": PropTypes.shape({
-        "className": PropTypes.func,
-        "classNames": PropTypes.func,
-        "dir": PropTypes.func,
-        "labels": PropTypes.func,
-        "locale": PropTypes.func,
-        "localeUtils": PropTypes.func,
-        "month": PropTypes.func,
-        "nextMonth": PropTypes.func,
-        "onNextClick": PropTypes.func,
-        "onPreviousClick": PropTypes.func,
-        "previousMonth": PropTypes.func,
-        "showNextButton": PropTypes.func,
-        "showPreviousButton": PropTypes.func
-      })
-    })]),
-    "numberOfMonths": PropTypes.number,
-    "onBlur": PropTypes.func,
-    "onCaptionClick": PropTypes.func,
-    "onDayClick": PropTypes.func,
-    "onDayKeyDown": PropTypes.func,
-    "onDayMouseDown": PropTypes.func,
-    "onDayMouseEnter": PropTypes.func,
-    "onDayMouseLeave": PropTypes.func,
-    "onDayMouseUp": PropTypes.func,
-    "onDayTouchEnd": PropTypes.func,
-    "onDayTouchStart": PropTypes.func,
-    "onFocus": PropTypes.func,
-    "onKeyDown": PropTypes.func,
-    "onMonthChange": PropTypes.func,
-    "onTodayButtonClick": PropTypes.func,
-    "onWeekClick": PropTypes.func,
-    "pagedNavigation": PropTypes.bool,
-    "renderDay": PropTypes.func,
-    "renderWeek": PropTypes.func,
-    "reverseMonths": PropTypes.bool,
-    "selectedDays": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-      "from": PropTypes.instanceOf(Date),
-      "to": PropTypes.instanceOf(Date)
-    })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
-      "from": PropTypes.instanceOf(Date),
-      "to": PropTypes.instanceOf(Date)
-    })]),
-    "showOutsideDays": PropTypes.bool,
-    "showWeekDays": PropTypes.bool,
-    "showWeekNumbers": PropTypes.bool,
-    "tabIndex": PropTypes.number,
-    "todayButton": PropTypes.string,
-    "toMonth": PropTypes.instanceOf(Date),
-    "weekdayElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
-      "childContextTypes": PropTypes.object,
-      "contextType": PropTypes.shape({
-        "Consumer": PropTypes.func.isRequired,
-        "displayName": PropTypes.string,
-        "Provider": PropTypes.func.isRequired
-      }),
-      "contextTypes": PropTypes.object,
-      "defaultProps": PropTypes.shape({
-        "className": PropTypes.string,
-        "locale": PropTypes.string,
-        "localeUtils": PropTypes.object,
-        "weekday": PropTypes.number,
-        "weekdaysLong": PropTypes.arrayOf(PropTypes.string),
-        "weekdaysShort": PropTypes.arrayOf(PropTypes.string)
-      }),
-      "displayName": PropTypes.string,
-      "getDerivedStateFromError": PropTypes.func,
-      "getDerivedStateFromProps": PropTypes.func,
-      "propTypes": PropTypes.shape({
-        "className": PropTypes.func,
-        "locale": PropTypes.func,
-        "localeUtils": PropTypes.func,
-        "weekday": PropTypes.func,
-        "weekdaysLong": PropTypes.func,
-        "weekdaysShort": PropTypes.func
-      })
-    })]),
-    "weekdaysLong": PropTypes.arrayOf(PropTypes.string),
-    "weekdaysShort": PropTypes.arrayOf(PropTypes.string)
-  }),
-  "selectedDays": PropTypes.instanceOf(Date)
 };
-export { DatePicker };
 DatePicker.displayName = "DatePicker";
 export default DatePicker;

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import baseTheme from "../../../../style/themes/base";
 import addFocusStyling from "../../../../style/utils/add-focus-styling";
 const oldFocusStyling = `
@@ -185,9 +185,14 @@ const StyledDayPicker = styled.div`
   position: absolute;
   height: 346px;
   width: 352px;
-  z-index: ${({
+  ${({
   theme
-}) => theme.zIndex.popover};
+}) => css`
+    z-index: ${theme.zIndex.popover};
+    ${!theme.focusRedesignOptOut && `
+      margin-top: var(--spacing050);
+    `}
+  `}
 
   .DayPicker {
     z-index: 1000;

package/esm/components/date/__internal__/navbar/navbar.component.js

@@ -3,19 +3,38 @@ import PropTypes from "prop-types";
 import StyledButton from "./button.style";
 import StyledNavbar from "./navbar.style";
 import Icon from "../../../icon";
+import Events from "../../../../__internal__/utils/helpers/events";
+import useLocale from "../../../../hooks/__internal__/useLocale";
 export const Navbar = ({
   onPreviousClick,
   onNextClick,
   className
-}) => /*#__PURE__*/React.createElement(StyledNavbar, {
-  className: className
-}, /*#__PURE__*/React.createElement(StyledButton, {
-  onClick: () => onPreviousClick?.()
-}, /*#__PURE__*/React.createElement(Icon, {
-  type: "chevron_left"
-})), /*#__PURE__*/React.createElement(StyledButton, {
-  onClick: () => onNextClick?.()
-}, /*#__PURE__*/React.createElement(Icon, {
-  type: "chevron_right"
-})));
+}) => {
+  const locale = useLocale();
+  const {
+    previousMonthButton,
+    nextMonthButton
+  } = locale.date.ariaLabels;
+  const handleKeyDown = ev => {
+    if (Events.isLeftKey(ev) || Events.isRightKey(ev) || Events.isUpKey(ev) || Events.isDownKey(ev)) {
+      ev.stopPropagation();
+      ev.preventDefault();
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledNavbar, {
+    className: className
+  }, /*#__PURE__*/React.createElement(StyledButton, {
+    "aria-label": previousMonthButton(),
+    onClick: () => onPreviousClick?.(),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron_left"
+  })), /*#__PURE__*/React.createElement(StyledButton, {
+    "aria-label": nextMonthButton(),
+    onClick: () => onNextClick?.(),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron_right"
+  })));
+};
 export default Navbar;

package/esm/components/date/date.component.js

@@ -13,6 +13,7 @@ import DateRangeContext from "../date-range/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import guid from "../../__internal__/utils/helpers/guid";
 let deprecateInputRefWarnTriggered = false;
 const DateInput = /*#__PURE__*/React.forwardRef(({
   adaptiveLabelBreakpoint,
@@ -65,6 +66,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const [open, setOpen] = useState(false);
   const [selectedDays, setSelectedDays] = useState(checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value));
   const isInitialValue = useRef(true);
+  const pickerTabGuardId = useRef(guid());
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `DateInput` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -182,8 +184,16 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     if (onKeyDown) {
       onKeyDown(ev);
     }
-    if (Events.isTabKey(ev)) {
+    if (Events.isEscKey(ev)) {
       setOpen(false);
+    }
+    if (open && Events.isTabKey(ev)) {
+      if (Events.isShiftKey(ev)) {
+        setOpen(false);
+      } else if (!disablePortal) {
+        ev.preventDefault();
+        document?.querySelector(`[id="${pickerTabGuardId.current}"]`)?.focus();
+      }
       alreadyFocused.current = false;
     }
   };
@@ -311,7 +321,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     minDate: minDate,
     maxDate: maxDate,
     pickerMouseDown: handlePickerMouseDown,
-    open: open
+    open: open,
+    setOpen: setOpen,
+    pickerTabGuardId: pickerTabGuardId.current
   }));
 });
 DateInput.propTypes = {

package/esm/components/message/message.component.js

@@ -40,7 +40,6 @@ const Message = /*#__PURE__*/React.forwardRef(({
     className: className,
     transparent: transparent,
     variant: variant,
-    role: "status",
     id: id,
     ref: refToPass
   }, marginProps, {

package/esm/locales/en-gb.js

@@ -30,7 +30,11 @@ const enGB = {
     visuallyHiddenHint: formattedCount => `You can enter up to ${formattedCount} characters`
   },
   date: {
-    dateFnsLocale: () => enGBDateLocale
+    dateFnsLocale: () => enGBDateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Previous month",
+      nextMonthButton: () => "Next month"
+    }
   },
   dialog: {
     ariaLabels: {

package/esm/locales/locale.d.ts

@@ -30,6 +30,10 @@ interface Locale {
     };
     date: {
         dateFnsLocale: () => DateFnsLocale;
+        ariaLabels: {
+            previousMonthButton: () => string;
+            nextMonthButton: () => string;
+        };
     };
     dialog: {
         ariaLabels: {

package/esm/locales/pl-pl.js

@@ -67,7 +67,11 @@ const plPL = {
     visuallyHiddenHint: formattedCount => `Można wprowadzić do ${formattedCount} znaków`
   },
   date: {
-    dateFnsLocale: () => plDateLocale
+    dateFnsLocale: () => plDateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Poprzedni miesiąc",
+      nextMonthButton: () => "Następny miesiąc"
+    }
   },
   dialog: {
     ariaLabels: {

package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -33,6 +33,13 @@ export interface DatePickerProps {
     open?: boolean;
     /** Callback triggered when a Day is clicked */
     onDayClick?: (date: Date, ev: React.MouseEvent<HTMLDivElement>) => void;
+    /** Sets the picker open state */
+    setOpen: (isOpen: boolean) => void;
+    /** Id passed to tab guard element */
+    pickerTabGuardId?: string;
 }
-export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: {
+    ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, }: DatePickerProps): React.JSX.Element | null;
+    displayName: string;
+};
 export default DatePicker;

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -14,6 +14,8 @@ var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/
 var _navbar = _interopRequireDefault(require("../navbar"));
 var _weekday = _interopRequireDefault(require("../weekday"));
 var _dayPicker = _interopRequireDefault(require("./day-picker.style"));
+var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
+var _focusTrapUtils = require("../../../../__internal__/focus-trap/focus-trap-utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,7 +25,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const popoverMiddleware = [(0, _dom.offset)(3), (0, _dom.flip)({
   fallbackStrategy: "initialPlacement"
 })];
-const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
+const DatePicker = ({
   inputElement,
   minDate,
   maxDate,
@@ -32,8 +34,10 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   onDayClick,
   pickerMouseDown,
   pickerProps,
-  open
-}, ref) => {
+  open,
+  setOpen,
+  pickerTabGuardId
+}) => {
   const l = (0, _useLocale.default)();
   const {
     localize,
@@ -66,6 +70,28 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
   }, [l, localize]);
+  const ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (open) {
+      // this is a temporary fix for some axe issues that are baked into the library we use for the picker
+      const captionElement = ref.current?.querySelector(".DayPicker-Caption");
+      /* istanbul ignore else */
+      if (captionElement) {
+        captionElement.removeAttribute("role");
+        captionElement.removeAttribute("aria-live");
+      }
+
+      // focus the selected or today's date first
+      const selectedDay = ref.current?.querySelector(".DayPicker-Day--selected") || ref.current?.querySelector(".DayPicker-Day--today");
+      const firstDay = ref.current?.querySelector(".DayPicker-Day[tabindex='0']");
+
+      /* istanbul ignore else */
+      if (selectedDay && firstDay !== selectedDay) {
+        selectedDay?.setAttribute("tabindex", "0");
+        firstDay?.setAttribute("tabindex", "-1");
+      }
+    }
+  }, [open]);
   const handleDayClick = (date, modifiers, ev) => {
     if (!modifiers.disabled) {
       const {
@@ -80,6 +106,35 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
       onDayClick?.(date, ev);
     }
   };
+  const handleOnKeyDown = ev => {
+    if (_events.default.isEscKey(ev)) {
+      inputElement.current?.querySelector("input")?.focus();
+      setOpen(false);
+    }
+    if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && _events.default.isTabKey(ev) && _events.default.isShiftKey(ev)) {
+      ev.preventDefault();
+      setOpen(false);
+      inputElement.current?.querySelector("input")?.focus();
+    }
+  };
+  const handleOnDayKeyDown = (_day, _modifiers, ev) => {
+    // we need to manually handle this as the picker may be in a Portal
+    /* istanbul ignore else */
+    if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
+      ev.preventDefault();
+      setOpen(false);
+      const input = inputElement.current?.querySelector("input");
+
+      /* istanbul ignore else */
+      if (input) {
+        const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
+        const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
+        const nextIndex = filteredElements.indexOf(input) + 1;
+        filteredElements[nextIndex]?.focus();
+      }
+    }
+  };
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
   if (!open) {
     return null;
@@ -87,6 +142,9 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   const localeUtils = {
     formatDay
   };
+  const handleTabGuardFocus = () => {
+    ref.current?.querySelector("button")?.focus();
+  };
   return /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: "bottom-start",
     reference: inputElement,
@@ -94,8 +152,15 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
     disablePortal: disablePortal
   }, /*#__PURE__*/_react.default.createElement(_dayPicker.default, {
     ref: ref,
-    onMouseDown: pickerMouseDown
-  }, /*#__PURE__*/_react.default.createElement(_reactDayPicker.default, _extends({
+    onMouseDown: pickerMouseDown,
+    onKeyDown: handleOnKeyDown
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: pickerTabGuardId
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    onFocus: handleTabGuardFocus
+  }), /*#__PURE__*/_react.default.createElement(_reactDayPicker.default, _extends({
     month: selectedDays,
     months: monthsLong,
     firstDayOfWeek: weekStartsOn,
@@ -116,238 +181,11 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
     initialMonth: selectedDays || undefined,
     disabledDays: (0, _utils.getDisabledDays)(minDate, maxDate),
     locale: l.locale(),
-    localeUtils: localeUtils
+    localeUtils: localeUtils,
+    onDayKeyDown: handleOnDayKeyDown
   }, pickerProps))));
-});
-exports.DatePicker = DatePicker;
-DatePicker.propTypes = {
-  "disablePortal": _propTypes.default.bool,
-  "inputElement": _propTypes.default.shape({
-    "current": function (props, propName) {
-      if (props[propName] == null) {
-        return null;
-      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error("Expected prop '" + propName + "' to be of type Element");
-      }
-    }
-  }).isRequired,
-  "maxDate": _propTypes.default.string,
-  "minDate": _propTypes.default.string,
-  "onDayClick": _propTypes.default.func,
-  "open": _propTypes.default.bool,
-  "pickerMouseDown": _propTypes.default.func,
-  "pickerProps": _propTypes.default.shape({
-    "canChangeMonth": _propTypes.default.bool,
-    "captionElement": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.shape({
-      "childContextTypes": _propTypes.default.object,
-      "contextType": _propTypes.default.shape({
-        "Consumer": _propTypes.default.func.isRequired,
-        "displayName": _propTypes.default.string,
-        "Provider": _propTypes.default.func.isRequired
-      }),
-      "contextTypes": _propTypes.default.object,
-      "defaultProps": _propTypes.default.shape({
-        "classNames": _propTypes.default.object,
-        "date": _propTypes.default.instanceOf(Date),
-        "locale": _propTypes.default.string,
-        "localeUtils": _propTypes.default.object,
-        "months": _propTypes.default.arrayOf(_propTypes.default.string),
-        "onClick": _propTypes.default.func
-      }),
-      "displayName": _propTypes.default.string,
-      "getDerivedStateFromError": _propTypes.default.func,
-      "getDerivedStateFromProps": _propTypes.default.func,
-      "propTypes": _propTypes.default.shape({
-        "classNames": _propTypes.default.func,
-        "date": _propTypes.default.func,
-        "locale": _propTypes.default.func,
-        "localeUtils": _propTypes.default.func,
-        "months": _propTypes.default.func,
-        "onClick": _propTypes.default.func
-      })
-    })]),
-    "className": _propTypes.default.string,
-    "classNames": _propTypes.default.shape({
-      "body": _propTypes.default.string.isRequired,
-      "caption": _propTypes.default.string.isRequired,
-      "container": _propTypes.default.string.isRequired,
-      "day": _propTypes.default.string.isRequired,
-      "disabled": _propTypes.default.string.isRequired,
-      "footer": _propTypes.default.string.isRequired,
-      "interactionDisabled": _propTypes.default.string.isRequired,
-      "month": _propTypes.default.string.isRequired,
-      "months": _propTypes.default.string.isRequired,
-      "navBar": _propTypes.default.string.isRequired,
-      "navButtonInteractionDisabled": _propTypes.default.string.isRequired,
-      "navButtonNext": _propTypes.default.string.isRequired,
-      "navButtonPrev": _propTypes.default.string.isRequired,
-      "outside": _propTypes.default.string.isRequired,
-      "selected": _propTypes.default.string.isRequired,
-      "today": _propTypes.default.string.isRequired,
-      "todayButton": _propTypes.default.string.isRequired,
-      "week": _propTypes.default.string.isRequired,
-      "weekday": _propTypes.default.string.isRequired,
-      "weekdays": _propTypes.default.string.isRequired,
-      "weekdaysRow": _propTypes.default.string.isRequired,
-      "weekNumber": _propTypes.default.string.isRequired,
-      "wrapper": _propTypes.default.string.isRequired
-    }),
-    "containerProps": _propTypes.default.object,
-    "dir": _propTypes.default.string,
-    "disabledDays": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-      "from": _propTypes.default.instanceOf(Date),
-      "to": _propTypes.default.instanceOf(Date)
-    })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-      "from": _propTypes.default.instanceOf(Date),
-      "to": _propTypes.default.instanceOf(Date)
-    })]),
-    "enableOutsideDaysClick": _propTypes.default.bool,
-    "firstDayOfWeek": _propTypes.default.number,
-    "fixedWeeks": _propTypes.default.bool,
-    "fromMonth": _propTypes.default.instanceOf(Date),
-    "initialMonth": _propTypes.default.instanceOf(Date),
-    "labels": _propTypes.default.shape({
-      "nextMonth": _propTypes.default.string.isRequired,
-      "previousMonth": _propTypes.default.string.isRequired
-    }),
-    "locale": _propTypes.default.string,
-    "localeUtils": _propTypes.default.shape({
-      "formatDate": _propTypes.default.func.isRequired,
-      "formatDay": _propTypes.default.func.isRequired,
-      "formatMonthTitle": _propTypes.default.func.isRequired,
-      "formatWeekdayLong": _propTypes.default.func.isRequired,
-      "formatWeekdayShort": _propTypes.default.func.isRequired,
-      "getFirstDayOfWeek": _propTypes.default.func.isRequired,
-      "getMonths": _propTypes.default.func.isRequired,
-      "parseDate": _propTypes.default.func.isRequired
-    }),
-    "modifiers": _propTypes.default.shape({
-      "outside": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-        "from": _propTypes.default.instanceOf(Date),
-        "to": _propTypes.default.instanceOf(Date)
-      })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-        "from": _propTypes.default.instanceOf(Date),
-        "to": _propTypes.default.instanceOf(Date)
-      })]),
-      "today": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-        "from": _propTypes.default.instanceOf(Date),
-        "to": _propTypes.default.instanceOf(Date)
-      })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-        "from": _propTypes.default.instanceOf(Date),
-        "to": _propTypes.default.instanceOf(Date)
-      })])
-    }),
-    "modifiersStyles": _propTypes.default.object,
-    "month": _propTypes.default.instanceOf(Date),
-    "months": _propTypes.default.arrayOf(_propTypes.default.string),
-    "navbarElement": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.shape({
-      "childContextTypes": _propTypes.default.object,
-      "contextType": _propTypes.default.shape({
-        "Consumer": _propTypes.default.func.isRequired,
-        "displayName": _propTypes.default.string,
-        "Provider": _propTypes.default.func.isRequired
-      }),
-      "contextTypes": _propTypes.default.object,
-      "defaultProps": _propTypes.default.shape({
-        "className": _propTypes.default.string,
-        "classNames": _propTypes.default.object,
-        "dir": _propTypes.default.string,
-        "labels": _propTypes.default.object,
-        "locale": _propTypes.default.string,
-        "localeUtils": _propTypes.default.object,
-        "month": _propTypes.default.instanceOf(Date),
-        "nextMonth": _propTypes.default.instanceOf(Date),
-        "onNextClick": _propTypes.default.func,
-        "onPreviousClick": _propTypes.default.func,
-        "previousMonth": _propTypes.default.instanceOf(Date),
-        "showNextButton": _propTypes.default.bool,
-        "showPreviousButton": _propTypes.default.bool
-      }),
-      "displayName": _propTypes.default.string,
-      "getDerivedStateFromError": _propTypes.default.func,
-      "getDerivedStateFromProps": _propTypes.default.func,
-      "propTypes": _propTypes.default.shape({
-        "className": _propTypes.default.func,
-        "classNames": _propTypes.default.func,
-        "dir": _propTypes.default.func,
-        "labels": _propTypes.default.func,
-        "locale": _propTypes.default.func,
-        "localeUtils": _propTypes.default.func,
-        "month": _propTypes.default.func,
-        "nextMonth": _propTypes.default.func,
-        "onNextClick": _propTypes.default.func,
-        "onPreviousClick": _propTypes.default.func,
-        "previousMonth": _propTypes.default.func,
-        "showNextButton": _propTypes.default.func,
-        "showPreviousButton": _propTypes.default.func
-      })
-    })]),
-    "numberOfMonths": _propTypes.default.number,
-    "onBlur": _propTypes.default.func,
-    "onCaptionClick": _propTypes.default.func,
-    "onDayClick": _propTypes.default.func,
-    "onDayKeyDown": _propTypes.default.func,
-    "onDayMouseDown": _propTypes.default.func,
-    "onDayMouseEnter": _propTypes.default.func,
-    "onDayMouseLeave": _propTypes.default.func,
-    "onDayMouseUp": _propTypes.default.func,
-    "onDayTouchEnd": _propTypes.default.func,
-    "onDayTouchStart": _propTypes.default.func,
-    "onFocus": _propTypes.default.func,
-    "onKeyDown": _propTypes.default.func,
-    "onMonthChange": _propTypes.default.func,
-    "onTodayButtonClick": _propTypes.default.func,
-    "onWeekClick": _propTypes.default.func,
-    "pagedNavigation": _propTypes.default.bool,
-    "renderDay": _propTypes.default.func,
-    "renderWeek": _propTypes.default.func,
-    "reverseMonths": _propTypes.default.bool,
-    "selectedDays": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-      "from": _propTypes.default.instanceOf(Date),
-      "to": _propTypes.default.instanceOf(Date)
-    })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
-      "from": _propTypes.default.instanceOf(Date),
-      "to": _propTypes.default.instanceOf(Date)
-    })]),
-    "showOutsideDays": _propTypes.default.bool,
-    "showWeekDays": _propTypes.default.bool,
-    "showWeekNumbers": _propTypes.default.bool,
-    "tabIndex": _propTypes.default.number,
-    "todayButton": _propTypes.default.string,
-    "toMonth": _propTypes.default.instanceOf(Date),
-    "weekdayElement": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.shape({
-      "childContextTypes": _propTypes.default.object,
-      "contextType": _propTypes.default.shape({
-        "Consumer": _propTypes.default.func.isRequired,
-        "displayName": _propTypes.default.string,
-        "Provider": _propTypes.default.func.isRequired
-      }),
-      "contextTypes": _propTypes.default.object,
-      "defaultProps": _propTypes.default.shape({
-        "className": _propTypes.default.string,
-        "locale": _propTypes.default.string,
-        "localeUtils": _propTypes.default.object,
-        "weekday": _propTypes.default.number,
-        "weekdaysLong": _propTypes.default.arrayOf(_propTypes.default.string),
-        "weekdaysShort": _propTypes.default.arrayOf(_propTypes.default.string)
-      }),
-      "displayName": _propTypes.default.string,
-      "getDerivedStateFromError": _propTypes.default.func,
-      "getDerivedStateFromProps": _propTypes.default.func,
-      "propTypes": _propTypes.default.shape({
-        "className": _propTypes.default.func,
-        "locale": _propTypes.default.func,
-        "localeUtils": _propTypes.default.func,
-        "weekday": _propTypes.default.func,
-        "weekdaysLong": _propTypes.default.func,
-        "weekdaysShort": _propTypes.default.func
-      })
-    })]),
-    "weekdaysLong": _propTypes.default.arrayOf(_propTypes.default.string),
-    "weekdaysShort": _propTypes.default.arrayOf(_propTypes.default.string)
-  }),
-  "selectedDays": _propTypes.default.instanceOf(Date)
 };
+exports.DatePicker = DatePicker;
 DatePicker.displayName = "DatePicker";
 var _default = DatePicker;
 exports.default = _default;

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _base = _interopRequireDefault(require("../../../../style/themes/base"));
 var _addFocusStyling = _interopRequireDefault(require("../../../../style/utils/add-focus-styling"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
@@ -192,9 +194,14 @@ const StyledDayPicker = _styledComponents.default.div`
   position: absolute;
   height: 346px;
   width: 352px;
-  z-index: ${({
+  ${({
   theme
-}) => theme.zIndex.popover};
+}) => (0, _styledComponents.css)`
+    z-index: ${theme.zIndex.popover};
+    ${!theme.focusRedesignOptOut && `
+      margin-top: var(--spacing050);
+    `}
+  `}
 
   .DayPicker {
     z-index: 1000;

package/lib/components/date/__internal__/navbar/navbar.component.js

@@ -9,22 +9,41 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _button = _interopRequireDefault(require("./button.style"));
 var _navbar = _interopRequireDefault(require("./navbar.style"));
 var _icon = _interopRequireDefault(require("../../../icon"));
+var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
+var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Navbar = ({
   onPreviousClick,
   onNextClick,
   className
-}) => /*#__PURE__*/_react.default.createElement(_navbar.default, {
-  className: className
-}, /*#__PURE__*/_react.default.createElement(_button.default, {
-  onClick: () => onPreviousClick?.()
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "chevron_left"
-})), /*#__PURE__*/_react.default.createElement(_button.default, {
-  onClick: () => onNextClick?.()
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "chevron_right"
-})));
+}) => {
+  const locale = (0, _useLocale.default)();
+  const {
+    previousMonthButton,
+    nextMonthButton
+  } = locale.date.ariaLabels;
+  const handleKeyDown = ev => {
+    if (_events.default.isLeftKey(ev) || _events.default.isRightKey(ev) || _events.default.isUpKey(ev) || _events.default.isDownKey(ev)) {
+      ev.stopPropagation();
+      ev.preventDefault();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_navbar.default, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    "aria-label": previousMonthButton(),
+    onClick: () => onPreviousClick?.(),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "chevron_left"
+  })), /*#__PURE__*/_react.default.createElement(_button.default, {
+    "aria-label": nextMonthButton(),
+    onClick: () => onNextClick?.(),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "chevron_right"
+  })));
+};
 exports.Navbar = Navbar;
 var _default = Navbar;
 exports.default = _default;

package/lib/components/date/date.component.js

@@ -18,6 +18,7 @@ var _dateRange = _interopRequireDefault(require("../date-range/date-range.contex
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -74,6 +75,7 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const [open, setOpen] = (0, _react.useState)(false);
   const [selectedDays, setSelectedDays] = (0, _react.useState)((0, _utils.checkISOFormatAndLength)(value) ? (0, _utils.parseISODate)(value) : (0, _utils.parseDate)(format, value));
   const isInitialValue = (0, _react.useRef)(true);
+  const pickerTabGuardId = (0, _react.useRef)((0, _guid.default)());
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     _logger.default.deprecate("The `inputRef` prop in `DateInput` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -191,8 +193,16 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     if (onKeyDown) {
       onKeyDown(ev);
     }
-    if (_events.default.isTabKey(ev)) {
+    if (_events.default.isEscKey(ev)) {
       setOpen(false);
+    }
+    if (open && _events.default.isTabKey(ev)) {
+      if (_events.default.isShiftKey(ev)) {
+        setOpen(false);
+      } else if (!disablePortal) {
+        ev.preventDefault();
+        document?.querySelector(`[id="${pickerTabGuardId.current}"]`)?.focus();
+      }
       alreadyFocused.current = false;
     }
   };
@@ -320,7 +330,9 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     minDate: minDate,
     maxDate: maxDate,
     pickerMouseDown: handlePickerMouseDown,
-    open: open
+    open: open,
+    setOpen: setOpen,
+    pickerTabGuardId: pickerTabGuardId.current
   }));
 });
 exports.DateInput = DateInput;

package/lib/components/message/message.component.js

@@ -49,7 +49,6 @@ const Message = /*#__PURE__*/_react.default.forwardRef(({
     className: className,
     transparent: transparent,
     variant: variant,
-    role: "status",
     id: id,
     ref: refToPass
   }, marginProps, {

package/lib/locales/en-gb.js

@@ -36,7 +36,11 @@ const enGB = {
     visuallyHiddenHint: formattedCount => `You can enter up to ${formattedCount} characters`
   },
   date: {
-    dateFnsLocale: () => _dateFnsLocales.enGB
+    dateFnsLocale: () => _dateFnsLocales.enGB,
+    ariaLabels: {
+      previousMonthButton: () => "Previous month",
+      nextMonthButton: () => "Next month"
+    }
   },
   dialog: {
     ariaLabels: {

package/lib/locales/locale.d.ts

@@ -30,6 +30,10 @@ interface Locale {
     };
     date: {
         dateFnsLocale: () => DateFnsLocale;
+        ariaLabels: {
+            previousMonthButton: () => string;
+            nextMonthButton: () => string;
+        };
     };
     dialog: {
         ariaLabels: {

package/lib/locales/pl-pl.js

@@ -74,7 +74,11 @@ const plPL = {
     visuallyHiddenHint: formattedCount => `Można wprowadzić do ${formattedCount} znaków`
   },
   date: {
-    dateFnsLocale: () => _dateFnsLocales.pl
+    dateFnsLocale: () => _dateFnsLocales.pl,
+    ariaLabels: {
+      previousMonthButton: () => "Poprzedni miesiąc",
+      nextMonthButton: () => "Następny miesiąc"
+    }
   },
   dialog: {
     ariaLabels: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "123.2.2",
+  "version": "123.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",