PivotGrid A11y and KBN - Scrollable region must have keyboard access (axe issue) (KBN)

packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.test.ts

@@ -0,0 +1,74 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+
+import { DataArea } from './m_data_area';
+
+const createComponent = (): unknown => ({
+  option: (optionName?: string) => {
+    if (optionName === undefined) {
+      return {};
+    }
+
+    return {
+      rtlEnabled: false,
+      encodeHtml: false,
+    }[optionName];
+  },
+  _eventsStrategy: { hasEvent: () => false },
+  _defaultActionArgs: () => ({}),
+});
+
+describe('DataArea', () => {
+  let container: HTMLElement = document.createElement('div');
+
+  const cellsData = [
+    [{ text: '1' }, { text: '2' }],
+    [{ text: '3' }, { text: '4' }],
+  ];
+
+  const renderDataArea = (data: unknown[]): DataArea => {
+    const area = new DataArea(createComponent());
+
+    area.render($(container), data);
+
+    return area;
+  };
+
+  const getCellsTabIndexes = (): (string | null)[] => Array.from(container.querySelectorAll('td'))
+    .map((cell) => cell.getAttribute('tabindex'));
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  describe('render', () => {
+    it('should make only the first data cell focusable', () => {
+      renderDataArea(cellsData);
+
+      expect(getCellsTabIndexes()).toEqual(['0', null, null, null]);
+    });
+
+    it('should keep the first data cell focusable after re-render', () => {
+      const area = renderDataArea(cellsData);
+
+      area.render($(container), cellsData);
+
+      expect(getCellsTabIndexes()).toEqual(['0', null, null, null]);
+    });
+
+    it('should not fail when there is no data', () => {
+      expect(() => renderDataArea([])).not.toThrow();
+    });
+  });
+});

packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.ts

@@ -1,5 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import $ from '@js/core/renderer';
+import { setTabIndex } from '@js/ui/shared/accessibility';
 import supportUtils from '@ts/core/utils/m_support';
 
 import { AreaItem } from '../area_item/m_area_item';
@@ -16,6 +17,20 @@ class DataArea extends AreaItem {
     return 'data';
   }
 
+  render(rootElement, data) {
+    super.render(rootElement, data);
+
+    this._makeFirstCellFocusable();
+  }
+
+  _makeFirstCellFocusable() {
+    const firstCell = this.tableElement().get(0)?.querySelector('td');
+
+    if (firstCell) {
+      setTabIndex(this.component, $(firstCell));
+    }
+  }
+
   _createGroupElement() {
     return $('<div>')
       .addClass(PIVOTGRID_AREA_CLASS)

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

@@ -183,7 +183,7 @@ QUnit.module('PivotGrid markup tests', () => {
             assert.ok($dataCell.length > 0, 'data cell exists');
             assert.strictEqual($dataCell.find('.dx-expand-icon-container').length, 0, 'no expand control in a non-expandable cell');
             assert.strictEqual($dataCell.attr('role'), undefined, 'data cell has no role');
-            assert.strictEqual($dataCell.attr('tabindex'), undefined, 'data cell is not focusable');
+            assert.strictEqual($dataCell.attr('tabindex'), '0', 'first data cell is focusable to provide keyboard access to the scrollable data area');
         } finally {
             clock.restore();
         }

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

@@ -5707,7 +5707,7 @@ function getStubComponent(options) {
     options = options || {};
     return {
         option: function() {
-            return options[arguments[0]];
+            return arguments.length === 0 ? options : options[arguments[0]];
         },
         _defaultActionArgs: function() {
             return {};