DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386) (#30016)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts

@@ -193,3 +193,35 @@ test('Focus overlay should be visible in filter row when focusedRowEnabled is en
 }).after(async () => {
   await changeTheme('generic.light');
 });
+
+test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+
+  await dataGrid.isReady();
+
+  await t
+    .expect(filterEditor.menuButton.getAttribute('aria-label'))
+    .eql('Search box');
+
+  await t
+    .click(filterEditor.menuButton);
+
+  const itemCount = await filterEditor.menu.getItemCount();
+
+  for (let i = 0; i < itemCount; i += 1) {
+    const item = filterEditor.menu.getItemByIndex(i);
+    await t.expect(item.getAttribute('aria-label')).eql(null);
+  }
+
+  await t
+    .click(filterEditor.menu.getItemByText('Equals'))
+    .expect(filterEditor.menuButton.getAttribute('aria-label'))
+    .eql('Equals');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 1),
+  keyExpr: 'field_0',
+  filterRow: {
+    visible: true,
+  },
+}));

packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts

@@ -582,21 +582,27 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     const editorFactoryController = this._editorFactoryController;
 
     that._createComponent($menu, Menu, {
-      // @ts-expect-error
       integrationOptions: {},
       activeStateEnabled: false,
       selectionMode: 'single',
       cssClass: `${that.getWidgetContainerClass()} ${CELL_FOCUS_DISABLED_CLASS} ${FILTER_MENU}`,
       showFirstSubmenuMode: 'onHover',
       hideSubmenuOnMouseLeave: true,
       items: [{
+        // @ts-expect-error
+        name: getColumnSelectedFilterOperation(that, column) || ARIA_SEARCH_BOX,
         disabled: !(column.filterOperations && column.filterOperations.length),
         icon: OPERATION_ICONS[getColumnSelectedFilterOperation(that, column) || 'default'],
         selectable: false,
         items: that._getFilterOperationMenuItems(column),
       }],
-      onItemRendered: ({ itemElement }) => {
-        this.setAria('label', ARIA_SEARCH_BOX, $(itemElement));
+      onItemRendered: ({ itemElement, itemData }) => {
+        // @ts-expect-error
+        if (itemData?.items && itemData?.name) {
+          // @ts-expect-error
+          const labelText = that._getOperationDescriptionFromDescriptor(itemData.name) || ARIA_SEARCH_BOX;
+          this.setAria('label', labelText, $(itemElement));
+        }
       },
       onItemClick(properties) {
         // @ts-expect-error
@@ -690,20 +696,15 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     const that = this;
     let result = [{}];
     const filterRowOptions = that.option('filterRow');
-    const operationDescriptions = filterRowOptions && filterRowOptions.operationDescriptions || {};
 
     if (column.filterOperations && column.filterOperations.length) {
       const availableFilterOperations = column.filterOperations.filter((value) => isDefined(OPERATION_DESCRIPTORS[value]));
-      result = map(availableFilterOperations, (value) => {
-        const descriptionName = OPERATION_DESCRIPTORS[value];
-
-        return {
-          name: value,
-          selected: (getColumnSelectedFilterOperation(that, column) || column.defaultFilterOperation) === value,
-          text: operationDescriptions[descriptionName],
-          icon: OPERATION_ICONS[value],
-        };
-      });
+      result = map(availableFilterOperations, (value) => ({
+        name: value,
+        selected: (getColumnSelectedFilterOperation(that, column) || column.defaultFilterOperation) === value,
+        text: that._getOperationDescriptionFromDescriptor(value),
+        icon: OPERATION_ICONS[value],
+      }));
 
       result.push({
         name: null,
@@ -715,6 +716,15 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     return result;
   }
 
+  private _getOperationDescriptionFromDescriptor(value) {
+    const filterRowOptions = this.option('filterRow');
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const operationDescriptions = filterRowOptions?.operationDescriptions || {};
+    const descriptionName = OPERATION_DESCRIPTORS[value];
+
+    return operationDescriptions[descriptionName];
+  }
+
   protected _handleDataChanged(e) {
     const dataSource = this._dataController?.dataSource?.();
     const lastLoadOptions = dataSource?.lastLoadOptions?.();