commit 3e61ddfa455283191db607ebf7983dd731fd0d94 parent 0b5f51198c472b75663a009774b5356cd9e6ce72 Author: Irene Ni <ini@mozilla.com> Date: Sat, 18 Oct 2025 06:52:12 +0000 Bug 1994880 - Reverse arrow key navigation direction for RTL for New Tab story cards. r=home-newtab-reviewers,nbarrett Differential Revision: https://phabricator.services.mozilla.com/D268966 Diffstat:
3 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx @@ -92,14 +92,19 @@ export class _CardGrid extends React.PureComponent { return; } + // Arrow direction should match visual navigation direction in RTL + const isRTL = document.dir === "rtl"; + const navigateToPrevious = isRTL + ? e.key === "ArrowRight" + : e.key === "ArrowLeft"; + let targetCardEl = currentCardEl; // Walk through siblings to find the target card element while (targetCardEl) { - targetCardEl = - e.key === "ArrowLeft" - ? targetCardEl.previousElementSibling - : targetCardEl.nextElementSibling; + targetCardEl = navigateToPrevious + ? targetCardEl.previousElementSibling + : targetCardEl.nextElementSibling; if (targetCardEl && targetCardEl.matches("article.ds-card")) { const link = targetCardEl.querySelector("a.ds-card-link"); diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx @@ -179,6 +179,12 @@ function CardSection({ const activeColumn = getActiveColumnLayout(window.innerWidth); + // Arrow direction should match visual navigation direction in RTL + const isRTL = document.dir === "rtl"; + const navigateToPrevious = isRTL + ? e.key === "ArrowRight" + : e.key === "ArrowLeft"; + // Extract current position from classList let currentPosition = null; const positionPrefix = `${activeColumn}-position-`; @@ -196,8 +202,9 @@ function CardSection({ return; } - const targetPosition = - e.key === "ArrowLeft" ? currentPosition - 1 : currentPosition + 1; + const targetPosition = navigateToPrevious + ? currentPosition - 1 + : currentPosition + 1; // Find card with target position const parentEl = currentCardEl.parentElement; diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -5172,11 +5172,15 @@ class _CardGrid extends (external_React_default()).PureComponent { if (!currentCardEl) { return; } + + // Arrow direction should match visual navigation direction in RTL + const isRTL = document.dir === "rtl"; + const navigateToPrevious = isRTL ? e.key === "ArrowRight" : e.key === "ArrowLeft"; let targetCardEl = currentCardEl; // Walk through siblings to find the target card element while (targetCardEl) { - targetCardEl = e.key === "ArrowLeft" ? targetCardEl.previousElementSibling : targetCardEl.nextElementSibling; + targetCardEl = navigateToPrevious ? targetCardEl.previousElementSibling : targetCardEl.nextElementSibling; if (targetCardEl && targetCardEl.matches("article.ds-card")) { const link = targetCardEl.querySelector("a.ds-card-link"); if (link) { @@ -12022,6 +12026,10 @@ function CardSection({ } const activeColumn = getActiveColumnLayout(window.innerWidth); + // Arrow direction should match visual navigation direction in RTL + const isRTL = document.dir === "rtl"; + const navigateToPrevious = isRTL ? e.key === "ArrowRight" : e.key === "ArrowLeft"; + // Extract current position from classList let currentPosition = null; const positionPrefix = `${activeColumn}-position-`; @@ -12034,7 +12042,7 @@ function CardSection({ if (currentPosition === null) { return; } - const targetPosition = e.key === "ArrowLeft" ? currentPosition - 1 : currentPosition + 1; + const targetPosition = navigateToPrevious ? currentPosition - 1 : currentPosition + 1; // Find card with target position const parentEl = currentCardEl.parentElement;