diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.test.ts b/packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.test.ts new file mode 100644 index 000000000000..d976070ccba4 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.ts b/packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.ts index 785b4c3ca487..9224f99d8f82 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/data_area/m_data_area.ts +++ b/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 $('