DataGrid - fix focusing for groupFooter & footer (#25505)

DevExpress · Sep 5, 2023 · 35aff7b · 35aff7b
1 parent f6a68b9
commit 35aff7b
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 268 deletions.
diff --git a/packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts b/packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts
@@ -26,6 +26,7 @@ const DATAGRID_GROUP_FOOTER_CLASS = 'dx-datagrid-group-footer';
 const DATAGRID_GROUP_TEXT_CONTENT_CLASS = 'dx-datagrid-group-text-content';
 const DATAGRID_NOWRAP_CLASS = 'dx-datagrid-nowrap';
 const DATAGRID_FOOTER_ROW_CLASS = 'dx-footer-row';
+const DATAGRID_CELL_DISABLED = 'dx-cell-focus-disabled';
 
 const DATAGRID_GROUP_FOOTER_ROW_TYPE = 'groupFooter';
 const DATAGRID_TOTAL_FOOTER_ROW_TYPE = 'totalFooter';
@@ -39,17 +40,21 @@ export const renderSummaryCell = function (cell, options) {
   if (!column.command && summaryItems) {
     for (let i = 0; i < summaryItems.length; i++) {
       const summaryItem = summaryItems[i];
+      const text = gridCore.getSummaryText(summaryItem, options.summaryTexts);
+
       $summaryItems.push($('<div>')
         .css('textAlign', summaryItem.alignment || column.alignment)
         .addClass(DATAGRID_SUMMARY_ITEM_CLASS)
         .addClass(DATAGRID_TEXT_CONTENT_CLASS)
         .addClass(summaryItem.cssClass)
         .toggleClass(DATAGRID_GROUP_TEXT_CONTENT_CLASS, options.rowType === 'group')
-        .text(gridCore.getSummaryText(summaryItem, options.summaryTexts)));
+        .text(text)
+        .attr('aria-label', `${column.caption} ${text}`));
     }
     $cell.append($summaryItems);
   }
 };
+
 const getSummaryCellOptions = function (that, options) {
   const summaryTexts = that.option('summary.texts') || {};
 
@@ -148,6 +153,8 @@ export const FooterView = ColumnsView.inherit((function () {
 
       if (row.rowType === DATAGRID_TOTAL_FOOTER_ROW_TYPE) {
         $row.addClass(DATAGRID_FOOTER_ROW_CLASS);
+        $row.addClass(DATAGRID_CELL_DISABLED);
+        $row.attr('tabindex', 0);
       }
 
       return $row;

diff --git a/...ges/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/...ges/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -1802,7 +1802,8 @@ export class KeyboardNavigationController extends modules.ViewController {
       return false;
     }
 
-    if (row && row.rowType === 'group' && cellPosition.columnIndex > 0) {
+    const isFullRowFocus = row?.rowType === 'group' || row?.rowType === 'groupFooter';
+    if (isFullRowFocus && cellPosition.columnIndex > 0) {
       return true;
     }
 

diff --git a/...vextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation_types.ts b/...vextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation_types.ts
diff --git a/packages/devextreme/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme/scss/widgets/base/dataGrid/_index.scss
@@ -331,3 +331,15 @@ $datagrid-text-stub-background-image-path: null !default;
     background-color: color.change($datagrid-base-color, $alpha: 0.08);
   }
 }
+
+.dx-datagrid-total-footer {
+  tr {
+    outline: none;
+  }
+
+  &:focus-within {
+    outline: 2px solid $datagrid-focused-border-color;
+    outline-offset: -2px;
+  }
+}
+
diff --git a/...es/devextreme/testing/testcafe/tests/dataGrid/etalons/group-summary-focused.png b/...es/devextreme/testing/testcafe/tests/dataGrid/etalons/group-summary-focused.png
diff --git a/...es/devextreme/testing/testcafe/tests/dataGrid/etalons/total-summary-focused.png b/...es/devextreme/testing/testcafe/tests/dataGrid/etalons/total-summary-focused.png