Commit 22e2f9a5159 for woocommerce
commit 22e2f9a51594f6ce68813ebf11991e61201b4be4
Author: Peter Petrov <peter.petrov89@gmail.com>
Date: Mon Aug 17 11:06:31 2026 +0300
Flip pagination arrow icons in RTL locales (#67724)
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
diff --git a/packages/js/components/changelog/fix-55817-rtl-pagination-arrows b/packages/js/components/changelog/fix-55817-rtl-pagination-arrows
new file mode 100644
index 00000000000..4f1e4b1253b
--- /dev/null
+++ b/packages/js/components/changelog/fix-55817-rtl-pagination-arrows
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Flip the pagination previous/next arrow icons in RTL locales so they point in the direction they navigate.
diff --git a/packages/js/components/src/pagination/page-arrows-with-picker.tsx b/packages/js/components/src/pagination/page-arrows-with-picker.tsx
index 9ab5456ee3d..cc0cf68e1c1 100644
--- a/packages/js/components/src/pagination/page-arrows-with-picker.tsx
+++ b/packages/js/components/src/pagination/page-arrows-with-picker.tsx
@@ -4,7 +4,7 @@
import { Button } from '@wordpress/components';
import { createElement, useEffect, useState } from '@wordpress/element';
import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, isRTL } from '@wordpress/i18n';
import clsx from 'clsx';
import { uniqueId } from 'lodash';
@@ -92,7 +92,7 @@ export function PageArrowsWithPicker( {
<div className="woocommerce-pagination__page-arrows">
<Button
className={ previousLinkClass }
- icon={ chevronLeft }
+ icon={ isRTL() ? chevronRight : chevronLeft }
disabled={ ! ( currentPage > 1 ) }
onClick={ previousPage }
label={ __( 'Previous Page', 'woocommerce' ) }
@@ -115,7 +115,7 @@ export function PageArrowsWithPicker( {
) }
<Button
className={ nextLinkClass }
- icon={ chevronRight }
+ icon={ isRTL() ? chevronLeft : chevronRight }
disabled={ ! ( currentPage < pageCount ) }
onClick={ nextPage }
label={ __( 'Next Page', 'woocommerce' ) }
diff --git a/packages/js/components/src/pagination/page-arrows.tsx b/packages/js/components/src/pagination/page-arrows.tsx
index fa169a2863f..ab37e16244a 100644
--- a/packages/js/components/src/pagination/page-arrows.tsx
+++ b/packages/js/components/src/pagination/page-arrows.tsx
@@ -4,7 +4,7 @@
import { Button, Icon } from '@wordpress/components';
import { createElement } from '@wordpress/element';
import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, isRTL } from '@wordpress/i18n';
import clsx from 'clsx';
type PageArrowsProps = {
@@ -74,7 +74,7 @@ export function PageArrows( {
onClick={ previousPage }
label={ __( 'Previous Page', 'woocommerce' ) }
>
- <Icon icon={ chevronLeft } />
+ <Icon icon={ isRTL() ? chevronRight : chevronLeft } />
</Button>
<Button
className={ nextLinkClass }
@@ -82,7 +82,7 @@ export function PageArrows( {
onClick={ nextPage }
label={ __( 'Next Page', 'woocommerce' ) }
>
- <Icon icon={ chevronRight } />
+ <Icon icon={ isRTL() ? chevronLeft : chevronRight } />
</Button>
</div>
</div>
diff --git a/packages/js/components/src/pagination/test/page-arrows.test.tsx b/packages/js/components/src/pagination/test/page-arrows.test.tsx
new file mode 100644
index 00000000000..ed90384cf45
--- /dev/null
+++ b/packages/js/components/src/pagination/test/page-arrows.test.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+import { createElement } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PageArrows } from '../page-arrows';
+import { PageArrowsWithPicker } from '../page-arrows-with-picker';
+
+jest.mock( '@wordpress/i18n', () => ( {
+ ...jest.requireActual( '@wordpress/i18n' ),
+ isRTL: jest.fn( () => false ),
+} ) );
+
+const mockedIsRTL = isRTL as jest.MockedFunction< typeof isRTL >;
+
+// chevronLeft points left (path starts moving toward smaller x), chevronRight
+// the opposite; compare the rendered SVG path data to tell them apart.
+function getArrowPaths( container: HTMLElement ) {
+ const buttons = container.querySelectorAll(
+ '.woocommerce-pagination__link'
+ );
+ return Array.from( buttons ).map(
+ ( button ) => button.querySelector( 'path' )?.getAttribute( 'd' )
+ );
+}
+
+const CHEVRON_LEFT_D = 'M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z';
+const CHEVRON_RIGHT_D = 'M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z';
+
+describe( 'PageArrows', () => {
+ afterEach( () => {
+ mockedIsRTL.mockReturnValue( false );
+ } );
+
+ it( 'points previous left and next right in LTR', () => {
+ const { container } = render(
+ <PageArrows
+ currentPage={ 2 }
+ pageCount={ 3 }
+ setCurrentPage={ () => {} }
+ />
+ );
+ expect( getArrowPaths( container ) ).toEqual( [
+ CHEVRON_LEFT_D,
+ CHEVRON_RIGHT_D,
+ ] );
+ } );
+
+ it( 'points previous right and next left in RTL', () => {
+ mockedIsRTL.mockReturnValue( true );
+ const { container } = render(
+ <PageArrows
+ currentPage={ 2 }
+ pageCount={ 3 }
+ setCurrentPage={ () => {} }
+ />
+ );
+ expect( getArrowPaths( container ) ).toEqual( [
+ CHEVRON_RIGHT_D,
+ CHEVRON_LEFT_D,
+ ] );
+ } );
+} );
+
+describe( 'PageArrowsWithPicker', () => {
+ afterEach( () => {
+ mockedIsRTL.mockReturnValue( false );
+ } );
+
+ it( 'points previous left and next right in LTR', () => {
+ const { container } = render(
+ <PageArrowsWithPicker
+ currentPage={ 2 }
+ pageCount={ 3 }
+ setCurrentPage={ () => {} }
+ />
+ );
+ expect( getArrowPaths( container ) ).toEqual( [
+ CHEVRON_LEFT_D,
+ CHEVRON_RIGHT_D,
+ ] );
+ } );
+
+ it( 'points previous right and next left in RTL', () => {
+ mockedIsRTL.mockReturnValue( true );
+ const { container } = render(
+ <PageArrowsWithPicker
+ currentPage={ 2 }
+ pageCount={ 3 }
+ setCurrentPage={ () => {} }
+ />
+ );
+ expect( getArrowPaths( container ) ).toEqual( [
+ CHEVRON_RIGHT_D,
+ CHEVRON_LEFT_D,
+ ] );
+ } );
+} );
diff --git a/plugins/woocommerce/changelog/fix-55817-rtl-pagination-arrows b/plugins/woocommerce/changelog/fix-55817-rtl-pagination-arrows
new file mode 100644
index 00000000000..cecfb7cbf2a
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-55817-rtl-pagination-arrows
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix reversed pagination arrows on Analytics report tables in RTL locales