DataGrid: Fix the 'Move to the right' and 'Move to the left' context menu items in RTL mode (DevExpress#30023)

Co-authored-by: Alyar <>

Author: Alyar666

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

@@ -79,13 +79,14 @@ const DATA_GRID_SELECTOR = '#container';
     const contextMenu = dataGrid.getContextMenu();
     const headerRow = dataGrid.getHeaders().getHeaderRow(0);
     const firstHeaderCell = headerRow.getHeaderCell(0);
+    const contextMenuItemText = `Move to the ${rtlEnabled ? 'left' : 'right'}`;
 
     await t.rightClick(firstHeaderCell.element);
 
     await takeScreenshot(`reorder_column_to_right_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_1`);
 
     await t
-      .click(contextMenu.getItemByText('Move to the right'));
+      .click(contextMenu.getItemByText(contextMenuItemText));
 
     await takeScreenshot(`reorder_column_to_right_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_2`);
 
@@ -111,13 +112,14 @@ const DATA_GRID_SELECTOR = '#container';
     const contextMenu = dataGrid.getContextMenu();
     const headerRow = dataGrid.getHeaders().getHeaderRow(0);
     const lastHeaderCell = headerRow.getHeaderCell(3);
+    const contextMenuItemText = `Move to the ${rtlEnabled ? 'right' : 'left'}`;
 
     await t.rightClick(lastHeaderCell.element);
 
     await takeScreenshot(`reorder_column_to_left_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_1`);
 
     await t
-      .click(contextMenu.getItemByText('Move to the left'));
+      .click(contextMenu.getItemByText(contextMenuItemText));
 
     await takeScreenshot(`reorder_column_to_left_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_2`);
 

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_1.png

@@ -105,13 +105,14 @@ const DATA_GRID_SELECTOR = '#container';
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
     const contextMenu = dataGrid.getContextMenu();
     const firstGroupHeader = dataGrid.getGroupPanel().getHeader(0);
+    const contextMenuItemText = `Move to the ${rtlEnabled ? 'left' : 'right'}`;
 
     await t.rightClick(firstGroupHeader.element);
 
     await takeScreenshot(`reorder_group_column_to_${rtlEnabled ? 'left' : 'right'}_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_1`);
 
     await t
-      .click(contextMenu.getItemByText('Move to the right'));
+      .click(contextMenu.getItemByText(contextMenuItemText));
 
     await takeScreenshot(`reorder_group_column_to_${rtlEnabled ? 'left' : 'right'}_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_2`);
 
@@ -149,13 +150,14 @@ const DATA_GRID_SELECTOR = '#container';
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
     const contextMenu = dataGrid.getContextMenu();
     const lastGroupHeader = dataGrid.getGroupPanel().getHeader(1);
+    const contextMenuItemText = `Move to the ${rtlEnabled ? 'right' : 'left'}`;
 
     await t.rightClick(lastGroupHeader.element);
 
     await takeScreenshot(`reorder_group_column_to_${rtlEnabled ? 'right' : 'left'}_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_1`);
 
     await t
-      .click(contextMenu.getItemByText('Move to the left'));
+      .click(contextMenu.getItemByText(contextMenuItemText));
 
     await takeScreenshot(`reorder_group_column_to_${rtlEnabled ? 'right' : 'left'}_via_context_menu_when_rtlEnabled_=_${rtlEnabled}_2`);
 

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_1.png

@@ -61,7 +61,9 @@ export const ColumnContextMenuMixin = <T extends ModuleType<ColumnContextMenuMix
 
     return [
       {
-        text: messageLocalization.format('dxDataGrid-moveColumnToTheLeft'),
+        text: rtlEnabled
+          ? messageLocalization.format('dxDataGrid-moveColumnToTheRight')
+          : messageLocalization.format('dxDataGrid-moveColumnToTheLeft'),
         value: Direction.Previous,
         beginGroup: true,
         disabled: !keyboardNavigationController.canReorderColumn(
@@ -73,7 +75,9 @@ export const ColumnContextMenuMixin = <T extends ModuleType<ColumnContextMenuMix
         onItemClick,
       },
       {
-        text: messageLocalization.format('dxDataGrid-moveColumnToTheRight'),
+        text: rtlEnabled
+          ? messageLocalization.format('dxDataGrid-moveColumnToTheLeft')
+          : messageLocalization.format('dxDataGrid-moveColumnToTheRight'),
         value: Direction.Next,
         disabled: !keyboardNavigationController.canReorderColumn(
           column,