carbon-react 144.12.0 → 144.12.1

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

@@ -156,7 +156,7 @@ const FocusTrap = ({
     onFocus: updateCurrentFocusedElement
   });
 
-  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
+  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been explicitly set on child
   const clonedChildren = React.Children.map(children, child => {
     const focusableChild = child;
     return /*#__PURE__*/React.cloneElement(focusableChild, focusProps(focusableChild?.props?.tabIndex === undefined));

package/esm/components/popover-container/popover-container.component.js

@@ -15,6 +15,7 @@ import FocusTrap from "../../__internal__/focus-trap";
 import ModalContext from "../modal/__internal__/modal.context";
 import useFocusPortalContent from "../../hooks/__internal__/useFocusPortalContent";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -127,6 +128,24 @@ export const PopoverContainer = ({
     closePopover(e);
   };
   useFocusPortalContent(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
+  const onFocusNextElement = useCallback(ev => {
+    const allFocusableElements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+    const filteredElements = allFocusableElements.filter(el => el === openButtonRef.current || Number(el.tabIndex) !== -1);
+    const openButtonRefIndex = filteredElements.indexOf(openButtonRef.current);
+    filteredElements[openButtonRefIndex + 1].focus();
+    closePopover(ev);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocusGuard = (direction, ev) => {
+    if (direction === "next" && onFocusNextElement) {
+      // Focus the next focusable element outside of the popover
+      onFocusNextElement(ev);
+      return;
+    }
+
+    // istanbul ignore else
+    if (direction === "prev") openButtonRef.current?.focus();
+  };
   const renderOpenComponentProps = {
     tabIndex: 0,
     "aria-expanded": isOpen,
@@ -173,7 +192,21 @@ export const PopoverContainer = ({
   }, /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover())) : popover();
+  }, popover())) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-element": "tab-guard-top"
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    "aria-hidden": true,
+    onFocus: ev => handleFocusGuard("prev", ev)
+  }), popover(), /*#__PURE__*/React.createElement("div", {
+    "data-element": "tab-guard-bottom"
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    "aria-hidden": true,
+    onFocus: ev => handleFocusGuard("next", ev)
+  }));
   return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     onMouseDown: handleClick

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

@@ -165,7 +165,7 @@ const FocusTrap = ({
     onFocus: updateCurrentFocusedElement
   });
 
-  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
+  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been explicitly set on child
   const clonedChildren = _react.default.Children.map(children, child => {
     const focusableChild = child;
     return /*#__PURE__*/_react.default.cloneElement(focusableChild, focusProps(focusableChild?.props?.tabIndex === undefined));

package/lib/components/popover-container/popover-container.component.js

@@ -20,6 +20,7 @@ var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap")
 var _modal = _interopRequireDefault(require("../modal/__internal__/modal.context"));
 var _useFocusPortalContent = _interopRequireDefault(require("../../hooks/__internal__/useFocusPortalContent"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -138,6 +139,24 @@ const PopoverContainer = ({
     closePopover(e);
   };
   (0, _useFocusPortalContent.default)(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
+  const onFocusNextElement = (0, _react.useCallback)(ev => {
+    const allFocusableElements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+    const filteredElements = allFocusableElements.filter(el => el === openButtonRef.current || Number(el.tabIndex) !== -1);
+    const openButtonRefIndex = filteredElements.indexOf(openButtonRef.current);
+    filteredElements[openButtonRefIndex + 1].focus();
+    closePopover(ev);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocusGuard = (direction, ev) => {
+    if (direction === "next" && onFocusNextElement) {
+      // Focus the next focusable element outside of the popover
+      onFocusNextElement(ev);
+      return;
+    }
+
+    // istanbul ignore else
+    if (direction === "prev") openButtonRef.current?.focus();
+  };
   const renderOpenComponentProps = {
     tabIndex: 0,
     "aria-expanded": isOpen,
@@ -184,7 +203,21 @@ const PopoverContainer = ({
   }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover())) : popover();
+  }, popover())) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-element": "tab-guard-top"
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    "aria-hidden": true,
+    onFocus: ev => handleFocusGuard("prev", ev)
+  }), popover(), /*#__PURE__*/_react.default.createElement("div", {
+    "data-element": "tab-guard-bottom"
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    "aria-hidden": true,
+    onFocus: ev => handleFocusGuard("next", ev)
+  }));
   return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     onMouseDown: handleClick

package/package.json

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