DataGrid - FilterRow's searchBox's aria-label should be customizable - T1290381 (DevExpress#30406)

Author: Tucchhaa

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

@@ -259,3 +259,38 @@ test('DataGrid - The `between` filter dropdown sticks to the viewport edge durin
   columnWidth: 400,
   width: 500,
 }));
+
+// T1290381
+test('DataGrid - filter row\'s search-box\'s aria-label should be customizable via localization', 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('custom text');
+}).before(async (t) => {
+  await t.eval(() => {
+    (window as any).DevExpress.localization.loadMessages({
+      // Replace "en" with the target locale of the dictionary
+      en: {
+        'dxDataGrid-ariaSearchBox': 'custom text',
+      },
+    });
+  });
+
+  return createWidget('dxDataGrid', {
+    columns: [{
+      dataField: 'test',
+      dataType: 'string',
+    }],
+    filterRow: {
+      visible: true,
+    },
+  });
+}).after(async (t) => {
+  // To reset localization messages
+  await t
+    .eval(() => location.reload());
+});

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

@@ -76,8 +76,6 @@ const EDITORS_INPUT_SELECTOR = 'input:not([type=\'hidden\'])';
 
 const BETWEEN_OPERATION_DATA_TYPES = ['date', 'datetime', 'number'];
 
-const ARIA_SEARCH_BOX = messageLocalization.format('dxDataGrid-ariaSearchBox');
-
 function isOnClickApplyFilterMode(that) {
   return that.option('filterRow.applyFilter') === 'onClick';
 }
@@ -581,6 +579,7 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     };
 
     const editorFactoryController = this._editorFactoryController;
+    const ariaSearchBox = messageLocalization.format('dxDataGrid-ariaSearchBox');
 
     that._createComponent($menu, Menu, {
       // @ts-expect-error
@@ -591,15 +590,15 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
       showFirstSubmenuMode: 'onHover',
       hideSubmenuOnMouseLeave: true,
       items: [{
-        name: getColumnSelectedFilterOperation(that, column) || ARIA_SEARCH_BOX,
+        name: getColumnSelectedFilterOperation(that, column) || ariaSearchBox,
         disabled: !column.filterOperations?.length,
         icon: OPERATION_ICONS[getColumnSelectedFilterOperation(that, column) || 'default'],
         selectable: false,
         items: that._getFilterOperationMenuItems(column),
       }],
       onItemRendered: ({ itemElement, itemData }) => {
         if (itemData?.items && itemData?.name) {
-          const labelText = that._getOperationDescriptionFromDescriptor(itemData.name) || ARIA_SEARCH_BOX;
+          const labelText = that._getOperationDescriptionFromDescriptor(itemData.name) || ariaSearchBox;
           this.setAria('label', labelText, $(itemElement));
         }
       },