Toolbar: support keyboard navigation according to APG W3C

apps/demos/Demos/DataGrid/Toolbar/Angular/app/app.component.html

@@ -3,6 +3,7 @@
   [dataSource]="orders"
   keyExpr="ID"
   [showBorders]="true"
+  (onToolbarPreparing)="onToolbarPreparing($event)"
 >
   <dxo-data-grid-grouping [autoExpandAll]="expandAll"></dxo-data-grid-grouping>
   <dxo-data-grid-column-chooser [enabled]="true"></dxo-data-grid-column-chooser>

apps/demos/Demos/DataGrid/Toolbar/Angular/app/app.component.ts

@@ -6,6 +6,7 @@ import {
   DxButtonModule,
 } from 'devextreme-angular';
 import { DxButtonTypes } from 'devextreme-angular/ui/button';
+import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
 import { query } from 'devextreme-angular/common/data';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import { Service, Order } from './app.service';
@@ -88,6 +89,10 @@ export class AppComponent {
   toggleExpandAll() {
     this.expandAll = !this.expandAll;
   }
+
+  onToolbarPreparing(e: DxDataGridTypes.ToolbarPreparingEvent) {
+    e.toolbarOptions.allowKeyboardNavigation = false;
+  }
 }
 
 bootstrapApplication(AppComponent, {

apps/demos/Demos/DataGrid/Toolbar/React/App.tsx

@@ -4,7 +4,7 @@ import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
 import DataGrid, {
   Grouping, Column, ColumnChooser, LoadPanel, Toolbar, Item,
 } from 'devextreme-react/data-grid';
-import type { DataGridRef } from 'devextreme-react/data-grid';
+import type { DataGridRef, DataGridTypes } from 'devextreme-react/data-grid';
 import { query } from 'devextreme-react/common/data';
 
 import { orders } from './data.ts';
@@ -54,13 +54,18 @@ const App = () => {
     },
   }), []);
 
+  const onToolbarPreparing = useCallback((e: DataGridTypes.ToolbarPreparingEvent) => {
+    e.toolbarOptions.allowKeyboardNavigation = false;
+  }, []);
+
   return (
     <DataGrid
       id="gridContainer"
       ref={dataGridRef}
       dataSource={orders}
       keyExpr="ID"
-      showBorders={true}>
+      showBorders={true}
+      onToolbarPreparing={onToolbarPreparing}>
       <Grouping autoExpandAll={expandAll} />
       <ColumnChooser enabled={true} />
       <LoadPanel enabled={true} />

apps/demos/Demos/DataGrid/Toolbar/ReactJs/App.js

@@ -58,13 +58,17 @@ const App = () => {
     }),
     [],
   );
+  const onToolbarPreparing = useCallback((e) => {
+    e.toolbarOptions.allowKeyboardNavigation = false;
+  }, []);
   return (
     <DataGrid
       id="gridContainer"
       ref={dataGridRef}
       dataSource={orders}
       keyExpr="ID"
       showBorders={true}
+      onToolbarPreparing={onToolbarPreparing}
     >
       <Grouping autoExpandAll={expandAll} />
       <ColumnChooser enabled={true} />

apps/demos/Demos/DataGrid/Toolbar/Vue/App.vue

@@ -5,6 +5,7 @@
     :data-source="orders"
     key-expr="ID"
     :show-borders="true"
+    @toolbar-preparing="onToolbarPreparing"
   >
     <DxGrouping :auto-expand-all="expandAll"/>
     <DxColumnChooser :enabled="true"/>
@@ -86,6 +87,7 @@ import {
   DxToolbar,
   DxItem,
 } from 'devextreme-vue/data-grid';
+import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
 import { DxSelectBox, type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import { query } from 'devextreme-vue/common/data';
 import { orders } from './data.ts';
@@ -130,6 +132,10 @@ const refreshButtonOptions = {
     dataGridRef.value!.instance!.refresh();
   },
 };
+
+const onToolbarPreparing = (e: DxDataGridTypes.ToolbarPreparingEvent) => {
+  e.toolbarOptions.allowKeyboardNavigation = false;
+};
 </script>
 <style>
 

apps/demos/Demos/DataGrid/Toolbar/jQuery/index.js

@@ -90,6 +90,9 @@ $(() => {
         'columnChooserButton',
       ],
     },
+    onToolbarPreparing(e) {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   }).dxDataGrid('instance');
 
   function getGroupCount(groupField) {

e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts

@@ -50,6 +50,9 @@ test('column separator should work properly with expand columns', async (t) => {
     },
   ],
   allowColumnReordering: true,
+  onToolbarPreparing(e): void {
+    e.toolbarOptions.allowKeyboardNavigation = false;
+  },
 }));
 
 test('HeaderRow should be highlighted when dragging column with allowColumnReordering=false', async (t) => {
@@ -138,6 +141,9 @@ test('The group separator should not appear when dragging a grouped column to th
       },
     ],
     allowColumnReordering: false,
+    onToolbarPreparing(e): void {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   });
 }).after(async () => {
   await MouseUpEvents.enable(MouseAction.dragToOffset);

e2e/testcafe-devextreme/tests/dataGrid/common/exportButton.ts

@@ -85,6 +85,9 @@ test('allowExportSelectedData: false, menu: true', async (t) => {
     enabled: true,
   },
   width: 30,
+  onToolbarPreparing(e): void {
+    e.toolbarOptions.allowKeyboardNavigation = false;
+  },
 }));
 
 test('allowExportSelectedData: true, menu: true', async (t) => {
@@ -109,6 +112,9 @@ test('allowExportSelectedData: true, menu: true', async (t) => {
     formats: ['xlsx', 'pdf'],
   },
   width: 30,
+  onToolbarPreparing(e): void {
+    e.toolbarOptions.allowKeyboardNavigation = false;
+  },
 }));
 
 test.meta({ browserSize: [800, 800] })('Export is disabled when no data columns is in grid header, menu: false', async (t) => {

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/groupColumnReordering.visual.ts

@@ -50,6 +50,9 @@ const DATA_GRID_SELECTOR = '#container';
           groupIndex: 0,
         },
       ],
+      onToolbarPreparing(e): void {
+        e.toolbarOptions.allowKeyboardNavigation = false;
+      },
     });
   });
 
@@ -91,6 +94,9 @@ const DATA_GRID_SELECTOR = '#container';
           groupIndex: 0,
         },
       ],
+      onToolbarPreparing(e): void {
+        e.toolbarOptions.allowKeyboardNavigation = false;
+      },
     });
   });
 
@@ -224,6 +230,9 @@ test('Reordering of grouping column should not work when onKeyDown.args.handled
         groupIndex: 0,
       },
     ],
+    onToolbarPreparing(e): void {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   });
 });
 
@@ -265,6 +274,9 @@ test('The group column should not be reordered when groupPanel.allowColumnDraggi
         groupIndex: 0,
       },
     ],
+    onToolbarPreparing(e): void {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   });
 });
 
@@ -307,6 +319,9 @@ test('The group column should not be reordered when it has allowGrouping set to
         allowGrouping: false,
       },
     ],
+    onToolbarPreparing(e): void {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   });
 });
 
@@ -659,6 +674,9 @@ test('Ungroup column when pressing Delete', async (t) => {
         groupIndex: 0,
       },
     ],
+    onToolbarPreparing(e): void {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   });
 });
 

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts

@@ -207,6 +207,9 @@ test.meta({ browserSize: [900, 800] })('The header row should be highlighted cor
       visible: true,
     },
     allowColumnReordering: false,
+    onToolbarPreparing(e): void {
+      e.toolbarOptions.allowKeyboardNavigation = false;
+    },
   });
 }).after(async () => {
   await MouseUpEvents.enable(MouseAction.dragToOffset);