@procore/data-table 14.43.2 → 14.44.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 14.44.0
+
+### Minor Changes
+
+- dc8aaf4: Made data-table column menu accessible via keyboard using `⌥ Alt+↓`
+- a9569f8: Focus BulkEditPanel after opening
+
+### Patch Changes
+
+- c33f992: Improve accessibility in QuickFilters by adding descriptive `aria-label` to filter token remove button (includes filter name)
+
 ## 14.43.2
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -56619,6 +56619,7 @@ var GenericHeaderRenderer = (props) => {
     I18n
   );
   const headerCellRef = React80.useRef(null);
+  const menuButtonRef = React80.useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
     api: props.api,
@@ -56985,6 +56986,51 @@ var GenericHeaderRenderer = (props) => {
     expansionVariant,
     onSSDR
   );
+  React80__default.default.useEffect(() => {
+    if (!props.enableMenu) return;
+    const MENU_SYNTHETIC = "__menu_synthetic_keydown";
+    const handler = (e) => {
+      var _a2;
+      const button = (_a2 = menuButtonRef.current) == null ? void 0 : _a2.querySelector("button");
+      const isMenuOpen = (button == null ? void 0 : button.getAttribute("aria-expanded")) === "true";
+      if (e[MENU_SYNTHETIC]) {
+        return;
+      }
+      if (e.altKey && e.key === "ArrowDown" && !isMenuOpen) {
+        e.preventDefault();
+        e.stopPropagation();
+        button == null ? void 0 : button.focus();
+        button == null ? void 0 : button.click();
+        return;
+      }
+      if (!isMenuOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+        case "Escape":
+          e.stopPropagation();
+          e.preventDefault();
+          if (button) {
+            const synthetic = new KeyboardEvent("keydown", {
+              key: e.key,
+              bubbles: true,
+              cancelable: true
+            });
+            synthetic[MENU_SYNTHETIC] = true;
+            button.dispatchEvent(synthetic);
+          }
+          break;
+        case "Tab":
+        case "ArrowLeft":
+        case "ArrowRight":
+          button == null ? void 0 : button.click();
+          break;
+      }
+    };
+    props.eGridHeader.addEventListener("keydown", handler, true);
+    return () => props.eGridHeader.removeEventListener("keydown", handler, true);
+  }, [props.eGridHeader, props.enableMenu]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Flex,
     {
@@ -57059,6 +57105,7 @@ var GenericHeaderRenderer = (props) => {
     props.enableMenu && /* @__PURE__ */ React80__default.default.createElement(
       coreReact.DropdownFlyout,
       {
+        ref: menuButtonRef,
         className: "data-table-header-menu",
         size: "sm",
         options: orderMenuOptions(),
@@ -104213,6 +104260,11 @@ 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,
     {
@@ -104223,7 +104275,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, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
+  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -105773,6 +105825,7 @@ var en_default = {
       moreFilters: "More Filters",
       clearAllFilters: "Clear All Filters",
       close: "Close",
+      removeFilterToken: "Remove %{name}",
       locationFilter: {
         selectAll: "Select all",
         includeSublocations: "Include sublocations",
@@ -105810,6 +105863,7 @@ var en_default = {
       secondary: "Information loading, thanks for your patience."
     },
     menuOptions: {
+      ariaMenuColumn: "Press Alt/Option+Down to open column menu.",
       sortMenuItem: {
         label: "Sort By This Column",
         sortAscItem: "Sort Column Ascending",
@@ -107510,6 +107564,7 @@ var pseudo_default = {
       moreFilters: "[\u1E3E\u1E3E\u1E3E\u01FF\u0159\u1E17 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F]",
       clearAllFilters: "[\u0187\u0187\u0187\u0187\u0140\u1E17\u0227\u0159 \xB7 \u0226\u0140\u0140 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F\u015F]",
       close: "[\u0187\u0140\u01FF\u015F\u1E17]",
+      removeFilterToken: "[\u0158\u0158\u1E17\u1E3F\u01FF\u1E7D\u1E17 \xB7  \xB7 [NOTRANSLATE]%{name}[/NOTRANSLATE]]",
       locationFilter: {
         selectAll: "[\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u0140\u0140\u0140]",
         includeSublocations: "[\u012A\u012A\u012A\u012A\u019E\u0188\u0140\u016D\u1E13\u1E17 \xB7 \u015F\u016D\u0180\u0140\u01FF\u0188\u0227\u0167\u012B\u01FF\u019E\u015F\u015F\u015F\u015F]",
@@ -107547,6 +107602,7 @@ var pseudo_default = {
       secondary: "[\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u019E\u0192\u01FF\u0159\u1E3F\u0227\u0167\u012B\u01FF\u019E \xB7 \u0140\u01FF\u0227\u1E13\u012B\u019E\u0260, \xB7 \u0167\u0127\u0227\u019E\u0137\u015F \xB7 \u0192\u01FF\u0159 \xB7 \u1E8F\u01FF\u016D\u0159 \xB7 \u01A5\u0227\u0167\u012B\u1E17\u019E\u0188\u1E17..........]"
     },
     menuOptions: {
+      ariaMenuColumn: "[\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u0159\u1E17\u015F\u015F \xB7 \u0226\u0140\u0167/\u01FE\u01A5\u0167\u012B\u01FF\u019E+\u1E12\u01FF\u1E87\u019E \xB7 \u0167\u01FF \xB7 \u01FF\u01A5\u1E17\u019E \xB7 \u0188\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u1E3F\u1E17\u019E\u016D.........]",
       sortMenuItem: {
         label: "[\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0181\u1E8F \xB7 \u0166\u0127\u012B\u015F \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E\u019E\u019E\u019E]",
         sortAscItem: "[\u015E\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u0226\u015F\u0188\u1E17\u019E\u1E13\u012B\u019E\u0260\u0260\u0260\u0260\u0260]",
@@ -110585,7 +110641,21 @@ var Table = (props) => {
             params.api
           );
         },
-        headerCheckboxSelectionFilteredOnly: true
+        headerCheckboxSelectionFilteredOnly: true,
+        // Needed to suppress ag-grid's default keyboard event handling for header menu keys when menu is open
+        suppressHeaderKeyboardEvent({ event }) {
+          var _a2;
+          const headerCell = (_a2 = event.target) == null ? void 0 : _a2.closest(
+            ".ag-header-cell"
+          );
+          const isMenuOpen = !!(headerCell == null ? void 0 : headerCell.querySelector(
+            '[aria-expanded="true"]'
+          ));
+          if (isMenuOpen && ["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(event.key)) {
+            return true;
+          }
+          return false;
+        }
       };
     },
     [
@@ -110768,6 +110838,9 @@ var Table = (props) => {
           suppressPropertyNamesCheck: true,
           suppressRowClickSelection: props.suppressRowClickSelection || tableRowSelectionEnabled,
           suppressPaginationPanel: true,
+          localeText: {
+            ariaMenuColumn: I18n.t("dataTable.menuOptions.ariaMenuColumn")
+          },
           tabToNextCell: props.tabToNextCell,
           ...clientSideRowData,
           ...detailRowConfigProps,
@@ -112412,6 +112485,7 @@ var StyledFilterTokenWrapper = styled4__default.default.div`
 var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
   const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = coreReact.useI18nContext();
   const { quickFilters, tokens } = React80__default.default.useMemo(() => {
     return filterState.allAvailableFilters.reduce(
       (acc, filter) => {
@@ -112483,9 +112557,13 @@ var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
       if (!colDef) {
         return null;
       }
-      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, getFilterTokenText(colDef, filter.filterValues))), /* @__PURE__ */ React80__default.default.createElement(
+      const tokenText = getFilterTokenText(colDef, filter.filterValues);
+      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, tokenText)), /* @__PURE__ */ React80__default.default.createElement(
         coreReact.UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           onClick: () => {
             var _a;
             return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.removeFilter(filter.field);
@@ -112507,6 +112585,7 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
     getColumnDefinition
   } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = coreReact.useI18nContext();
   const { quickFilterNames, tokenNames } = React80__default.default.useMemo(() => {
     const appliedFilterNames = Object.keys(selectedFilters);
     const isActiveFilter = (filterName) => appliedFilterNames.includes(filterName);
@@ -112582,12 +112661,16 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
         return null;
       }
       const filter = getListFilter(fieldName);
-      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, getFilterTokenText(
+      const tokenText = getFilterTokenText(
         colDef,
         colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
-      ))), /* @__PURE__ */ React80__default.default.createElement(
+      );
+      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, tokenText)), /* @__PURE__ */ React80__default.default.createElement(
         coreReact.UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           "data-qa": "data-table-quick-filter-remove-token",
           onClick: () => onClearFilter(fieldName)
         }

package/dist/legacy/index.js

@@ -56606,6 +56606,7 @@ var GenericHeaderRenderer = (props) => {
     I18n
   );
   const headerCellRef = useRef(null);
+  const menuButtonRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
     api: props.api,
@@ -56972,6 +56973,51 @@ var GenericHeaderRenderer = (props) => {
     expansionVariant,
     onSSDR
   );
+  React80.useEffect(() => {
+    if (!props.enableMenu) return;
+    const MENU_SYNTHETIC = "__menu_synthetic_keydown";
+    const handler = (e) => {
+      var _a2;
+      const button = (_a2 = menuButtonRef.current) == null ? void 0 : _a2.querySelector("button");
+      const isMenuOpen = (button == null ? void 0 : button.getAttribute("aria-expanded")) === "true";
+      if (e[MENU_SYNTHETIC]) {
+        return;
+      }
+      if (e.altKey && e.key === "ArrowDown" && !isMenuOpen) {
+        e.preventDefault();
+        e.stopPropagation();
+        button == null ? void 0 : button.focus();
+        button == null ? void 0 : button.click();
+        return;
+      }
+      if (!isMenuOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+        case "Escape":
+          e.stopPropagation();
+          e.preventDefault();
+          if (button) {
+            const synthetic = new KeyboardEvent("keydown", {
+              key: e.key,
+              bubbles: true,
+              cancelable: true
+            });
+            synthetic[MENU_SYNTHETIC] = true;
+            button.dispatchEvent(synthetic);
+          }
+          break;
+        case "Tab":
+        case "ArrowLeft":
+        case "ArrowRight":
+          button == null ? void 0 : button.click();
+          break;
+      }
+    };
+    props.eGridHeader.addEventListener("keydown", handler, true);
+    return () => props.eGridHeader.removeEventListener("keydown", handler, true);
+  }, [props.eGridHeader, props.enableMenu]);
   return /* @__PURE__ */ React80.createElement(
     Flex,
     {
@@ -57046,6 +57092,7 @@ var GenericHeaderRenderer = (props) => {
     props.enableMenu && /* @__PURE__ */ React80.createElement(
       DropdownFlyout,
       {
+        ref: menuButtonRef,
         className: "data-table-header-menu",
         size: "sm",
         options: orderMenuOptions(),
@@ -104200,6 +104247,11 @@ 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,
     {
@@ -104210,7 +104262,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80.createElement(Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80.createElement(Panel.Body, null, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
+  ), /* @__PURE__ */ React80.createElement(Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -105760,6 +105812,7 @@ var en_default = {
       moreFilters: "More Filters",
       clearAllFilters: "Clear All Filters",
       close: "Close",
+      removeFilterToken: "Remove %{name}",
       locationFilter: {
         selectAll: "Select all",
         includeSublocations: "Include sublocations",
@@ -105797,6 +105850,7 @@ var en_default = {
       secondary: "Information loading, thanks for your patience."
     },
     menuOptions: {
+      ariaMenuColumn: "Press Alt/Option+Down to open column menu.",
       sortMenuItem: {
         label: "Sort By This Column",
         sortAscItem: "Sort Column Ascending",
@@ -107497,6 +107551,7 @@ var pseudo_default = {
       moreFilters: "[\u1E3E\u1E3E\u1E3E\u01FF\u0159\u1E17 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F]",
       clearAllFilters: "[\u0187\u0187\u0187\u0187\u0140\u1E17\u0227\u0159 \xB7 \u0226\u0140\u0140 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F\u015F]",
       close: "[\u0187\u0140\u01FF\u015F\u1E17]",
+      removeFilterToken: "[\u0158\u0158\u1E17\u1E3F\u01FF\u1E7D\u1E17 \xB7  \xB7 [NOTRANSLATE]%{name}[/NOTRANSLATE]]",
       locationFilter: {
         selectAll: "[\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u0140\u0140\u0140]",
         includeSublocations: "[\u012A\u012A\u012A\u012A\u019E\u0188\u0140\u016D\u1E13\u1E17 \xB7 \u015F\u016D\u0180\u0140\u01FF\u0188\u0227\u0167\u012B\u01FF\u019E\u015F\u015F\u015F\u015F]",
@@ -107534,6 +107589,7 @@ var pseudo_default = {
       secondary: "[\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u019E\u0192\u01FF\u0159\u1E3F\u0227\u0167\u012B\u01FF\u019E \xB7 \u0140\u01FF\u0227\u1E13\u012B\u019E\u0260, \xB7 \u0167\u0127\u0227\u019E\u0137\u015F \xB7 \u0192\u01FF\u0159 \xB7 \u1E8F\u01FF\u016D\u0159 \xB7 \u01A5\u0227\u0167\u012B\u1E17\u019E\u0188\u1E17..........]"
     },
     menuOptions: {
+      ariaMenuColumn: "[\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u0159\u1E17\u015F\u015F \xB7 \u0226\u0140\u0167/\u01FE\u01A5\u0167\u012B\u01FF\u019E+\u1E12\u01FF\u1E87\u019E \xB7 \u0167\u01FF \xB7 \u01FF\u01A5\u1E17\u019E \xB7 \u0188\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u1E3F\u1E17\u019E\u016D.........]",
       sortMenuItem: {
         label: "[\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0181\u1E8F \xB7 \u0166\u0127\u012B\u015F \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E\u019E\u019E\u019E]",
         sortAscItem: "[\u015E\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u0226\u015F\u0188\u1E17\u019E\u1E13\u012B\u019E\u0260\u0260\u0260\u0260\u0260]",
@@ -110572,7 +110628,21 @@ var Table = (props) => {
             params.api
           );
         },
-        headerCheckboxSelectionFilteredOnly: true
+        headerCheckboxSelectionFilteredOnly: true,
+        // Needed to suppress ag-grid's default keyboard event handling for header menu keys when menu is open
+        suppressHeaderKeyboardEvent({ event }) {
+          var _a2;
+          const headerCell = (_a2 = event.target) == null ? void 0 : _a2.closest(
+            ".ag-header-cell"
+          );
+          const isMenuOpen = !!(headerCell == null ? void 0 : headerCell.querySelector(
+            '[aria-expanded="true"]'
+          ));
+          if (isMenuOpen && ["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(event.key)) {
+            return true;
+          }
+          return false;
+        }
       };
     },
     [
@@ -110755,6 +110825,9 @@ var Table = (props) => {
           suppressPropertyNamesCheck: true,
           suppressRowClickSelection: props.suppressRowClickSelection || tableRowSelectionEnabled,
           suppressPaginationPanel: true,
+          localeText: {
+            ariaMenuColumn: I18n.t("dataTable.menuOptions.ariaMenuColumn")
+          },
           tabToNextCell: props.tabToNextCell,
           ...clientSideRowData,
           ...detailRowConfigProps,
@@ -112399,6 +112472,7 @@ var StyledFilterTokenWrapper = styled4.div`
 var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
   const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = useI18nContext();
   const { quickFilters, tokens } = React80.useMemo(() => {
     return filterState.allAvailableFilters.reduce(
       (acc, filter) => {
@@ -112470,9 +112544,13 @@ var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
       if (!colDef) {
         return null;
       }
-      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, getFilterTokenText(colDef, filter.filterValues))), /* @__PURE__ */ React80.createElement(
+      const tokenText = getFilterTokenText(colDef, filter.filterValues);
+      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, tokenText)), /* @__PURE__ */ React80.createElement(
         UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           onClick: () => {
             var _a;
             return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.removeFilter(filter.field);
@@ -112494,6 +112572,7 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
     getColumnDefinition
   } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = useI18nContext();
   const { quickFilterNames, tokenNames } = React80.useMemo(() => {
     const appliedFilterNames = Object.keys(selectedFilters);
     const isActiveFilter = (filterName) => appliedFilterNames.includes(filterName);
@@ -112569,12 +112648,16 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
         return null;
       }
       const filter = getListFilter(fieldName);
-      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, getFilterTokenText(
+      const tokenText = getFilterTokenText(
         colDef,
         colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
-      ))), /* @__PURE__ */ React80.createElement(
+      );
+      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, tokenText)), /* @__PURE__ */ React80.createElement(
         UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           "data-qa": "data-table-quick-filter-remove-token",
           onClick: () => onClearFilter(fieldName)
         }

package/dist/modern/index.cjs

@@ -56540,6 +56540,7 @@ var GenericHeaderRenderer = (props) => {
     I18n
   );
   const headerCellRef = React80.useRef(null);
+  const menuButtonRef = React80.useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
     api: props.api,
@@ -56898,6 +56899,50 @@ var GenericHeaderRenderer = (props) => {
     expansionVariant,
     onSSDR
   );
+  React80__default.default.useEffect(() => {
+    if (!props.enableMenu) return;
+    const MENU_SYNTHETIC = "__menu_synthetic_keydown";
+    const handler = (e) => {
+      const button = menuButtonRef.current?.querySelector("button");
+      const isMenuOpen = button?.getAttribute("aria-expanded") === "true";
+      if (e[MENU_SYNTHETIC]) {
+        return;
+      }
+      if (e.altKey && e.key === "ArrowDown" && !isMenuOpen) {
+        e.preventDefault();
+        e.stopPropagation();
+        button?.focus();
+        button?.click();
+        return;
+      }
+      if (!isMenuOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+        case "Escape":
+          e.stopPropagation();
+          e.preventDefault();
+          if (button) {
+            const synthetic = new KeyboardEvent("keydown", {
+              key: e.key,
+              bubbles: true,
+              cancelable: true
+            });
+            synthetic[MENU_SYNTHETIC] = true;
+            button.dispatchEvent(synthetic);
+          }
+          break;
+        case "Tab":
+        case "ArrowLeft":
+        case "ArrowRight":
+          button?.click();
+          break;
+      }
+    };
+    props.eGridHeader.addEventListener("keydown", handler, true);
+    return () => props.eGridHeader.removeEventListener("keydown", handler, true);
+  }, [props.eGridHeader, props.enableMenu]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Flex,
     {
@@ -56972,6 +57017,7 @@ var GenericHeaderRenderer = (props) => {
     props.enableMenu && /* @__PURE__ */ React80__default.default.createElement(
       coreReact.DropdownFlyout,
       {
+        ref: menuButtonRef,
         className: "data-table-header-menu",
         size: "sm",
         options: orderMenuOptions(),
@@ -104091,6 +104137,10 @@ 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,
     {
@@ -104100,7 +104150,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, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
+  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -105634,6 +105684,7 @@ var en_default = {
       moreFilters: "More Filters",
       clearAllFilters: "Clear All Filters",
       close: "Close",
+      removeFilterToken: "Remove %{name}",
       locationFilter: {
         selectAll: "Select all",
         includeSublocations: "Include sublocations",
@@ -105671,6 +105722,7 @@ var en_default = {
       secondary: "Information loading, thanks for your patience."
     },
     menuOptions: {
+      ariaMenuColumn: "Press Alt/Option+Down to open column menu.",
       sortMenuItem: {
         label: "Sort By This Column",
         sortAscItem: "Sort Column Ascending",
@@ -107371,6 +107423,7 @@ var pseudo_default = {
       moreFilters: "[\u1E3E\u1E3E\u1E3E\u01FF\u0159\u1E17 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F]",
       clearAllFilters: "[\u0187\u0187\u0187\u0187\u0140\u1E17\u0227\u0159 \xB7 \u0226\u0140\u0140 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F\u015F]",
       close: "[\u0187\u0140\u01FF\u015F\u1E17]",
+      removeFilterToken: "[\u0158\u0158\u1E17\u1E3F\u01FF\u1E7D\u1E17 \xB7  \xB7 [NOTRANSLATE]%{name}[/NOTRANSLATE]]",
       locationFilter: {
         selectAll: "[\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u0140\u0140\u0140]",
         includeSublocations: "[\u012A\u012A\u012A\u012A\u019E\u0188\u0140\u016D\u1E13\u1E17 \xB7 \u015F\u016D\u0180\u0140\u01FF\u0188\u0227\u0167\u012B\u01FF\u019E\u015F\u015F\u015F\u015F]",
@@ -107408,6 +107461,7 @@ var pseudo_default = {
       secondary: "[\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u019E\u0192\u01FF\u0159\u1E3F\u0227\u0167\u012B\u01FF\u019E \xB7 \u0140\u01FF\u0227\u1E13\u012B\u019E\u0260, \xB7 \u0167\u0127\u0227\u019E\u0137\u015F \xB7 \u0192\u01FF\u0159 \xB7 \u1E8F\u01FF\u016D\u0159 \xB7 \u01A5\u0227\u0167\u012B\u1E17\u019E\u0188\u1E17..........]"
     },
     menuOptions: {
+      ariaMenuColumn: "[\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u0159\u1E17\u015F\u015F \xB7 \u0226\u0140\u0167/\u01FE\u01A5\u0167\u012B\u01FF\u019E+\u1E12\u01FF\u1E87\u019E \xB7 \u0167\u01FF \xB7 \u01FF\u01A5\u1E17\u019E \xB7 \u0188\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u1E3F\u1E17\u019E\u016D.........]",
       sortMenuItem: {
         label: "[\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0181\u1E8F \xB7 \u0166\u0127\u012B\u015F \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E\u019E\u019E\u019E]",
         sortAscItem: "[\u015E\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u0226\u015F\u0188\u1E17\u019E\u1E13\u012B\u019E\u0260\u0260\u0260\u0260\u0260]",
@@ -110396,7 +110450,20 @@ var Table = (props) => {
             params.api
           );
         },
-        headerCheckboxSelectionFilteredOnly: true
+        headerCheckboxSelectionFilteredOnly: true,
+        // Needed to suppress ag-grid's default keyboard event handling for header menu keys when menu is open
+        suppressHeaderKeyboardEvent({ event }) {
+          const headerCell = event.target?.closest(
+            ".ag-header-cell"
+          );
+          const isMenuOpen = !!headerCell?.querySelector(
+            '[aria-expanded="true"]'
+          );
+          if (isMenuOpen && ["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(event.key)) {
+            return true;
+          }
+          return false;
+        }
       };
     },
     [
@@ -110579,6 +110646,9 @@ var Table = (props) => {
           suppressPropertyNamesCheck: true,
           suppressRowClickSelection: props.suppressRowClickSelection || tableRowSelectionEnabled,
           suppressPaginationPanel: true,
+          localeText: {
+            ariaMenuColumn: I18n.t("dataTable.menuOptions.ariaMenuColumn")
+          },
           tabToNextCell: props.tabToNextCell,
           ...clientSideRowData,
           ...detailRowConfigProps,
@@ -112196,6 +112266,7 @@ var StyledFilterTokenWrapper = styled4__default.default.div`
 var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
   const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = coreReact.useI18nContext();
   const { quickFilters, tokens } = React80__default.default.useMemo(() => {
     return filterState.allAvailableFilters.reduce(
       (acc, filter) => {
@@ -112260,9 +112331,13 @@ var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
       if (!colDef) {
         return null;
       }
-      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, getFilterTokenText(colDef, filter.filterValues))), /* @__PURE__ */ React80__default.default.createElement(
+      const tokenText = getFilterTokenText(colDef, filter.filterValues);
+      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, tokenText)), /* @__PURE__ */ React80__default.default.createElement(
         coreReact.UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           onClick: () => tableRef?.current?.removeFilter(filter.field)
         }
       )));
@@ -112281,6 +112356,7 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
     getColumnDefinition
   } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = coreReact.useI18nContext();
   const { quickFilterNames, tokenNames } = React80__default.default.useMemo(() => {
     const appliedFilterNames = Object.keys(selectedFilters);
     const isActiveFilter = (filterName) => appliedFilterNames.includes(filterName);
@@ -112355,12 +112431,16 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
         return null;
       }
       const filter = getListFilter(fieldName);
-      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, getFilterTokenText(
+      const tokenText = getFilterTokenText(
         colDef,
         colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
-      ))), /* @__PURE__ */ React80__default.default.createElement(
+      );
+      return /* @__PURE__ */ React80__default.default.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, tokenText)), /* @__PURE__ */ React80__default.default.createElement(
         coreReact.UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           "data-qa": "data-table-quick-filter-remove-token",
           onClick: () => onClearFilter(fieldName)
         }

package/dist/modern/index.js

@@ -56527,6 +56527,7 @@ var GenericHeaderRenderer = (props) => {
     I18n
   );
   const headerCellRef = useRef(null);
+  const menuButtonRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
     api: props.api,
@@ -56885,6 +56886,50 @@ var GenericHeaderRenderer = (props) => {
     expansionVariant,
     onSSDR
   );
+  React80.useEffect(() => {
+    if (!props.enableMenu) return;
+    const MENU_SYNTHETIC = "__menu_synthetic_keydown";
+    const handler = (e) => {
+      const button = menuButtonRef.current?.querySelector("button");
+      const isMenuOpen = button?.getAttribute("aria-expanded") === "true";
+      if (e[MENU_SYNTHETIC]) {
+        return;
+      }
+      if (e.altKey && e.key === "ArrowDown" && !isMenuOpen) {
+        e.preventDefault();
+        e.stopPropagation();
+        button?.focus();
+        button?.click();
+        return;
+      }
+      if (!isMenuOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+        case "Escape":
+          e.stopPropagation();
+          e.preventDefault();
+          if (button) {
+            const synthetic = new KeyboardEvent("keydown", {
+              key: e.key,
+              bubbles: true,
+              cancelable: true
+            });
+            synthetic[MENU_SYNTHETIC] = true;
+            button.dispatchEvent(synthetic);
+          }
+          break;
+        case "Tab":
+        case "ArrowLeft":
+        case "ArrowRight":
+          button?.click();
+          break;
+      }
+    };
+    props.eGridHeader.addEventListener("keydown", handler, true);
+    return () => props.eGridHeader.removeEventListener("keydown", handler, true);
+  }, [props.eGridHeader, props.enableMenu]);
   return /* @__PURE__ */ React80.createElement(
     Flex,
     {
@@ -56959,6 +57004,7 @@ var GenericHeaderRenderer = (props) => {
     props.enableMenu && /* @__PURE__ */ React80.createElement(
       DropdownFlyout,
       {
+        ref: menuButtonRef,
         className: "data-table-header-menu",
         size: "sm",
         options: orderMenuOptions(),
@@ -104078,6 +104124,10 @@ 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,
     {
@@ -104087,7 +104137,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80.createElement(Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80.createElement(Panel.Body, null, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
+  ), /* @__PURE__ */ React80.createElement(Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -105621,6 +105671,7 @@ var en_default = {
       moreFilters: "More Filters",
       clearAllFilters: "Clear All Filters",
       close: "Close",
+      removeFilterToken: "Remove %{name}",
       locationFilter: {
         selectAll: "Select all",
         includeSublocations: "Include sublocations",
@@ -105658,6 +105709,7 @@ var en_default = {
       secondary: "Information loading, thanks for your patience."
     },
     menuOptions: {
+      ariaMenuColumn: "Press Alt/Option+Down to open column menu.",
       sortMenuItem: {
         label: "Sort By This Column",
         sortAscItem: "Sort Column Ascending",
@@ -107358,6 +107410,7 @@ var pseudo_default = {
       moreFilters: "[\u1E3E\u1E3E\u1E3E\u01FF\u0159\u1E17 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F]",
       clearAllFilters: "[\u0187\u0187\u0187\u0187\u0140\u1E17\u0227\u0159 \xB7 \u0226\u0140\u0140 \xB7 \u0191\u012B\u0140\u0167\u1E17\u0159\u015F\u015F\u015F\u015F]",
       close: "[\u0187\u0140\u01FF\u015F\u1E17]",
+      removeFilterToken: "[\u0158\u0158\u1E17\u1E3F\u01FF\u1E7D\u1E17 \xB7  \xB7 [NOTRANSLATE]%{name}[/NOTRANSLATE]]",
       locationFilter: {
         selectAll: "[\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u0140\u0140\u0140]",
         includeSublocations: "[\u012A\u012A\u012A\u012A\u019E\u0188\u0140\u016D\u1E13\u1E17 \xB7 \u015F\u016D\u0180\u0140\u01FF\u0188\u0227\u0167\u012B\u01FF\u019E\u015F\u015F\u015F\u015F]",
@@ -107395,6 +107448,7 @@ var pseudo_default = {
       secondary: "[\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u012A\u019E\u0192\u01FF\u0159\u1E3F\u0227\u0167\u012B\u01FF\u019E \xB7 \u0140\u01FF\u0227\u1E13\u012B\u019E\u0260, \xB7 \u0167\u0127\u0227\u019E\u0137\u015F \xB7 \u0192\u01FF\u0159 \xB7 \u1E8F\u01FF\u016D\u0159 \xB7 \u01A5\u0227\u0167\u012B\u1E17\u019E\u0188\u1E17..........]"
     },
     menuOptions: {
+      ariaMenuColumn: "[\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u01A4\u0159\u1E17\u015F\u015F \xB7 \u0226\u0140\u0167/\u01FE\u01A5\u0167\u012B\u01FF\u019E+\u1E12\u01FF\u1E87\u019E \xB7 \u0167\u01FF \xB7 \u01FF\u01A5\u1E17\u019E \xB7 \u0188\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u1E3F\u1E17\u019E\u016D.........]",
       sortMenuItem: {
         label: "[\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0181\u1E8F \xB7 \u0166\u0127\u012B\u015F \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E\u019E\u019E\u019E]",
         sortAscItem: "[\u015E\u015E\u015E\u015E\u015E\u01FF\u0159\u0167 \xB7 \u0187\u01FF\u0140\u016D\u1E3F\u019E \xB7 \u0226\u015F\u0188\u1E17\u019E\u1E13\u012B\u019E\u0260\u0260\u0260\u0260\u0260]",
@@ -110383,7 +110437,20 @@ var Table = (props) => {
             params.api
           );
         },
-        headerCheckboxSelectionFilteredOnly: true
+        headerCheckboxSelectionFilteredOnly: true,
+        // Needed to suppress ag-grid's default keyboard event handling for header menu keys when menu is open
+        suppressHeaderKeyboardEvent({ event }) {
+          const headerCell = event.target?.closest(
+            ".ag-header-cell"
+          );
+          const isMenuOpen = !!headerCell?.querySelector(
+            '[aria-expanded="true"]'
+          );
+          if (isMenuOpen && ["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(event.key)) {
+            return true;
+          }
+          return false;
+        }
       };
     },
     [
@@ -110566,6 +110633,9 @@ var Table = (props) => {
           suppressPropertyNamesCheck: true,
           suppressRowClickSelection: props.suppressRowClickSelection || tableRowSelectionEnabled,
           suppressPaginationPanel: true,
+          localeText: {
+            ariaMenuColumn: I18n.t("dataTable.menuOptions.ariaMenuColumn")
+          },
           tabToNextCell: props.tabToNextCell,
           ...clientSideRowData,
           ...detailRowConfigProps,
@@ -112183,6 +112253,7 @@ var StyledFilterTokenWrapper = styled4.div`
 var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
   const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = useI18nContext();
   const { quickFilters, tokens } = React80.useMemo(() => {
     return filterState.allAvailableFilters.reduce(
       (acc, filter) => {
@@ -112247,9 +112318,13 @@ var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
       if (!colDef) {
         return null;
       }
-      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, getFilterTokenText(colDef, filter.filterValues))), /* @__PURE__ */ React80.createElement(
+      const tokenText = getFilterTokenText(colDef, filter.filterValues);
+      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, tokenText)), /* @__PURE__ */ React80.createElement(
         UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           onClick: () => tableRef?.current?.removeFilter(filter.field)
         }
       )));
@@ -112268,6 +112343,7 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
     getColumnDefinition
   } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
+  const I18n = useI18nContext();
   const { quickFilterNames, tokenNames } = React80.useMemo(() => {
     const appliedFilterNames = Object.keys(selectedFilters);
     const isActiveFilter = (filterName) => appliedFilterNames.includes(filterName);
@@ -112342,12 +112418,16 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
         return null;
       }
       const filter = getListFilter(fieldName);
-      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, getFilterTokenText(
+      const tokenText = getFilterTokenText(
         colDef,
         colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
-      ))), /* @__PURE__ */ React80.createElement(
+      );
+      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, tokenText)), /* @__PURE__ */ React80.createElement(
         UNSAFE_FilterToken.Remove,
         {
+          "aria-label": I18n.t("dataTable.filters.removeFilterToken", {
+            name: tokenText
+          }),
           "data-qa": "data-table-quick-filter-remove-token",
           onClick: () => onClearFilter(fieldName)
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.43.2",
+  "version": "14.44.0",
   "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",
@@ -108,7 +108,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "^12.15.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.43.0",
+    "@procore/core-react": "^12.44.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",