Grids: add reordering shortcuts a11y info to demos (#29851)

Author: arman-boyakhchyan

apps/demos/Demos/DataGrid/ColumnReordering/description.md

@@ -1,12 +1,21 @@
-DevExtreme DataGrid columns use the same display order as fields in data objects. You can use the [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) array to specify a different display order. To reorder a column at runtime, change the **column**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visibleIndex) property.
-
-Users can drag and drop column headers to reorder columns as needed. To activate this feature, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) property to **true**. If you wish to prevent reorder operations for a given column, disable its **column**.[allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowReordering) property.
+DevExtreme DataGrid columns use the same display order as fields in the component's [dataSource](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource). You can specify a different display order with the [columns[]](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) array. To reorder a column at runtime, change the **columns[]**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visibleIndex) property.
 <!--split-->
 
+To allow users to reorder columns, set [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) to `true`. To disable reordering operations for a specific column, assign `false` to its [allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowReordering) property.
+
+Users can reorder columns with mouse drag-and-drop operations or with keyboard shortcuts:
+
+- **Ctrl/Cmd+Left Arrow**    
+Move the focused column to the left.
+- **Ctrl/Cmd+Right Arrow**    
+Move the focused column to the right.
+
+Reordering operations are also available in the component's context menu.
+
 This demo illustrates [fixed](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed) column behavior during user-initiated column reorder operations. Users can drag & drop columns within the following areas (but not between them):
 
 - Columns fixed to the left
 - Non-fixed columns
 - Columns fixed to the right
 
-Sticky columns (fixed with the 'sticky' [position](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition)) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the DataGrid’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.
+Sticky columns (fixed with the 'sticky' [position](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition)) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the DataGrid’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.

apps/demos/Demos/DataGrid/RecordGrouping/description.md

@@ -1,10 +1,26 @@
-The DataGrid allows users to group data against a single column or multiple columns.
+To group data by columns, users can utilize the group panel. Enable the [groupPanel](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/groupPanel/).[visible](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/groupPanel/#visible) property to display the group panel area.
+<!--split-->
 
-To group data, users can drag and drop column headers onto and from the area above the grid. This area is called the [groupPanel](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/groupPanel/). Set its **visible** property to **true** to show it. 
+To group data, users can drag and drop column headers onto and from the group panel. DataGrid also supports keyboard shortcuts to perform grouping actions:
 
-Users can reorder headers within the **groupPanel** to change group hierarchy. To enable this functionality, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) property to *"true"*. 
-<!--split-->
+- **Ctrl+G**    
+Move the focused column header to the group panel. 
+- **Backspace**, **Delete**, and **Ctrl+Shift+G**    
+Remove the focused column header from the group panel. This shortcut is available for items in:
+    - The group panel.
+    - The column header if [showWhenGrouped](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#showWhenGrouped) is enabled.
+- **Shift+Alt+G**    
+Ungroup all items from the group panel.
+
+To allow users to reorder headers within the group panel, assign `true` to the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) property. Reordering headers in the group panel changes the component's group hierarchy. Users can reorder headers with mouse drag-and-drop operations or keyboard shortcuts:
+
+- **Ctrl/Cmd+Left Arrow**    
+Move the focused header to the left.
+- **Ctrl/Cmd+Right Arrow**    
+Move the focused header to the right.
+
+Grouping and reordering operations are also available in the component's context menu.
 
 To group data against a single **column**, apply the [groupIndex](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#groupIndex) property to it. This property accepts a zero-based index number that controls the column order. In this example, the data is grouped against the *State* column.
 
-You can also use the [grouping](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/) object to specify user interaction settings related to grouping. This demo illustrates the [autoExpandAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/#autoExpandAll) property that specifies whether the groups appear expanded.
+You can also use the [grouping](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/) object to specify user interaction settings related to grouping. This demo illustrates the [autoExpandAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/#autoExpandAll) property that specifies whether the groups appear expanded.

apps/demos/Demos/TreeList/Reordering/description.md

@@ -1,12 +1,21 @@
-DevExtreme TreeList columns use the same display order as fields in data objects. You can use the [columns](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/) array to specify a different display order. To reorder a column at runtime, change the **column**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#visibleIndex) property.
-
-Users can drag and drop column headers to reorder columns as needed. To activate this feature, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#allowColumnReordering) property to **true**. If you wish to prevent reorder operations for a given column, disable its **column**.[allowReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowReordering) property.
+DevExtreme DataGrid columns use the same display order as fields in the component's [dataSource](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#dataSource). You can specify a different display order with the [columns[]](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/) array. To reorder a column at runtime, change the **columns[]**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#visibleIndex) property.
 <!--split-->
 
+To allow users to reorder columns, set [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#allowColumnReordering) to `true`. To disable reordering operations for a specific column, assign `false` to its [allowReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowReordering) property.
+
+Users can reorder columns with mouse drag-and-drop operations or with keyboard shortcuts:
+
+- **Ctrl/Cmd+Left Arrow**    
+Move the focused column to the left.
+- **Ctrl/Cmd+Right Arrow**    
+Move the focused column to the right.
+
+Reordering operations are also available in the component's context menu.
+
 This demo illustrates [fixed](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixed) column behavior during user-initiated column reorder operations. Users can drag & drop columns within the following areas (but not between them):
 
 - Columns fixed to the left
 - Non-fixed columns
 - Columns fixed to the right
 
-Sticky columns (fixed with the 'sticky' [position](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixedPosition)) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the TreeList’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.
+Sticky columns (fixed with the 'sticky' [position](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixedPosition)) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the TreeList’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.