@planningcenter/topbar 11.1.1 → 11.2.0-rc.0

package/dist/topbar.umd.js

@@ -1912,6 +1912,9 @@
     ...nativeProps
   }) => {
     return /*#__PURE__*/React.createElement(Unbutton, {
+      "aria-expanded": expanded,
+      "aria-haspopup": "true",
+      "aria-label": `App switcher: ${appName}`,
       onClick: onClick,
       className: classnames(styles$9.button, {
         [styles$9["is-expanded"]]: expanded
@@ -1946,6 +1949,72 @@
     return `${basePath}?${params.toString()}`;
   }
 
+  // Currently scoped to links and buttons since the app switcher only contains
+  // those elements. If this hook is reused in containers with form elements,
+  // expand to include: input, select, textarea, [tabindex]:not([tabindex="-1"])
+  const FOCUSABLE_SELECTOR = "a[href], button:not([disabled])";
+  /**
+   * Manages focus trapping within a container element.
+   *
+   * When `active` becomes true:
+   * - Stores the currently focused element
+   * - Moves focus to the first focusable child
+   *
+   * When `active` becomes false:
+   * - Returns focus to the previously focused element
+   *
+   * While active:
+   * - Tab/Shift+Tab wraps within the container
+   * - Escape calls `onClose`
+   *
+   * Note: focus trapping uses scoped querySelector on the container ref,
+   * which is the same approach used by libraries like focus-trap-react.
+   */
+  function useFocusTrap({
+    active,
+    onClose
+  }) {
+    const containerRef = React.useRef(null);
+    const previousFocusRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      var _a, _b, _c;
+      if (active) {
+        previousFocusRef.current = document.activeElement;
+        (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR)) === null || _b === void 0 ? void 0 : _b.focus();
+      } else {
+        (_c = previousFocusRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        previousFocusRef.current = null;
+      }
+    }, [active]);
+    const handleKeyDown = React.useCallback(e => {
+      var _a;
+      if (!active) {
+        return;
+      }
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const focusable = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(FOCUSABLE_SELECTOR);
+        if (!focusable || focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }, [active, onClose]);
+    return {
+      containerRef,
+      handleKeyDown
+    };
+  }
+
   const fontFamily = {
     fontFamily: `inherit`
   };
@@ -2047,6 +2116,13 @@
     const restProducts = [...apps].filter(({
       name
     }) => name !== "Home" && name !== "Accounts").sort((a, b) => a.name.localeCompare(b.name));
+    const {
+      containerRef: menuRef,
+      handleKeyDown
+    } = useFocusTrap({
+      active: visible,
+      onClose: toggle
+    });
     const listItemProps = {
       ...fontFamily,
       alignItems: "center",
@@ -2063,12 +2139,16 @@
       className: styles$8.popup,
       isVisible: visible
     }, /*#__PURE__*/React.createElement("menu", {
+      ref: menuRef,
       "data-pendo": "app-switcher",
+      onKeyDown: handleKeyDown,
       style: {
         margin: 0,
         padding: 0
       }
     }, homeProduct && (/*#__PURE__*/React.createElement(HoverableListItem, {
+      "aria-current": appName === homeProduct.name ? "page" : undefined,
+      "aria-label": homeProduct.name,
       component: "a",
       "data-pendo": `app-switcher--change-app--${homeProduct.name}`,
       "data-turbolinks": false,
@@ -2093,6 +2173,8 @@
       const isFirst = i === 0;
       const isLast = i === restProducts.length - 1;
       return /*#__PURE__*/React.createElement(HoverableListItem, {
+        "aria-current": name === appName ? "page" : undefined,
+        "aria-label": name,
         component: "a",
         "data-pendo": `app-switcher--change-app--${name}`,
         "data-turbolinks": false,
@@ -2116,6 +2198,8 @@
         size: 18
       }));
     }), accountsProduct && (/*#__PURE__*/React.createElement(HoverableListItem, {
+      "aria-current": appName === accountsProduct.name ? "page" : undefined,
+      "aria-label": accountsProduct.name,
       component: "a",
       "data-pendo": `app-switcher--change-app--${accountsProduct.name}`,
       "data-turbolinks": false,
@@ -2615,6 +2699,13 @@
     const restProducts = [...props.apps].filter(({
       name
     }) => name !== "Home" && name !== "Accounts");
+    const {
+      containerRef: appMenuRef,
+      handleKeyDown: handleAppMenuKeyDown
+    } = useFocusTrap({
+      active: productSwitcherVisible,
+      onClose: () => setProductSwitcherVisible(false)
+    });
     React.useEffect(() => {
       setRoutesMenuVisible(false);
     }, [activeRoute && ((_b = (_a = activeRoute[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.href)]);
@@ -2623,6 +2714,9 @@
         ...props.style
       }
     }, /*#__PURE__*/React.createElement("button", {
+      "aria-expanded": productSwitcherVisible,
+      "aria-haspopup": "true",
+      "aria-label": `App switcher: ${props.appName}`,
       type: "button",
       className: styles$3["appmenu-button"],
       onClick: () => {
@@ -2638,6 +2732,7 @@
     }, props.routes)), /*#__PURE__*/React.createElement(ClientStorage, {
       item: "Topbar:Small:Menus:Products:visibility",
       render: () => (/*#__PURE__*/React.createElement("div", {
+        ref: appMenuRef,
         className: styles$3["appmenu-layer"],
         style: {
           ...(productSwitcherVisible && {
@@ -2646,7 +2741,8 @@
         },
         onClick: () => {
           setProductSwitcherVisible(visible => !visible);
-        }
+        },
+        onKeyDown: handleAppMenuKeyDown
       }, /*#__PURE__*/React.createElement(CloseMenuButton, null), /*#__PURE__*/React.createElement("div", {
         onClick: e => {
           const {
@@ -2658,6 +2754,8 @@
         },
         className: styles$3["appmenu-container"]
       }, /*#__PURE__*/React.createElement("a", {
+        "aria-current": props.appName === (homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) ? "page" : undefined,
+        "aria-label": homeProduct ? homeProduct.name : props.appName,
         "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
         "data-turbolinks": false,
         className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--top"]),
@@ -2675,6 +2773,8 @@
         key: name,
         className: styles$3["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement("a", {
+        "aria-current": name === props.appName ? "page" : undefined,
+        "aria-label": name,
         "data-pendo": `app-switcher--change-app--${name}`,
         "data-turbolinks": false,
         className: styles$3["appmenu-list-a"],