GridCore - Accessibility - Adaptive row must be toggled using keyboar…

…d navigation (#25431)

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/const.ts

@@ -18,6 +18,7 @@ export const MASTER_DETAIL_CELL_CLASS = 'dx-master-detail-cell';
 export const EDITOR_CELL_CLASS = 'dx-editor-cell';
 export const DROPDOWN_EDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay';
 export const COMMAND_EXPAND_CLASS = 'dx-command-expand';
+export const ADAPTIVE_COLUMN_NAME_CLASS = 'dx-command-adaptive';
 export const COMMAND_SELECT_CLASS = 'dx-command-select';
 export const COMMAND_EDIT_CLASS = 'dx-command-edit';
 export const COMMAND_CELL_SELECTOR = '[class^=dx-command]';

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

@@ -40,6 +40,7 @@ import {
 } from '../m_types';
 import gridCoreUtils from '../m_utils';
 import {
+  ADAPTIVE_COLUMN_NAME_CLASS,
   CELL_FOCUS_DISABLED_CLASS,
   COLUMN_HEADERS_VIEW,
   COMMAND_CELL_SELECTOR,
@@ -131,6 +132,8 @@ export class KeyboardNavigationController extends modules.ViewController {
 
   _focusController!: Controllers['focus'];
 
+  _adaptiveColumnsController!: Controllers['adaptiveColumns'];
+
   // #region Initialization
   init() {
     this._dataController = this.getController('data');
@@ -141,6 +144,7 @@ export class KeyboardNavigationController extends modules.ViewController {
     this._columnsController = this.getController('columns');
     this._editorFactory = this.getController('editorFactory');
     this._focusController = this.getController('focus');
+    this._adaptiveColumnsController = this.getController('adaptiveColumns');
 
     this._memoFireFocusedCellChanged = memoize(this._memoFireFocusedCellChanged.bind(this), { compareType: 'value' });
     this._memoFireFocusedRowChanged = memoize(this._memoFireFocusedRowChanged.bind(this), { compareType: 'value' });
@@ -976,22 +980,28 @@ export class KeyboardNavigationController extends modules.ViewController {
   }
 
   _enterKeyHandler(eventArgs, isEditing) {
-    const $cell = this._getFocusedCell();
     const rowIndex = this.getVisibleRowIndex();
-    const $row = this._focusedView && this._focusedView.getRow(rowIndex);
+    const key = this._dataController.getKeyByRowIndex(rowIndex);
 
-    if (
-      (this.option('grouping.allowCollapsing') && isGroupRow($row))
-      || (this.option('masterDetail.enabled')
-        && $cell
-        && $cell.hasClass(COMMAND_EXPAND_CLASS))
-    ) {
-      const key = this._dataController.getKeyByRowIndex(rowIndex);
+    const $row = this._focusedView?.getRow(rowIndex);
+    const $cell = this._getFocusedCell();
+
+    const needExpandGroupRow = this.option('grouping.allowCollapsing') && isGroupRow($row);
+    const needExpandMasterDetailRow = this.option('masterDetail.enabled') && $cell?.hasClass(COMMAND_EXPAND_CLASS);
+    const needExpandAdaptiveRow = $cell?.hasClass(ADAPTIVE_COLUMN_NAME_CLASS);
+
+    if (needExpandGroupRow || needExpandMasterDetailRow) {
       const item = this._dataController.items()[rowIndex];
 
-      if (key !== undefined && item && item.data && !item.data.isContinuation) {
+      const isNotContinuation = item?.data && !item.data.isContinuation;
+
+      if (isDefined(key) && isNotContinuation) {
         (this._dataController as any).changeRowExpand(key);
       }
+    } else if (needExpandAdaptiveRow) {
+      this._adaptiveColumnsController.toggleExpandAdaptiveDetailRow(key);
+
+      this._updateFocusedCellPosition($cell);
     } else {
       this._processEnterKeyForDataCell(eventArgs, isEditing);
     }

packages/devextreme/testing/testcafe/tests/dataGrid/keyboardNavigation/keyboardNavigation.functional.ts

@@ -1,4 +1,5 @@
 import { Selector, ClientFunction } from 'testcafe';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../../helpers/getPageUrl';
 import createWidget from '../../../helpers/createWidget';
 import DataGrid from '../../../model/dataGrid';
@@ -4182,3 +4183,92 @@ test('Keyboard navigation behavior should be changed after changing the keyboard
     },
   });
 });
+
+test('Adaptive row should toggle when press enter key', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // focus adaptive command cell
+  await t
+    .click(dataGrid.getDataCell(0, 1).element)
+    .pressKey('tab');
+
+  await t
+    .expect(dataGrid.getDataRow(0).getCommandCell(4).isFocused)
+    .ok();
+
+  // open adaptive row
+  await t.pressKey('enter');
+
+  await takeScreenshot('adaptive-row-opened-via-keyboard.png', dataGrid.element);
+
+  // close adaptive row
+  await t.pressKey('enter');
+
+  await takeScreenshot('adaptive-row-closed-via-keyboard.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  columnHidingEnabled: true,
+  dataSource: [
+    {
+      name: 'Alex', c0: 'c0_0', c1: 'c1_0', c2: 'c2_0',
+    }, {
+      name: 'Ben', c0: 'c0_1', c1: 'c1_2', c2: 'c2_2',
+    }, {
+      name: 'Dan', c0: 'c0_2', c1: 'c1_3', c2: 'c2_3',
+    }, {
+      name: 'John', c0: 'c0_3', c1: 'c1_4', c2: 'c2_4',
+    },
+  ],
+  width: 600,
+  columnWidth: 200,
+}));
+
+test('Focus position should be correct when open second adaptive row', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const focusAdaptiveButtonCell = async (rowIndex: number) => {
+    await t
+      .click(dataGrid.getDataCell(rowIndex, 1).element)
+      .pressKey('tab');
+
+    await t
+      .expect(dataGrid.getDataRow(rowIndex).getCommandCell(4).isFocused)
+      .ok();
+  };
+
+  // open first adaptive row
+  await focusAdaptiveButtonCell(0);
+
+  await t.pressKey('enter');
+
+  // open second adaptive row
+  await focusAdaptiveButtonCell(1);
+
+  await t.pressKey('enter');
+
+  await takeScreenshot('focus-position-when-second-adaptive-row-opened.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  columnHidingEnabled: true,
+  dataSource: [
+    {
+      name: 'Alex', c0: 'c0_0', c1: 'c1_0', c2: 'c2_0',
+    }, {
+      name: 'Ben', c0: 'c0_1', c1: 'c1_2', c2: 'c2_2',
+    }, {
+      name: 'Dan', c0: 'c0_2', c1: 'c1_3', c2: 'c2_3',
+    }, {
+      name: 'John', c0: 'c0_3', c1: 'c1_4', c2: 'c2_4',
+    },
+  ],
+  width: 600,
+  columnWidth: 200,
+}));