@planningcenter/topbar 11.1.2-rc.2 → 11.2.0-rc.0

package/dist/topbar.js

@@ -1925,6 +1925,9 @@ const AppsButton = ({
   ...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
@@ -1959,6 +1962,72 @@ function getAppsSwitchProductPath(productName) {
   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`
 };
@@ -2060,6 +2129,13 @@ const AppsMenu = ({
   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",
@@ -2076,12 +2152,16 @@ const AppsMenu = ({
     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,
@@ -2106,6 +2186,8 @@ const AppsMenu = ({
     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,
@@ -2129,6 +2211,8 @@ const AppsMenu = ({
       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,
@@ -2628,6 +2712,13 @@ const SmallTopbar = ({
   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)]);
@@ -2636,6 +2727,9 @@ const SmallTopbar = ({
       ...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: () => {
@@ -2651,6 +2745,7 @@ const SmallTopbar = ({
   }, 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 && {
@@ -2659,7 +2754,8 @@ const SmallTopbar = ({
       },
       onClick: () => {
         setProductSwitcherVisible(visible => !visible);
-      }
+      },
+      onKeyDown: handleAppMenuKeyDown
     }, /*#__PURE__*/React.createElement(CloseMenuButton, null), /*#__PURE__*/React.createElement("div", {
       onClick: e => {
         const {
@@ -2671,6 +2767,8 @@ const SmallTopbar = ({
       },
       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"]),
@@ -2688,6 +2786,8 @@ const SmallTopbar = ({
       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"],