carbon-react 106.6.10 → 106.7.0

package/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -1,11 +1,35 @@
 const defaultFocusableSelectors = 'button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]';
 
+const waitForVisibleAndFocus = element => {
+  const INTERVAL = 10;
+  const MAX_TIME = 100;
+  let timeSoFar = 0;
+
+  const stylesMatch = () => {
+    const actualStyles = window.getComputedStyle(element);
+    return actualStyles.visibility === "visible";
+  };
+
+  const check = () => {
+    /* istanbul ignore else */
+    if (stylesMatch()) {
+      element.focus();
+    } else if (timeSoFar < MAX_TIME) {
+      setTimeout(check, INTERVAL);
+      timeSoFar += INTERVAL;
+    } // just "fail" silently if maxTime exceeded - callback will never be called
+
+  };
+
+  check();
+};
+
 function setElementFocus(element) {
   if (typeof element === "function") {
     element();
   } else {
     const el = element.current || element;
-    el.focus();
+    waitForVisibleAndFocus(el);
   }
 }
 

package/esm/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,10 +1,11 @@
 export default FocusTrap;
-declare function FocusTrap({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, }: {
+declare function FocusTrap({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, isOpen, }: {
     children: any;
     autoFocus?: boolean | undefined;
     focusFirstElement: any;
     bespokeTrap: any;
     wrapperRef: any;
+    isOpen: any;
 }): JSX.Element;
 declare namespace FocusTrap {
     namespace propTypes {
@@ -17,6 +18,7 @@ declare namespace FocusTrap {
         const wrapperRef: PropTypes.Requireable<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;
+        const isOpen: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -2,22 +2,23 @@ import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, use
 import PropTypes from "prop-types";
 import { defaultFocusableSelectors, nextNonRadioElementIndex, isRadio, setElementFocus } from "./focus-trap-utils";
 import { ModalContext } from "../../components/modal/modal.component";
+import usePrevious from "../../hooks/__internal__/usePrevious";
 
 const FocusTrap = ({
   children,
   autoFocus = true,
   focusFirstElement,
   bespokeTrap,
-  wrapperRef
+  wrapperRef,
+  isOpen
 }) => {
   const trapRef = useRef(null);
-  const firstOpen = useRef(true);
   const [focusableElements, setFocusableElements] = useState();
   const [firstElement, setFirstElement] = useState();
   const [lastElement, setLastElement] = useState();
   const [currentFocusedElement, setCurrentFocusedElement] = useState();
   const {
-    isAnimationComplete,
+    isAnimationComplete = true,
     triggerRefocusFlag
   } = useContext(ModalContext);
   const hasNewInputs = useCallback(candidate => {
@@ -53,12 +54,13 @@ const FocusTrap = ({
   useLayoutEffect(() => {
     updateFocusableElements();
   }, [children, updateFocusableElements]);
+  const shouldSetFocus = autoFocus && isOpen && isAnimationComplete && (focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
+  const prevShouldSetFocus = usePrevious(shouldSetFocus);
   useEffect(() => {
-    if (autoFocus && firstOpen.current && isAnimationComplete && (focusFirstElement || firstElement)) {
-      setElementFocus(focusFirstElement || firstElement);
-      firstOpen.current = false;
+    if (shouldSetFocus && !prevShouldSetFocus) {
+      setElementFocus(focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
     }
-  }, [autoFocus, firstElement, focusFirstElement, isAnimationComplete]);
+  }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   useEffect(() => {
     const trapFn = ev => {
       if (bespokeTrap) {
@@ -76,7 +78,7 @@ const FocusTrap = ({
           ev.preventDefault();
         } else if (ev.shiftKey) {
           /* shift + tab */
-          if (activeElement === firstElement) {
+          if (activeElement === firstElement || activeElement === wrapperRef.current) {
             lastElement.focus();
             ev.preventDefault();
           } // If current element is radio button -
@@ -99,7 +101,7 @@ const FocusTrap = ({
     return function cleanup() {
       document.removeEventListener("keydown", trapFn);
     };
-  }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  }, [firstElement, lastElement, focusableElements, bespokeTrap, wrapperRef]);
   const updateCurrentFocusedElement = useCallback(() => {
     const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
 
@@ -114,22 +116,49 @@ const FocusTrap = ({
     };
   }, [updateCurrentFocusedElement]);
   const refocusTrap = useCallback(() => {
+    var _wrapperRef$current;
+
     /* istanbul ignore else */
     if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
       // the trap breaks if it tries to refocus a disabled element
       setElementFocus(currentFocusedElement);
+    } else if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.hasAttribute("tabindex")) {
+      setElementFocus(wrapperRef.current);
     } else if (firstElement) {
       setElementFocus(firstElement);
     }
-  }, [currentFocusedElement, firstElement]);
+  }, [currentFocusedElement, firstElement, wrapperRef]);
   useEffect(() => {
     if (triggerRefocusFlag) {
       refocusTrap();
     }
   }, [triggerRefocusFlag, refocusTrap]);
+  const [tabIndex, setTabIndex] = useState(0);
+  useEffect(() => {
+    // issue in cypress prevents setting tabIndex to -1, instead tabIndex is set to 0 and removed on blur.
+    if (!isOpen) {
+      setTabIndex(0);
+    }
+  }, [isOpen]);
+
+  const onBlur = () => {
+    /* istanbul ignore else */
+    if (isOpen) {
+      setTabIndex(undefined);
+    }
+  };
+
+  const focusProps = {
+    tabIndex,
+    onBlur
+  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+
+  const clonedChildren = React.Children.map(children, child => {
+    return child.props.tabIndex === undefined ? /*#__PURE__*/React.cloneElement(child, focusProps) : child;
+  });
   return /*#__PURE__*/React.createElement("div", {
     ref: trapRef
-  }, children);
+  }, clonedChildren);
 };
 
 FocusTrap.propTypes = {
@@ -149,6 +178,9 @@ FocusTrap.propTypes = {
   /** a ref to the container wrapping the focusable elements */
   wrapperRef: PropTypes.shape({
     current: PropTypes.any
-  })
+  }),
+
+  /* whether the modal (etc.) component that the focus trap is inside is open or not */
+  isOpen: PropTypes.bool
 };
 export default FocusTrap;

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -48,17 +48,17 @@ const AdvancedColorPicker = ({
       setSelectedColorRef(selected.ref.current);
     }
   }, [colors, currentColor, dialogOpen, isOpen]);
-  const handleFocus = useCallback((e, firstFocusableElement, lastFocusableElement) => {
+  const handleFocus = useCallback((e, firstFocusableElement) => {
     if (e.key === "Tab") {
       /* istanbul ignore else */
       if (e.shiftKey) {
         /* istanbul ignore else */
-        if (document.activeElement === selectedColorRef) {
-          lastFocusableElement.focus();
+        if (document.activeElement === firstFocusableElement) {
+          selectedColorRef.focus();
           e.preventDefault();
         }
-      } else if (document.activeElement === lastFocusableElement) {
-        selectedColorRef.focus();
+      } else if (document.activeElement === selectedColorRef) {
+        firstFocusableElement.focus();
         e.preventDefault();
       }
     }

package/esm/components/dialog/dialog.component.js

@@ -155,7 +155,8 @@ const Dialog = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
-    wrapperRef: dialogRef
+    wrapperRef: dialogRef,
+    isOpen: open
   }, /*#__PURE__*/React.createElement(DialogStyle, _extends({
     "aria-modal": true,
     ref: dialogRef,
@@ -165,9 +166,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }, contentPadding), dialogTitle(), /*#__PURE__*/React.createElement(DialogContentStyle, contentPadding, /*#__PURE__*/React.createElement(DialogInnerContentStyle, _extends({
+  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(DialogContentStyle, contentPadding, /*#__PURE__*/React.createElement(DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, contentPadding), children)), closeIcon())));
+  }, contentPadding), children)))));
 };
 
 Dialog.propTypes = {

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -85,7 +85,8 @@ const DialogFullScreen = ({
   }, componentTags), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
-    wrapperRef: dialogRef
+    wrapperRef: dialogRef,
+    isOpen: open
   }, /*#__PURE__*/React.createElement(StyledDialogFullScreen, _extends({
     "aria-modal": role === "dialog" ? true : undefined
   }, ariaProps, {
@@ -93,12 +94,12 @@ const DialogFullScreen = ({
     "data-element": "dialog-full-screen",
     pagesStyling: pagesStyling,
     role: role
-  }), dialogTitle(), /*#__PURE__*/React.createElement(StyledContent, {
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledContent, {
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
-  }, children), closeIcon())));
+  }, children))));
 };
 
 DialogFullScreen.defaultProps = {

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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, { useContext, useLayoutEffect, useRef } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledMenuFullscreen, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
 import { StyledMenuWrapper } from "../menu.style";
@@ -33,19 +33,6 @@ const MenuFullscreen = ({
     }
   };
 
-  useLayoutEffect(() => {
-    const checkTransitionEnd = () => {
-      menuContentRef.current.focus();
-    };
-
-    const wrapperRef = menuWrapperRef.current;
-
-    if (isOpen) {
-      wrapperRef.addEventListener("transitionend", checkTransitionEnd);
-    } else {
-      wrapperRef.removeEventListener("transitionend", checkTransitionEnd);
-    }
-  }, [isOpen]);
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -61,8 +48,8 @@ const MenuFullscreen = ({
   return /*#__PURE__*/React.createElement("li", {
     "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
-    autoFocus: false,
-    wrapperRef: menuWrapperRef
+    wrapperRef: menuWrapperRef,
+    isOpen: isOpen
   }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, _extends({
     "data-component": "menu-fullscreen",
     ref: menuWrapperRef,
@@ -93,8 +80,7 @@ const MenuFullscreen = ({
     display: "flex",
     flexDirection: "column",
     role: "list",
-    inFullscreenView: true,
-    tabIndex: -1
+    inFullscreenView: true
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       inFullscreenView: true,

package/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -12,6 +12,7 @@ const StyledMenuFullscreen = styled.div`
   bottom: 0;
   height: 100vh;
   width: 100%;
+  outline: none;
 
   a,
   button,

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -1,13 +1,15 @@
 export default SidebarHeader;
-declare function SidebarHeader({ className, children, ...props }: {
+declare function SidebarHeader({ className, children, id, ...props }: {
     [x: string]: any;
     className: any;
     children: any;
+    id: any;
 }): JSX.Element;
 declare namespace SidebarHeader {
     namespace propTypes {
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const className: PropTypes.Requireable<string>;
+        const id: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -8,9 +8,11 @@ import SidebarHeaderStyle from "./sidebar-header.style";
 const SidebarHeader = ({
   className,
   children,
+  id,
   ...props
 }) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, _extends({
-  className: className
+  className: className,
+  id: id
 }, tagComponent("sidebar-header", props)), children);
 
 SidebarHeader.propTypes = {
@@ -18,6 +20,9 @@ SidebarHeader.propTypes = {
   children: PropTypes.node,
 
   /** A custom class name. */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /** A custom id. */
+  id: PropTypes.string
 };
 export default SidebarHeader;

package/esm/components/sidebar/sidebar.component.js

@@ -10,6 +10,7 @@ import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
 import Box from "../box";
 import { SIDEBAR_SIZES, SIDEBAR_ALIGNMENTS } from "./sidebar.config";
+import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
@@ -28,6 +29,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const locale = useLocale();
+  const {
+    current: titleId
+  } = useRef(createGuid());
   let sidebarRef = useRef();
   if (ref) sidebarRef = ref;
 
@@ -51,14 +55,16 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
+    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy,
     ref: sidebarRef,
     position: position,
     size: size,
     "data-element": "sidebar",
     onCancel: onCancel,
     role: role
-  }, closeIcon(), header && /*#__PURE__*/React.createElement(SidebarHeader, null, header), /*#__PURE__*/React.createElement(Box, {
+  }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
+    id: titleId
+  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, {
     "data-element": "sidebar-content",
     p: 4,
     pt: "27px",
@@ -77,7 +83,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     enableBackgroundUI: enableBackgroundUI,
     className: "carbon-sidebar"
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
-    wrapperRef: sidebarRef
+    wrapperRef: sidebarRef,
+    isOpen: open
   }, sidebar));
 });
 Sidebar.propTypes = {

package/lib/__internal__/focus-trap/focus-trap-utils.js

@@ -8,12 +8,36 @@ exports.isRadio = exports.nextNonRadioElementIndex = exports.defaultFocusableSel
 const defaultFocusableSelectors = 'button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]';
 exports.defaultFocusableSelectors = defaultFocusableSelectors;
 
+const waitForVisibleAndFocus = element => {
+  const INTERVAL = 10;
+  const MAX_TIME = 100;
+  let timeSoFar = 0;
+
+  const stylesMatch = () => {
+    const actualStyles = window.getComputedStyle(element);
+    return actualStyles.visibility === "visible";
+  };
+
+  const check = () => {
+    /* istanbul ignore else */
+    if (stylesMatch()) {
+      element.focus();
+    } else if (timeSoFar < MAX_TIME) {
+      setTimeout(check, INTERVAL);
+      timeSoFar += INTERVAL;
+    } // just "fail" silently if maxTime exceeded - callback will never be called
+
+  };
+
+  check();
+};
+
 function setElementFocus(element) {
   if (typeof element === "function") {
     element();
   } else {
     const el = element.current || element;
-    el.focus();
+    waitForVisibleAndFocus(el);
   }
 }
 

package/lib/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,10 +1,11 @@
 export default FocusTrap;
-declare function FocusTrap({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, }: {
+declare function FocusTrap({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, isOpen, }: {
     children: any;
     autoFocus?: boolean | undefined;
     focusFirstElement: any;
     bespokeTrap: any;
     wrapperRef: any;
+    isOpen: any;
 }): JSX.Element;
 declare namespace FocusTrap {
     namespace propTypes {
@@ -17,6 +18,7 @@ declare namespace FocusTrap {
         const wrapperRef: PropTypes.Requireable<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;
+        const isOpen: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -13,6 +13,8 @@ var _focusTrapUtils = require("./focus-trap-utils");
 
 var _modal = require("../../components/modal/modal.component");
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -24,16 +26,16 @@ const FocusTrap = ({
   autoFocus = true,
   focusFirstElement,
   bespokeTrap,
-  wrapperRef
+  wrapperRef,
+  isOpen
 }) => {
   const trapRef = (0, _react.useRef)(null);
-  const firstOpen = (0, _react.useRef)(true);
   const [focusableElements, setFocusableElements] = (0, _react.useState)();
   const [firstElement, setFirstElement] = (0, _react.useState)();
   const [lastElement, setLastElement] = (0, _react.useState)();
   const [currentFocusedElement, setCurrentFocusedElement] = (0, _react.useState)();
   const {
-    isAnimationComplete,
+    isAnimationComplete = true,
     triggerRefocusFlag
   } = (0, _react.useContext)(_modal.ModalContext);
   const hasNewInputs = (0, _react.useCallback)(candidate => {
@@ -69,12 +71,13 @@ const FocusTrap = ({
   (0, _react.useLayoutEffect)(() => {
     updateFocusableElements();
   }, [children, updateFocusableElements]);
+  const shouldSetFocus = autoFocus && isOpen && isAnimationComplete && (focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
+  const prevShouldSetFocus = (0, _usePrevious.default)(shouldSetFocus);
   (0, _react.useEffect)(() => {
-    if (autoFocus && firstOpen.current && isAnimationComplete && (focusFirstElement || firstElement)) {
-      (0, _focusTrapUtils.setElementFocus)(focusFirstElement || firstElement);
-      firstOpen.current = false;
+    if (shouldSetFocus && !prevShouldSetFocus) {
+      (0, _focusTrapUtils.setElementFocus)(focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
     }
-  }, [autoFocus, firstElement, focusFirstElement, isAnimationComplete]);
+  }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   (0, _react.useEffect)(() => {
     const trapFn = ev => {
       if (bespokeTrap) {
@@ -92,7 +95,7 @@ const FocusTrap = ({
           ev.preventDefault();
         } else if (ev.shiftKey) {
           /* shift + tab */
-          if (activeElement === firstElement) {
+          if (activeElement === firstElement || activeElement === wrapperRef.current) {
             lastElement.focus();
             ev.preventDefault();
           } // If current element is radio button -
@@ -115,7 +118,7 @@ const FocusTrap = ({
     return function cleanup() {
       document.removeEventListener("keydown", trapFn);
     };
-  }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  }, [firstElement, lastElement, focusableElements, bespokeTrap, wrapperRef]);
   const updateCurrentFocusedElement = (0, _react.useCallback)(() => {
     const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
 
@@ -130,22 +133,50 @@ const FocusTrap = ({
     };
   }, [updateCurrentFocusedElement]);
   const refocusTrap = (0, _react.useCallback)(() => {
+    var _wrapperRef$current;
+
     /* istanbul ignore else */
     if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
       // the trap breaks if it tries to refocus a disabled element
       (0, _focusTrapUtils.setElementFocus)(currentFocusedElement);
+    } else if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.hasAttribute("tabindex")) {
+      (0, _focusTrapUtils.setElementFocus)(wrapperRef.current);
     } else if (firstElement) {
       (0, _focusTrapUtils.setElementFocus)(firstElement);
     }
-  }, [currentFocusedElement, firstElement]);
+  }, [currentFocusedElement, firstElement, wrapperRef]);
   (0, _react.useEffect)(() => {
     if (triggerRefocusFlag) {
       refocusTrap();
     }
   }, [triggerRefocusFlag, refocusTrap]);
+  const [tabIndex, setTabIndex] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    // issue in cypress prevents setting tabIndex to -1, instead tabIndex is set to 0 and removed on blur.
+    if (!isOpen) {
+      setTabIndex(0);
+    }
+  }, [isOpen]);
+
+  const onBlur = () => {
+    /* istanbul ignore else */
+    if (isOpen) {
+      setTabIndex(undefined);
+    }
+  };
+
+  const focusProps = {
+    tabIndex,
+    onBlur
+  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+
+  const clonedChildren = _react.default.Children.map(children, child => {
+    return child.props.tabIndex === undefined ? /*#__PURE__*/_react.default.cloneElement(child, focusProps) : child;
+  });
+
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
-  }, children);
+  }, clonedChildren);
 };
 
 FocusTrap.propTypes = {
@@ -165,7 +196,10 @@ FocusTrap.propTypes = {
   /** a ref to the container wrapping the focusable elements */
   wrapperRef: _propTypes.default.shape({
     current: _propTypes.default.any
-  })
+  }),
+
+  /* whether the modal (etc.) component that the focus trap is inside is open or not */
+  isOpen: _propTypes.default.bool
 };
 var _default = FocusTrap;
 exports.default = _default;

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -68,17 +68,17 @@ const AdvancedColorPicker = ({
       setSelectedColorRef(selected.ref.current);
     }
   }, [colors, currentColor, dialogOpen, isOpen]);
-  const handleFocus = (0, _react.useCallback)((e, firstFocusableElement, lastFocusableElement) => {
+  const handleFocus = (0, _react.useCallback)((e, firstFocusableElement) => {
     if (e.key === "Tab") {
       /* istanbul ignore else */
       if (e.shiftKey) {
         /* istanbul ignore else */
-        if (document.activeElement === selectedColorRef) {
-          lastFocusableElement.focus();
+        if (document.activeElement === firstFocusableElement) {
+          selectedColorRef.focus();
           e.preventDefault();
         }
-      } else if (document.activeElement === lastFocusableElement) {
-        selectedColorRef.focus();
+      } else if (document.activeElement === selectedColorRef) {
+        firstFocusableElement.focus();
         e.preventDefault();
       }
     }

package/lib/components/dialog/dialog.component.js

@@ -179,7 +179,8 @@ const Dialog = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
-    wrapperRef: dialogRef
+    wrapperRef: dialogRef,
+    isOpen: open
   }, /*#__PURE__*/_react.default.createElement(_dialog.DialogStyle, _extends({
     "aria-modal": true,
     ref: dialogRef,
@@ -189,9 +190,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
+  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, contentPadding), children)), closeIcon())));
+  }, contentPadding), children)))));
 };
 
 Dialog.propTypes = {

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -109,7 +109,8 @@ const DialogFullScreen = ({
   }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
-    wrapperRef: dialogRef
+    wrapperRef: dialogRef,
+    isOpen: open
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
     "aria-modal": role === "dialog" ? true : undefined
   }, ariaProps, {
@@ -117,12 +118,12 @@ const DialogFullScreen = ({
     "data-element": "dialog-full-screen",
     pagesStyling: pagesStyling,
     role: role
-  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
-  }, children), closeIcon())));
+  }, children))));
 };
 
 DialogFullScreen.defaultProps = {

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -57,19 +57,6 @@ const MenuFullscreen = ({
     }
   };
 
-  (0, _react.useLayoutEffect)(() => {
-    const checkTransitionEnd = () => {
-      menuContentRef.current.focus();
-    };
-
-    const wrapperRef = menuWrapperRef.current;
-
-    if (isOpen) {
-      wrapperRef.addEventListener("transitionend", checkTransitionEnd);
-    } else {
-      wrapperRef.removeEventListener("transitionend", checkTransitionEnd);
-    }
-  }, [isOpen]);
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -85,8 +72,8 @@ const MenuFullscreen = ({
   return /*#__PURE__*/_react.default.createElement("li", {
     "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
-    autoFocus: false,
-    wrapperRef: menuWrapperRef
+    wrapperRef: menuWrapperRef,
+    isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, _extends({
     "data-component": "menu-fullscreen",
     ref: menuWrapperRef,
@@ -117,8 +104,7 @@ const MenuFullscreen = ({
     display: "flex",
     flexDirection: "column",
     role: "list",
-    inFullscreenView: true,
-    tabIndex: -1
+    inFullscreenView: true
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
     value: {
       inFullscreenView: true,

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -33,6 +33,7 @@ const StyledMenuFullscreen = _styledComponents.default.div`
   bottom: 0;
   height: 100vh;
   width: 100%;
+  outline: none;
 
   a,
   button,

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -1,13 +1,15 @@
 export default SidebarHeader;
-declare function SidebarHeader({ className, children, ...props }: {
+declare function SidebarHeader({ className, children, id, ...props }: {
     [x: string]: any;
     className: any;
     children: any;
+    id: any;
 }): JSX.Element;
 declare namespace SidebarHeader {
     namespace propTypes {
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const className: PropTypes.Requireable<string>;
+        const id: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -20,9 +20,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const SidebarHeader = ({
   className,
   children,
+  id,
   ...props
 }) => /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
-  className: className
+  className: className,
+  id: id
 }, (0, _tags.default)("sidebar-header", props)), children);
 
 SidebarHeader.propTypes = {
@@ -30,7 +32,10 @@ SidebarHeader.propTypes = {
   children: _propTypes.default.node,
 
   /** A custom class name. */
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+
+  /** A custom id. */
+  id: _propTypes.default.string
 };
 var _default = SidebarHeader;
 exports.default = _default;

package/lib/components/sidebar/sidebar.component.js

@@ -25,6 +25,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _sidebar2 = require("./sidebar.config");
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -55,6 +57,9 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
   let sidebarRef = (0, _react.useRef)();
   if (ref) sidebarRef = ref;
 
@@ -79,14 +84,16 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
+    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy,
     ref: sidebarRef,
     position: position,
     size: size,
     "data-element": "sidebar",
     onCancel: onCancel,
     role: role
-  }, closeIcon(), header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, null, header), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
+    id: titleId
+  }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, {
     "data-element": "sidebar-content",
     p: 4,
     pt: "27px",
@@ -106,7 +113,8 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     enableBackgroundUI: enableBackgroundUI,
     className: "carbon-sidebar"
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
-    wrapperRef: sidebarRef
+    wrapperRef: sidebarRef,
+    isOpen: open
   }, sidebar));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.6.10",
+  "version": "106.7.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {