DataGrid: fix filter icon when filter cell focused (T1286345) (#29892) (24_1) (#29901)

Author: haksur

e2e/testcafe-devextreme/tests/dataGrid/accessibility/contrast.ts

@@ -54,3 +54,51 @@ fixture.disablePageReloads`DataGrid - contrast`
     },
   );
 });
+
+[
+  Themes.genericLight,
+  Themes.fluentBlue,
+  Themes.materialBlue,
+].forEach((theme) => {
+  test('DataGrid - Filter icon should remain visible when it\'s focused', async (t) => {
+    const dataGrid = new DataGrid('#container');
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .expect(dataGrid.isReady())
+      .ok();
+
+    const searchIconContainer = dataGrid
+      .getHeaders()
+      .getFilterRow()
+      .getFilterCell(1)
+      .getSearchIcon()
+      .element;
+
+    await t
+      .click(dataGrid.getFilterCell(0))
+      .pressKey('tab')
+      .expect(searchIconContainer.focused)
+      .ok();
+
+    await t
+      .expect(await takeScreenshot(`T1286345-datagrid-menu-icon-when-focused-${theme}.png`, dataGrid.element))
+      .ok()
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(
+    async () => {
+      await changeTheme(theme);
+      await createWidget('dxDataGrid', {
+        dataSource: getData(2, 2),
+        filterRow: {
+          visible: true,
+        },
+      });
+    },
+  ).after(
+    async () => {
+      await changeTheme(Themes.genericLight);
+    },
+  );
+});

e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-fluent.blue.light.png

@@ -490,6 +490,7 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
     .dx-menu-item {
       &.dx-state-focused {
         background-color: transparent;
+        color: $datagrid-menu-icon-color;
 
         &::after {
           border: 2px solid $datagrid-focused-border-color;