@procore/data-table 14.46.2 → 14.46.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 14.46.3
+
+### Patch Changes
+
+- 05247ae: Fix inconsistent keyboard focus management across Filters, Configure, and Bulk Edit panels
+  - Move focus to the panel container on open and return focus to the trigger button on close
+  - Add `role="region"` and `aria-label` to panel containers for screen reader announcements
+  - Centralize focus logic in `useContextPanel` hook, removing scattered per-panel implementations
+- Updated dependencies [05247ae]
+  - @procore/toast-alert@5.2.0
+
 ## 14.46.2
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -1402,7 +1402,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1ern5_342 {
+@keyframes _ag-shake-left-to-right_pphrk_342 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5403,7 +5403,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1ern5_1 {
+@keyframes _spin_pphrk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7935,7 +7935,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1ern5_7159 {
+div._contextPanel_pphrk_7159 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7944,7 +7944,12 @@ div._contextPanel_1ern5_7159 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1ern5_7168 {
+div._contextPanel_pphrk_7159:focus {
+  border-color: #2066df;
+  box-shadow: inset 0 0 1px 0 #2066df;
+  outline: none;
+}
+div._contextPanel--hidden_pphrk_7173 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7952,50 +7957,50 @@ div._contextPanel--hidden_1ern5_7168 {
   width: 0px;
 }
 
-._contextPanelWrapper_1ern5_7176 {
+._contextPanelWrapper_pphrk_7181 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1ern5_7181 {
+._contextPanelBody_pphrk_7186 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1ern5_7185 {
+._contextPanel-stickyHeader_pphrk_7190 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1ern5_7192 {
+._filters-list_pphrk_7197 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1ern5_7192 ol {
+._filters-list_pphrk_7197 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1ern5_7201 {
+._col-drag-column-icon_pphrk_7206 {
   color: #6a767c;
 }
 
-._tabular-nums_1ern5_7205 {
+._tabular-nums_pphrk_7210 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1ern5_7159",
-  "contextPanel--hidden": "_contextPanel--hidden_1ern5_7168",
-  "contextPanelWrapper": "_contextPanelWrapper_1ern5_7176",
-  "contextPanelBody": "_contextPanelBody_1ern5_7181",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1ern5_7185",
-  "filters-list": "_filters-list_1ern5_7192",
-  "col-drag-column-icon": "_col-drag-column-icon_1ern5_7201",
-  "tabular-nums": "_tabular-nums_1ern5_7205",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1ern5_342",
-  "spin": "_spin_1ern5_1"
+  "contextPanel": "_contextPanel_pphrk_7159",
+  "contextPanel--hidden": "_contextPanel--hidden_pphrk_7173",
+  "contextPanelWrapper": "_contextPanelWrapper_pphrk_7181",
+  "contextPanelBody": "_contextPanelBody_pphrk_7186",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_pphrk_7190",
+  "filters-list": "_filters-list_pphrk_7197",
+  "col-drag-column-icon": "_col-drag-column-icon_pphrk_7206",
+  "tabular-nums": "_tabular-nums_pphrk_7210",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_pphrk_342",
+  "spin": "_spin_pphrk_1"
 };
 
 // src/CellRenderers/BooleanCell.tsx
@@ -58025,6 +58030,7 @@ var InternalTableContext = React80__default.default.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80__default.default.createRef(),
     show: () => {
     }
   },
@@ -59829,14 +59835,16 @@ var useRowSelectionState = () => {
 var BulkEditActionButton = (props) => {
   const { contextPanel } = useInternalTableContext();
   const i18n = coreReact.useI18nContext();
+  const buttonRef = React80__default.default.useRef(null);
   const editActionLabel = props.actionText ?? i18n.t("dataTable.bulkActions.editValues");
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Button,
     {
+      ref: buttonRef,
       "aria-label": i18n.t("dataTable.bulkActions.bulkEdit"),
       "data-qa": "bulkEditIcon",
       icon: /* @__PURE__ */ React80__default.default.createElement(coreIcons.Pencil, null),
-      onClick: () => contextPanel.show("bulkEdit"),
+      onClick: () => contextPanel.show("bulkEdit", buttonRef.current ?? void 0),
       variant: "tertiary"
     },
     props.showLabel && editActionLabel
@@ -104481,11 +104489,6 @@ var BulkEditPanel = ({}) => {
   const { contextPanel, suppressBulkEditToasts } = useInternalTableContext();
   const I18n = coreReact.useI18nContext();
   const bulkEditRef = React80__default.default.useRef(null);
-  const bodyRef = React80__default.default.useRef(null);
-  React80.useEffect(() => {
-    var _a;
-    (_a = bodyRef.current) == null ? void 0 : _a.focus();
-  }, []);
   return /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel, null, /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Panel.Header,
     {
@@ -104496,7 +104499,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
+  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -104942,18 +104945,34 @@ var ConfigurationPanel = ({
 function useContextPanel() {
   const [content, setContent] = React80.useState();
   const visibility = coreReact.useVisibility({ afterHide: () => setContent(void 0) });
-  const show = React80.useCallback((panelContent) => {
-    setContent(panelContent);
-    visibility.show();
-  }, []);
+  const triggerRef = React80.useRef(null);
+  const panelRef = React80.useRef(null);
+  const show = React80.useCallback(
+    (panelContent, trigger) => {
+      triggerRef.current = trigger ?? null;
+      setContent(panelContent);
+      visibility.show();
+    },
+    []
+  );
   const hide = React80.useCallback(() => {
+    const trigger = triggerRef.current;
     setContent(void 0);
     visibility.hide();
+    trigger == null ? void 0 : trigger.focus();
+    triggerRef.current = null;
   }, []);
+  React80.useEffect(() => {
+    var _a;
+    if (content) {
+      (_a = panelRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [content]);
   return {
     content,
     hide,
     isVisible: visibility.isVisible,
+    panelRef,
     show
   };
 }
@@ -111273,9 +111292,26 @@ var ContextPanel = ({
   ...props
 }) => {
   const { contextPanel } = useInternalTableContext();
+  const I18n = coreReact.useI18nContext();
+  const cardRef = React80__default.default.useRef(null);
+  const panelLabelKeys = {
+    configuration: "dataTable.tableSettings.tableSettings",
+    bulkEdit: "dataTable.bulkActions.editValues"
+  };
+  const panelLabel = contextPanel.content ? panelLabelKeys[contextPanel.content] : void 0;
+  const ariaLabel = panelLabel ? I18n.t(panelLabel) : void 0;
+  React80__default.default.useLayoutEffect(() => {
+    if (contextPanel.content && contextPanel.content !== "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Card,
     {
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": ariaLabel,
       className: cx19("contextPanel", className, {
         "contextPanel--hidden": !contextPanel.isVisible || contextPanel.content === "filters"
       }),
@@ -111548,19 +111584,27 @@ var BaseFiltersPanel = ({
   onClearAllFilters = noop5,
   ...props
 }) => {
-  const ref = React80__default.default.useRef(null);
+  const cardRef = React80__default.default.useRef(null);
   const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
   const I18n = coreReact.useI18nContext();
   const hidden = !contextPanel.isVisible || contextPanel.content !== "filters";
   React80__default.default.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.inert = hidden;
+    if (contextPanel.content === "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
+  React80__default.default.useLayoutEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.inert = hidden;
     }
   }, [hidden]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Card,
     {
-      ref,
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": I18n.t("dataTable.filters.filters"),
       style: { maxHeight: "100vh" },
       className: cx20("contextPanel", className, {
         "contextPanel--hidden": hidden
@@ -111615,6 +111659,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = coreReact.useI18nContext();
+  const buttonRef = React80__default.default.useRef(null);
   return /* @__PURE__ */ React80__default.default.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111624,12 +111669,13 @@ var ConfigPanelButton = () => {
     /* @__PURE__ */ React80__default.default.createElement(
       coreReact.ToggleButton,
       {
+        ref: buttonRef,
         disabled: hasNoContent,
         onClick: () => {
           if (contextPanel.content === "configuration") {
             contextPanel.hide();
           } else {
-            contextPanel.show("configuration");
+            contextPanel.show("configuration", buttonRef.current ?? void 0);
           }
         },
         icon: /* @__PURE__ */ React80__default.default.createElement(
@@ -112806,27 +112852,12 @@ var SingleSelectQuickFilterRenderer = (props) => {
   return /* @__PURE__ */ React80__default.default.createElement(ClientSideSingleSelectQuickFilter, { ...props });
 };
 var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
-var FOCUSABLE_SELECTOR2 = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
   const I18n = coreReact.useI18nContext();
-  const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
+  const { contextPanel, filtersPanelId } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const buttonRef = React80__default.default.useRef(null);
   const isFiltersOpen = contextPanel.content === "filters";
-  const isMounted = React80__default.default.useRef(false);
-  React80__default.default.useEffect(() => {
-    var _a, _b;
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (isFiltersOpen) {
-      const panel = filtersBodyId ? document.getElementById(filtersBodyId) : null;
-      (_a = panel == null ? void 0 : panel.querySelector(FOCUSABLE_SELECTOR2)) == null ? void 0 : _a.focus();
-    } else {
-      (_b = buttonRef.current) == null ? void 0 : _b.focus();
-    }
-  }, [isFiltersOpen, filtersBodyId]);
   if (!hasDefinedFilters) {
     return null;
   }
@@ -112847,7 +112878,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }

package/dist/legacy/index.d.cts

@@ -724,7 +724,8 @@ interface ContextPanelApi {
     content?: ContextPanelContent;
     hide: () => void;
     isVisible: boolean;
-    show: (content: ContextPanelContent) => void;
+    panelRef: React.RefObject<HTMLElement>;
+    show: (content: ContextPanelContent, trigger?: HTMLElement) => void;
 }
 interface CustomFooterConfig {
     height?: RowSize;

package/dist/legacy/index.d.ts

@@ -724,7 +724,8 @@ interface ContextPanelApi {
     content?: ContextPanelContent;
     hide: () => void;
     isVisible: boolean;
-    show: (content: ContextPanelContent) => void;
+    panelRef: React.RefObject<HTMLElement>;
+    show: (content: ContextPanelContent, trigger?: HTMLElement) => void;
 }
 interface CustomFooterConfig {
     height?: RowSize;

package/dist/legacy/index.js

@@ -1389,7 +1389,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1ern5_342 {
+@keyframes _ag-shake-left-to-right_pphrk_342 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5390,7 +5390,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1ern5_1 {
+@keyframes _spin_pphrk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7922,7 +7922,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1ern5_7159 {
+div._contextPanel_pphrk_7159 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7931,7 +7931,12 @@ div._contextPanel_1ern5_7159 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1ern5_7168 {
+div._contextPanel_pphrk_7159:focus {
+  border-color: #2066df;
+  box-shadow: inset 0 0 1px 0 #2066df;
+  outline: none;
+}
+div._contextPanel--hidden_pphrk_7173 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7939,50 +7944,50 @@ div._contextPanel--hidden_1ern5_7168 {
   width: 0px;
 }
 
-._contextPanelWrapper_1ern5_7176 {
+._contextPanelWrapper_pphrk_7181 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1ern5_7181 {
+._contextPanelBody_pphrk_7186 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1ern5_7185 {
+._contextPanel-stickyHeader_pphrk_7190 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1ern5_7192 {
+._filters-list_pphrk_7197 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1ern5_7192 ol {
+._filters-list_pphrk_7197 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1ern5_7201 {
+._col-drag-column-icon_pphrk_7206 {
   color: #6a767c;
 }
 
-._tabular-nums_1ern5_7205 {
+._tabular-nums_pphrk_7210 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1ern5_7159",
-  "contextPanel--hidden": "_contextPanel--hidden_1ern5_7168",
-  "contextPanelWrapper": "_contextPanelWrapper_1ern5_7176",
-  "contextPanelBody": "_contextPanelBody_1ern5_7181",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1ern5_7185",
-  "filters-list": "_filters-list_1ern5_7192",
-  "col-drag-column-icon": "_col-drag-column-icon_1ern5_7201",
-  "tabular-nums": "_tabular-nums_1ern5_7205",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1ern5_342",
-  "spin": "_spin_1ern5_1"
+  "contextPanel": "_contextPanel_pphrk_7159",
+  "contextPanel--hidden": "_contextPanel--hidden_pphrk_7173",
+  "contextPanelWrapper": "_contextPanelWrapper_pphrk_7181",
+  "contextPanelBody": "_contextPanelBody_pphrk_7186",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_pphrk_7190",
+  "filters-list": "_filters-list_pphrk_7197",
+  "col-drag-column-icon": "_col-drag-column-icon_pphrk_7206",
+  "tabular-nums": "_tabular-nums_pphrk_7210",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_pphrk_342",
+  "spin": "_spin_pphrk_1"
 };
 
 // src/CellRenderers/BooleanCell.tsx
@@ -58012,6 +58017,7 @@ var InternalTableContext = React80.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80.createRef(),
     show: () => {
     }
   },
@@ -59816,14 +59822,16 @@ var useRowSelectionState = () => {
 var BulkEditActionButton = (props) => {
   const { contextPanel } = useInternalTableContext();
   const i18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   const editActionLabel = props.actionText ?? i18n.t("dataTable.bulkActions.editValues");
   return /* @__PURE__ */ React80.createElement(
     Button,
     {
+      ref: buttonRef,
       "aria-label": i18n.t("dataTable.bulkActions.bulkEdit"),
       "data-qa": "bulkEditIcon",
       icon: /* @__PURE__ */ React80.createElement(Pencil, null),
-      onClick: () => contextPanel.show("bulkEdit"),
+      onClick: () => contextPanel.show("bulkEdit", buttonRef.current ?? void 0),
       variant: "tertiary"
     },
     props.showLabel && editActionLabel
@@ -104468,11 +104476,6 @@ var BulkEditPanel = ({}) => {
   const { contextPanel, suppressBulkEditToasts } = useInternalTableContext();
   const I18n = useI18nContext();
   const bulkEditRef = React80.useRef(null);
-  const bodyRef = React80.useRef(null);
-  useEffect(() => {
-    var _a;
-    (_a = bodyRef.current) == null ? void 0 : _a.focus();
-  }, []);
   return /* @__PURE__ */ React80.createElement(Panel, null, /* @__PURE__ */ React80.createElement(
     Panel.Header,
     {
@@ -104483,7 +104486,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80.createElement(Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80.createElement(Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
+  ), /* @__PURE__ */ React80.createElement(Panel.Body, null, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -104929,18 +104932,34 @@ var ConfigurationPanel = ({
 function useContextPanel() {
   const [content, setContent] = useState();
   const visibility = useVisibility({ afterHide: () => setContent(void 0) });
-  const show = useCallback((panelContent) => {
-    setContent(panelContent);
-    visibility.show();
-  }, []);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const show = useCallback(
+    (panelContent, trigger) => {
+      triggerRef.current = trigger ?? null;
+      setContent(panelContent);
+      visibility.show();
+    },
+    []
+  );
   const hide = useCallback(() => {
+    const trigger = triggerRef.current;
     setContent(void 0);
     visibility.hide();
+    trigger == null ? void 0 : trigger.focus();
+    triggerRef.current = null;
   }, []);
+  useEffect(() => {
+    var _a;
+    if (content) {
+      (_a = panelRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [content]);
   return {
     content,
     hide,
     isVisible: visibility.isVisible,
+    panelRef,
     show
   };
 }
@@ -111260,9 +111279,26 @@ var ContextPanel = ({
   ...props
 }) => {
   const { contextPanel } = useInternalTableContext();
+  const I18n = useI18nContext();
+  const cardRef = React80.useRef(null);
+  const panelLabelKeys = {
+    configuration: "dataTable.tableSettings.tableSettings",
+    bulkEdit: "dataTable.bulkActions.editValues"
+  };
+  const panelLabel = contextPanel.content ? panelLabelKeys[contextPanel.content] : void 0;
+  const ariaLabel = panelLabel ? I18n.t(panelLabel) : void 0;
+  React80.useLayoutEffect(() => {
+    if (contextPanel.content && contextPanel.content !== "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
   return /* @__PURE__ */ React80.createElement(
     Card,
     {
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": ariaLabel,
       className: cx19("contextPanel", className, {
         "contextPanel--hidden": !contextPanel.isVisible || contextPanel.content === "filters"
       }),
@@ -111535,19 +111571,27 @@ var BaseFiltersPanel = ({
   onClearAllFilters = noop5,
   ...props
 }) => {
-  const ref = React80.useRef(null);
+  const cardRef = React80.useRef(null);
   const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
   const I18n = useI18nContext();
   const hidden = !contextPanel.isVisible || contextPanel.content !== "filters";
   React80.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.inert = hidden;
+    if (contextPanel.content === "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
+  React80.useLayoutEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.inert = hidden;
     }
   }, [hidden]);
   return /* @__PURE__ */ React80.createElement(
     Card,
     {
-      ref,
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": I18n.t("dataTable.filters.filters"),
       style: { maxHeight: "100vh" },
       className: cx20("contextPanel", className, {
         "contextPanel--hidden": hidden
@@ -111602,6 +111646,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   return /* @__PURE__ */ React80.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111611,12 +111656,13 @@ var ConfigPanelButton = () => {
     /* @__PURE__ */ React80.createElement(
       ToggleButton,
       {
+        ref: buttonRef,
         disabled: hasNoContent,
         onClick: () => {
           if (contextPanel.content === "configuration") {
             contextPanel.hide();
           } else {
-            contextPanel.show("configuration");
+            contextPanel.show("configuration", buttonRef.current ?? void 0);
           }
         },
         icon: /* @__PURE__ */ React80.createElement(
@@ -112793,27 +112839,12 @@ var SingleSelectQuickFilterRenderer = (props) => {
   return /* @__PURE__ */ React80.createElement(ClientSideSingleSelectQuickFilter, { ...props });
 };
 var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
-var FOCUSABLE_SELECTOR2 = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
   const I18n = useI18nContext();
-  const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
+  const { contextPanel, filtersPanelId } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const buttonRef = React80.useRef(null);
   const isFiltersOpen = contextPanel.content === "filters";
-  const isMounted = React80.useRef(false);
-  React80.useEffect(() => {
-    var _a, _b;
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (isFiltersOpen) {
-      const panel = filtersBodyId ? document.getElementById(filtersBodyId) : null;
-      (_a = panel == null ? void 0 : panel.querySelector(FOCUSABLE_SELECTOR2)) == null ? void 0 : _a.focus();
-    } else {
-      (_b = buttonRef.current) == null ? void 0 : _b.focus();
-    }
-  }, [isFiltersOpen, filtersBodyId]);
   if (!hasDefinedFilters) {
     return null;
   }
@@ -112834,7 +112865,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }

package/dist/modern/index.cjs

@@ -1400,7 +1400,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1ern5_342 {
+@keyframes _ag-shake-left-to-right_pphrk_342 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5401,7 +5401,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1ern5_1 {
+@keyframes _spin_pphrk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7933,7 +7933,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1ern5_7159 {
+div._contextPanel_pphrk_7159 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7942,7 +7942,12 @@ div._contextPanel_1ern5_7159 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1ern5_7168 {
+div._contextPanel_pphrk_7159:focus {
+  border-color: #2066df;
+  box-shadow: inset 0 0 1px 0 #2066df;
+  outline: none;
+}
+div._contextPanel--hidden_pphrk_7173 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7950,50 +7955,50 @@ div._contextPanel--hidden_1ern5_7168 {
   width: 0px;
 }
 
-._contextPanelWrapper_1ern5_7176 {
+._contextPanelWrapper_pphrk_7181 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1ern5_7181 {
+._contextPanelBody_pphrk_7186 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1ern5_7185 {
+._contextPanel-stickyHeader_pphrk_7190 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1ern5_7192 {
+._filters-list_pphrk_7197 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1ern5_7192 ol {
+._filters-list_pphrk_7197 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1ern5_7201 {
+._col-drag-column-icon_pphrk_7206 {
   color: #6a767c;
 }
 
-._tabular-nums_1ern5_7205 {
+._tabular-nums_pphrk_7210 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1ern5_7159",
-  "contextPanel--hidden": "_contextPanel--hidden_1ern5_7168",
-  "contextPanelWrapper": "_contextPanelWrapper_1ern5_7176",
-  "contextPanelBody": "_contextPanelBody_1ern5_7181",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1ern5_7185",
-  "filters-list": "_filters-list_1ern5_7192",
-  "col-drag-column-icon": "_col-drag-column-icon_1ern5_7201",
-  "tabular-nums": "_tabular-nums_1ern5_7205",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1ern5_342",
-  "spin": "_spin_1ern5_1"
+  "contextPanel": "_contextPanel_pphrk_7159",
+  "contextPanel--hidden": "_contextPanel--hidden_pphrk_7173",
+  "contextPanelWrapper": "_contextPanelWrapper_pphrk_7181",
+  "contextPanelBody": "_contextPanelBody_pphrk_7186",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_pphrk_7190",
+  "filters-list": "_filters-list_pphrk_7197",
+  "col-drag-column-icon": "_col-drag-column-icon_pphrk_7206",
+  "tabular-nums": "_tabular-nums_pphrk_7210",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_pphrk_342",
+  "spin": "_spin_pphrk_1"
 };
 
 // src/CellRenderers/BooleanCell.tsx
@@ -57916,6 +57921,7 @@ var InternalTableContext = React80__default.default.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80__default.default.createRef(),
     show: () => {
     }
   },
@@ -59719,14 +59725,16 @@ var useRowSelectionState = () => {
 var BulkEditActionButton = (props) => {
   const { contextPanel } = useInternalTableContext();
   const i18n = coreReact.useI18nContext();
+  const buttonRef = React80__default.default.useRef(null);
   const editActionLabel = props.actionText ?? i18n.t("dataTable.bulkActions.editValues");
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Button,
     {
+      ref: buttonRef,
       "aria-label": i18n.t("dataTable.bulkActions.bulkEdit"),
       "data-qa": "bulkEditIcon",
       icon: /* @__PURE__ */ React80__default.default.createElement(coreIcons.Pencil, null),
-      onClick: () => contextPanel.show("bulkEdit"),
+      onClick: () => contextPanel.show("bulkEdit", buttonRef.current ?? void 0),
       variant: "tertiary"
     },
     props.showLabel && editActionLabel
@@ -104353,10 +104361,6 @@ var BulkEditPanel = ({}) => {
   const { contextPanel, suppressBulkEditToasts } = useInternalTableContext();
   const I18n = coreReact.useI18nContext();
   const bulkEditRef = React80__default.default.useRef(null);
-  const bodyRef = React80__default.default.useRef(null);
-  React80.useEffect(() => {
-    bodyRef.current?.focus();
-  }, []);
   return /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel, null, /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Panel.Header,
     {
@@ -104366,7 +104370,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
+  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -104801,18 +104805,33 @@ var ConfigurationPanel = ({
 function useContextPanel() {
   const [content, setContent] = React80.useState();
   const visibility = coreReact.useVisibility({ afterHide: () => setContent(void 0) });
-  const show = React80.useCallback((panelContent) => {
-    setContent(panelContent);
-    visibility.show();
-  }, []);
+  const triggerRef = React80.useRef(null);
+  const panelRef = React80.useRef(null);
+  const show = React80.useCallback(
+    (panelContent, trigger) => {
+      triggerRef.current = trigger ?? null;
+      setContent(panelContent);
+      visibility.show();
+    },
+    []
+  );
   const hide = React80.useCallback(() => {
+    const trigger = triggerRef.current;
     setContent(void 0);
     visibility.hide();
+    trigger?.focus();
+    triggerRef.current = null;
   }, []);
+  React80.useEffect(() => {
+    if (content) {
+      panelRef.current?.focus();
+    }
+  }, [content]);
   return {
     content,
     hide,
     isVisible: visibility.isVisible,
+    panelRef,
     show
   };
 }
@@ -111076,9 +111095,26 @@ var ContextPanel = ({
   ...props
 }) => {
   const { contextPanel } = useInternalTableContext();
+  const I18n = coreReact.useI18nContext();
+  const cardRef = React80__default.default.useRef(null);
+  const panelLabelKeys = {
+    configuration: "dataTable.tableSettings.tableSettings",
+    bulkEdit: "dataTable.bulkActions.editValues"
+  };
+  const panelLabel = contextPanel.content ? panelLabelKeys[contextPanel.content] : void 0;
+  const ariaLabel = panelLabel ? I18n.t(panelLabel) : void 0;
+  React80__default.default.useLayoutEffect(() => {
+    if (contextPanel.content && contextPanel.content !== "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Card,
     {
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": ariaLabel,
       className: cx19("contextPanel", className, {
         "contextPanel--hidden": !contextPanel.isVisible || contextPanel.content === "filters"
       }),
@@ -111350,19 +111386,27 @@ var BaseFiltersPanel = ({
   onClearAllFilters = noop5,
   ...props
 }) => {
-  const ref = React80__default.default.useRef(null);
+  const cardRef = React80__default.default.useRef(null);
   const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
   const I18n = coreReact.useI18nContext();
   const hidden = !contextPanel.isVisible || contextPanel.content !== "filters";
   React80__default.default.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.inert = hidden;
+    if (contextPanel.content === "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
+  React80__default.default.useLayoutEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.inert = hidden;
     }
   }, [hidden]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Card,
     {
-      ref,
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": I18n.t("dataTable.filters.filters"),
       style: { maxHeight: "100vh" },
       className: cx20("contextPanel", className, {
         "contextPanel--hidden": hidden
@@ -111416,6 +111460,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = coreReact.useI18nContext();
+  const buttonRef = React80__default.default.useRef(null);
   return /* @__PURE__ */ React80__default.default.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111425,12 +111470,13 @@ var ConfigPanelButton = () => {
     /* @__PURE__ */ React80__default.default.createElement(
       coreReact.ToggleButton,
       {
+        ref: buttonRef,
         disabled: hasNoContent,
         onClick: () => {
           if (contextPanel.content === "configuration") {
             contextPanel.hide();
           } else {
-            contextPanel.show("configuration");
+            contextPanel.show("configuration", buttonRef.current ?? void 0);
           }
         },
         icon: /* @__PURE__ */ React80__default.default.createElement(
@@ -112583,26 +112629,12 @@ var SingleSelectQuickFilterRenderer = (props) => {
   return /* @__PURE__ */ React80__default.default.createElement(ClientSideSingleSelectQuickFilter, { ...props });
 };
 var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
-var FOCUSABLE_SELECTOR2 = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
   const I18n = coreReact.useI18nContext();
-  const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
+  const { contextPanel, filtersPanelId } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const buttonRef = React80__default.default.useRef(null);
   const isFiltersOpen = contextPanel.content === "filters";
-  const isMounted = React80__default.default.useRef(false);
-  React80__default.default.useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (isFiltersOpen) {
-      const panel = filtersBodyId ? document.getElementById(filtersBodyId) : null;
-      panel?.querySelector(FOCUSABLE_SELECTOR2)?.focus();
-    } else {
-      buttonRef.current?.focus();
-    }
-  }, [isFiltersOpen, filtersBodyId]);
   if (!hasDefinedFilters) {
     return null;
   }
@@ -112623,7 +112655,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }

package/dist/modern/index.d.cts

@@ -724,7 +724,8 @@ interface ContextPanelApi {
     content?: ContextPanelContent;
     hide: () => void;
     isVisible: boolean;
-    show: (content: ContextPanelContent) => void;
+    panelRef: React.RefObject<HTMLElement>;
+    show: (content: ContextPanelContent, trigger?: HTMLElement) => void;
 }
 interface CustomFooterConfig {
     height?: RowSize;

package/dist/modern/index.d.ts

@@ -724,7 +724,8 @@ interface ContextPanelApi {
     content?: ContextPanelContent;
     hide: () => void;
     isVisible: boolean;
-    show: (content: ContextPanelContent) => void;
+    panelRef: React.RefObject<HTMLElement>;
+    show: (content: ContextPanelContent, trigger?: HTMLElement) => void;
 }
 interface CustomFooterConfig {
     height?: RowSize;

package/dist/modern/index.js

@@ -1387,7 +1387,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1ern5_342 {
+@keyframes _ag-shake-left-to-right_pphrk_342 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5388,7 +5388,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1ern5_1 {
+@keyframes _spin_pphrk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7920,7 +7920,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1ern5_7159 {
+div._contextPanel_pphrk_7159 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7929,7 +7929,12 @@ div._contextPanel_1ern5_7159 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1ern5_7168 {
+div._contextPanel_pphrk_7159:focus {
+  border-color: #2066df;
+  box-shadow: inset 0 0 1px 0 #2066df;
+  outline: none;
+}
+div._contextPanel--hidden_pphrk_7173 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7937,50 +7942,50 @@ div._contextPanel--hidden_1ern5_7168 {
   width: 0px;
 }
 
-._contextPanelWrapper_1ern5_7176 {
+._contextPanelWrapper_pphrk_7181 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1ern5_7181 {
+._contextPanelBody_pphrk_7186 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1ern5_7185 {
+._contextPanel-stickyHeader_pphrk_7190 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1ern5_7192 {
+._filters-list_pphrk_7197 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1ern5_7192 ol {
+._filters-list_pphrk_7197 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1ern5_7201 {
+._col-drag-column-icon_pphrk_7206 {
   color: #6a767c;
 }
 
-._tabular-nums_1ern5_7205 {
+._tabular-nums_pphrk_7210 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1ern5_7159",
-  "contextPanel--hidden": "_contextPanel--hidden_1ern5_7168",
-  "contextPanelWrapper": "_contextPanelWrapper_1ern5_7176",
-  "contextPanelBody": "_contextPanelBody_1ern5_7181",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1ern5_7185",
-  "filters-list": "_filters-list_1ern5_7192",
-  "col-drag-column-icon": "_col-drag-column-icon_1ern5_7201",
-  "tabular-nums": "_tabular-nums_1ern5_7205",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1ern5_342",
-  "spin": "_spin_1ern5_1"
+  "contextPanel": "_contextPanel_pphrk_7159",
+  "contextPanel--hidden": "_contextPanel--hidden_pphrk_7173",
+  "contextPanelWrapper": "_contextPanelWrapper_pphrk_7181",
+  "contextPanelBody": "_contextPanelBody_pphrk_7186",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_pphrk_7190",
+  "filters-list": "_filters-list_pphrk_7197",
+  "col-drag-column-icon": "_col-drag-column-icon_pphrk_7206",
+  "tabular-nums": "_tabular-nums_pphrk_7210",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_pphrk_342",
+  "spin": "_spin_pphrk_1"
 };
 
 // src/CellRenderers/BooleanCell.tsx
@@ -57903,6 +57908,7 @@ var InternalTableContext = React80.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80.createRef(),
     show: () => {
     }
   },
@@ -59706,14 +59712,16 @@ var useRowSelectionState = () => {
 var BulkEditActionButton = (props) => {
   const { contextPanel } = useInternalTableContext();
   const i18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   const editActionLabel = props.actionText ?? i18n.t("dataTable.bulkActions.editValues");
   return /* @__PURE__ */ React80.createElement(
     Button,
     {
+      ref: buttonRef,
       "aria-label": i18n.t("dataTable.bulkActions.bulkEdit"),
       "data-qa": "bulkEditIcon",
       icon: /* @__PURE__ */ React80.createElement(Pencil, null),
-      onClick: () => contextPanel.show("bulkEdit"),
+      onClick: () => contextPanel.show("bulkEdit", buttonRef.current ?? void 0),
       variant: "tertiary"
     },
     props.showLabel && editActionLabel
@@ -104340,10 +104348,6 @@ var BulkEditPanel = ({}) => {
   const { contextPanel, suppressBulkEditToasts } = useInternalTableContext();
   const I18n = useI18nContext();
   const bulkEditRef = React80.useRef(null);
-  const bodyRef = React80.useRef(null);
-  useEffect(() => {
-    bodyRef.current?.focus();
-  }, []);
   return /* @__PURE__ */ React80.createElement(Panel, null, /* @__PURE__ */ React80.createElement(
     Panel.Header,
     {
@@ -104353,7 +104357,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80.createElement(Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80.createElement(Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
+  ), /* @__PURE__ */ React80.createElement(Panel.Body, null, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -104788,18 +104792,33 @@ var ConfigurationPanel = ({
 function useContextPanel() {
   const [content, setContent] = useState();
   const visibility = useVisibility({ afterHide: () => setContent(void 0) });
-  const show = useCallback((panelContent) => {
-    setContent(panelContent);
-    visibility.show();
-  }, []);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const show = useCallback(
+    (panelContent, trigger) => {
+      triggerRef.current = trigger ?? null;
+      setContent(panelContent);
+      visibility.show();
+    },
+    []
+  );
   const hide = useCallback(() => {
+    const trigger = triggerRef.current;
     setContent(void 0);
     visibility.hide();
+    trigger?.focus();
+    triggerRef.current = null;
   }, []);
+  useEffect(() => {
+    if (content) {
+      panelRef.current?.focus();
+    }
+  }, [content]);
   return {
     content,
     hide,
     isVisible: visibility.isVisible,
+    panelRef,
     show
   };
 }
@@ -111063,9 +111082,26 @@ var ContextPanel = ({
   ...props
 }) => {
   const { contextPanel } = useInternalTableContext();
+  const I18n = useI18nContext();
+  const cardRef = React80.useRef(null);
+  const panelLabelKeys = {
+    configuration: "dataTable.tableSettings.tableSettings",
+    bulkEdit: "dataTable.bulkActions.editValues"
+  };
+  const panelLabel = contextPanel.content ? panelLabelKeys[contextPanel.content] : void 0;
+  const ariaLabel = panelLabel ? I18n.t(panelLabel) : void 0;
+  React80.useLayoutEffect(() => {
+    if (contextPanel.content && contextPanel.content !== "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
   return /* @__PURE__ */ React80.createElement(
     Card,
     {
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": ariaLabel,
       className: cx19("contextPanel", className, {
         "contextPanel--hidden": !contextPanel.isVisible || contextPanel.content === "filters"
       }),
@@ -111337,19 +111373,27 @@ var BaseFiltersPanel = ({
   onClearAllFilters = noop5,
   ...props
 }) => {
-  const ref = React80.useRef(null);
+  const cardRef = React80.useRef(null);
   const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
   const I18n = useI18nContext();
   const hidden = !contextPanel.isVisible || contextPanel.content !== "filters";
   React80.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.inert = hidden;
+    if (contextPanel.content === "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
+  React80.useLayoutEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.inert = hidden;
     }
   }, [hidden]);
   return /* @__PURE__ */ React80.createElement(
     Card,
     {
-      ref,
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": I18n.t("dataTable.filters.filters"),
       style: { maxHeight: "100vh" },
       className: cx20("contextPanel", className, {
         "contextPanel--hidden": hidden
@@ -111403,6 +111447,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   return /* @__PURE__ */ React80.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111412,12 +111457,13 @@ var ConfigPanelButton = () => {
     /* @__PURE__ */ React80.createElement(
       ToggleButton,
       {
+        ref: buttonRef,
         disabled: hasNoContent,
         onClick: () => {
           if (contextPanel.content === "configuration") {
             contextPanel.hide();
           } else {
-            contextPanel.show("configuration");
+            contextPanel.show("configuration", buttonRef.current ?? void 0);
           }
         },
         icon: /* @__PURE__ */ React80.createElement(
@@ -112570,26 +112616,12 @@ var SingleSelectQuickFilterRenderer = (props) => {
   return /* @__PURE__ */ React80.createElement(ClientSideSingleSelectQuickFilter, { ...props });
 };
 var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
-var FOCUSABLE_SELECTOR2 = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
   const I18n = useI18nContext();
-  const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
+  const { contextPanel, filtersPanelId } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const buttonRef = React80.useRef(null);
   const isFiltersOpen = contextPanel.content === "filters";
-  const isMounted = React80.useRef(false);
-  React80.useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (isFiltersOpen) {
-      const panel = filtersBodyId ? document.getElementById(filtersBodyId) : null;
-      panel?.querySelector(FOCUSABLE_SELECTOR2)?.focus();
-    } else {
-      buttonRef.current?.focus();
-    }
-  }, [isFiltersOpen, filtersBodyId]);
   if (!hasDefinedFilters) {
     return null;
   }
@@ -112610,7 +112642,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.46.2",
+  "version": "14.46.3",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "author": "Procore Technologies",
   "homepage": "https://github.com/procore/core/tree/main/packages/data-table",
@@ -77,7 +77,7 @@
     "@procore/error-pages": "^0.2.3",
     "@procore/labs-datetime-select": "^0.2.2",
     "@procore/labs-group-by-select": "4.1.0",
-    "@procore/toast-alert": "^5.1.3",
+    "@procore/toast-alert": "^5.2.0",
     "@procore/web-sdk-storage": "^0.1.0",
     "classnames": "2.5.1",
     "date-fns": "2.29.1",
@@ -106,9 +106,9 @@
     "@dotenvx/dotenvx": "1.6.4",
     "@ngneat/falso": "6.4.0",
     "@procore/core-css": "10.17.0",
-    "@procore/core-icons": "^12.17.0",
+    "@procore/core-icons": "^12.18.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.48.2",
+    "@procore/core-react": "^12.49.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",