PivotGrid - Fix focus color, type CellClickEvent with KeyboardEvent, add visual test

Author: aleksei-semikozov

e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/expandIcon.ts

@@ -0,0 +1,51 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import { testScreenshot } from '../../../../helpers/themeUtils';
+import { sales } from '../data';
+
+fixture.disablePageReloads`pivotGrid_kbn_expandIcon`
+  .page(url(__dirname, '../../../container.html'));
+
+const PIVOT_GRID_SELECTOR = '#container';
+
+test('Expandable cell should have a visible focus outline when focused by keyboard', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+
+  const expandableCell = pivotGrid.getRowsArea().getCell(0);
+
+  await t
+    .click(expandableCell)
+    .pressKey('tab')
+    .pressKey('shift+tab');
+
+  await testScreenshot(t, takeScreenshot, 'pivotgrid_kbn_expandable_cell_focused.png', { element: pivotGrid.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxPivotGrid', {
+  width: 600,
+  allowExpandAll: true,
+  dataSource: {
+    fields: [{
+      dataField: 'region',
+      area: 'row',
+      expanded: false,
+    }, {
+      dataField: 'city',
+      area: 'row',
+    }, {
+      dataField: 'date',
+      area: 'column',
+    }, {
+      dataField: 'amount',
+      area: 'data',
+      summaryType: 'sum',
+      dataType: 'number',
+    }],
+    store: sales,
+  },
+}));

packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss

@@ -18,7 +18,6 @@ $pivotgrid-grandtotalcolor: null !default;
 $pivotgrid-accent-color: null !default;
 $pivotgrid-empty-area-text-padding: null !default;
 $pivotgrid-button-top-padding: null !default;
-$base-focus-color: null !default;
 
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
@@ -130,7 +129,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 .dx-pivotgrid {
   td[aria-expanded]:focus-visible {
     outline: 2px solid;
-    outline-color: $base-focus-color;
+    outline-color: $pivotgrid-accent-color;
     outline-offset: -2px;
   }
 

packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss

@@ -30,7 +30,6 @@
   $pivotgrid-accent-color: $pivotgrid-accent-color,
   $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding,
   $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
-  $base-focus-color: $base-focus-color,
 );
 
 // adduse

packages/devextreme-scss/scss/widgets/generic/pivotGrid/_index.scss

@@ -29,7 +29,6 @@
   $pivotgrid-accent-color: $pivotgrid-accent-color,
   $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding,
   $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
-  $base-focus-color: $base-focus-color,
 );
 
 // adduse

packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss

@@ -30,7 +30,6 @@
   $pivotgrid-accent-color: $pivotgrid-accent-color,
   $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding,
   $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
-  $base-focus-color: $base-focus-color,
 );
 
 // adduse

packages/devextreme/js/ui/pivot_grid.d.ts

@@ -55,7 +55,7 @@ export type PivotGridTotalDisplayMode = 'both' | 'columns' | 'none' | 'rows';
  * @type object
  * @inherits Cancelable,NativeEventInfo
  */
-export type CellClickEvent = Cancelable & NativeEventInfo<dxPivotGrid, MouseEvent | PointerEvent> & {
+export type CellClickEvent = Cancelable & NativeEventInfo<dxPivotGrid, KeyboardEvent | MouseEvent | PointerEvent> & {
     /** @docid _ui_pivot_grid_CellClickEvent.area */
     readonly area?: string;
     /** @docid _ui_pivot_grid_CellClickEvent.cellElement */

packages/devextreme/ts/dx.all.d.ts

@@ -24438,7 +24438,7 @@ declare module DevExpress.ui {
     export type CellClickEvent = DevExpress.common.core.events.Cancelable &
       DevExpress.common.core.events.NativeEventInfo<
         dxPivotGrid,
-        MouseEvent | PointerEvent
+        KeyboardEvent | MouseEvent | PointerEvent
       > & {
         /**
          * [descr:_ui_pivot_grid_CellClickEvent.area]