PivotGrid - A11y - Make field chooser button have visible focus state (#33942)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_column-fields (fluent.blue.light).png

@@ -0,0 +1,39 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
+import { testScreenshot } from '../../../../helpers/themeUtils';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`PivotGrid_KBN_fieldChooser`
+  .page(url(__dirname, '../../../container.html'));
+
+const PIVOT_GRID_SELECTOR = '#container';
+[
+  ['filter-fields', { visible: true, showFilterFields: true }],
+  ['column-fields', { visible: true, showDataFields: true }],
+  ['description-cell', { visible: false }],
+].forEach(([areaName, fieldPanelOptions]) => {
+  test(`Field chooser button should have visible focus state when placed in ${areaName}`, async (t) => {
+    const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .pressKey('tab')
+      .expect(pivotGrid.getFieldChooserButton().focused)
+      .ok();
+
+    await testScreenshot(t, takeScreenshot, `field-chooser-button_focus_${areaName}.png`);
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => createWidget('dxPivotGrid', {
+    allowFiltering: true,
+    showBorders: true,
+    height: 470,
+    fieldChooser: {
+      enabled: true,
+    },
+    fieldPanel: fieldPanelOptions,
+  }, PIVOT_GRID_SELECTOR));
+});

e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_description-cell (fluent.blue.light).png

@@ -222,12 +222,6 @@ $pivotgrid-expand-icon-text-offset: 0;
       .dx-button {
         margin: 1px;
       }
-
-      .dx-button:not(.dx-state-hover):not(.dx-state-active) {
-        border-color: transparent;
-        background-color: transparent;
-        box-shadow: none;
-      }
     }
   }
 

e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_filter-fields (fluent.blue.light).png

@@ -16,11 +16,11 @@ import {
 import { format as formatString } from '@js/core/utils/string';
 import { isDefined } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
-import type { Properties } from '@js/ui/button';
+import type { ButtonStyle, Properties } from '@js/ui/button';
 import Button from '@js/ui/button';
 import ContextMenu from '@js/ui/context_menu';
 import Popup from '@js/ui/popup/ui.popup';
-import { current, isFluent } from '@js/ui/themes';
+import { current, isGeneric } from '@js/ui/themes';
 import Widget from '@ts/core/widget/widget';
 import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
@@ -945,6 +945,8 @@ class PivotGrid extends Widget {
 
     let $targetContainer;
 
+    let buttonStylingMode: ButtonStyle = isGeneric(current()) ? 'contained' : 'text';
+
     // @ts-expect-error ts-error
     if (fieldPanel.visible && fieldPanel.showFilterFields) {
       $targetContainer = $filterHeader;
@@ -953,6 +955,7 @@ class PivotGrid extends Widget {
       $targetContainer = $columnHeader;
     } else {
       $targetContainer = $descriptionCell;
+      buttonStylingMode = 'text';
     }
 
     $columnHeader.toggleClass(
@@ -976,7 +979,6 @@ class PivotGrid extends Widget {
     this.$element().find('.dx-pivotgrid-toolbar').remove();
 
     $toolbarContainer.prependTo($targetContainer);
-    const stylingMode = isFluent(current()) ? 'text' : 'contained';
 
     if (this.option('fieldChooser.enabled')) {
       const $buttonElement = $(DIV)
@@ -986,7 +988,7 @@ class PivotGrid extends Widget {
         icon: 'columnchooser',
         // @ts-expect-error ts-error
         hint: this.option('texts.showFieldChooser'),
-        stylingMode,
+        stylingMode: buttonStylingMode,
         onClick: () => {
           this.getFieldChooserPopup().show();
         },
@@ -1003,7 +1005,7 @@ class PivotGrid extends Widget {
         icon: 'xlsxfile',
         // @ts-expect-error ts-error
         hint: this.option('texts.exportToExcel'),
-        stylingMode,
+        stylingMode: buttonStylingMode,
         onClick: () => {
           // @ts-expect-error ts-error
           this.exportTo();