Tabs and TabPanel: Fix arrow key navigation in RTL (WordPress#66201)

Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
karthick-murugan · Nov 13, 2024 · 1be96f4 · 1be96f4
1 parent d974857
commit 1be96f4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `Tabs`: fix indicator animation ([#66198](https://github.com/WordPress/gutenberg/pull/66198)).
 -   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
+-   `Tabs` and `TabPanel`: Fix arrow key navigation in RTL ([#66201](https://github.com/WordPress/gutenberg/pull/66201)).
 
 ### Enhancements
 

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
@@ -16,6 +16,7 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { useInstanceId, usePrevious } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -120,6 +121,7 @@ const UnforwardedTabPanel = (
 		orientation,
 		selectOnMove,
 		defaultSelectedId: prependInstanceId( initialTabName ),
+		rtl: isRTL(),
 	} );
 
 	const selectedTabName = extractTabName(

diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
@@ -14,6 +14,7 @@ import {
 	useMemo,
 	useRef,
 } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -45,6 +46,7 @@ function Tabs( {
 			onSelect?.( strippedDownId );
 		},
 		selectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,
+		rtl: isRTL(),
 	} );
 
 	const isControlled = selectedTabId !== undefined;