PivotGrid - Refine keyboard a11y per review feedback

Author: aleksei-semikozov

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

@@ -75,6 +75,11 @@
     box-sizing: content-box;
   }
 
+  td[aria-expanded]:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+
   .dx-area-description-cell {
     position: relative;
     background-clip: padding-box;  // T379462

packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

@@ -891,7 +891,7 @@ class PivotGrid extends Widget {
       const args = this._createEventArgs(e.currentTarget, e);
       if (args.cell && isDefined(args.cell.expanded)) {
         e.preventDefault();
-        this._handleCellClick({ currentTarget: e.currentTarget, preventDefault: noop });
+        this._handleCellClick(e);
       }
     }
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js

@@ -512,7 +512,7 @@ QUnit.module('dxPivotGrid', {
         });
         assert.ok(pivotGrid);
 
-        const $nonExpandableTd = $('#pivotGrid').find('td:not([aria-expanded])').first();
+        const $nonExpandableTd = $('#pivotGrid').find('.dx-area-row-cell td').first();
         assert.ok($nonExpandableTd.length > 0);
 
         $nonExpandableTd.trigger($.Event('keydown', { key: 'Enter' }));
@@ -522,6 +522,29 @@ QUnit.module('dxPivotGrid', {
         assert.strictEqual(expandValueChangingArgs, undefined);
     });
 
+    QUnit.test('onCellClick cancel prevents keyboard expansion', function(assert) {
+        let expandValueChangingArgs;
+        const pivotGrid = createPivotGrid({
+            dataSource: this.dataSource,
+            onExpandValueChanging: function(args) {
+                expandValueChangingArgs = $.extend({}, args);
+            },
+            onCellClick: function(args) {
+                args.cancel = true;
+            }
+        });
+        assert.ok(pivotGrid);
+
+        const $collapsedTd = $('#pivotGrid').find('.dx-pivotgrid-collapsed').closest('td');
+        assert.strictEqual($collapsedTd.length, 1);
+
+        $collapsedTd.trigger($.Event('keydown', { key: 'Enter' }));
+
+        this.clock.tick(10);
+
+        assert.strictEqual(expandValueChangingArgs, undefined);
+    });
+
     QUnit.test('T248253. DataSource changed', function(assert) {
         let expandValueChangingArgs;
         const pivotGrid = createPivotGrid($.extend(this.testOptions, {