Skip to content

[focusgroup] support writing direction #58056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chromium-wpt-export-bot merged 1 commit into from
Feb 26, 2026
+405 −0
Merged

[focusgroup] support writing direction #58056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions ...interaction/focus/focusgroup/tentative/forward-navigation/horizontal/rtl-inline-only.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - RTL with inline-only axis respects reversed arrow keys.</title>
<meta name="assert" content="In an RTL focusgroup restricted to inline axis, ArrowLeft moves forward and ArrowRight moves backward. ArrowUp/ArrowDown should not move focus since the block axis is not supported.">
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
<script src="../../../resources/focusgroup-utils.js"></script>

<div dir="rtl" focusgroup="toolbar inline">
<span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=0>item2</span>
<span id=item3 tabindex=0>item3</span>
</div>

<script>

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// ArrowLeft is forward inline in RTL.
await focusAndKeyPress(item1, kArrowLeft);
assert_equals(document.activeElement, item2,
"ArrowLeft should move forward inline in RTL inline-only focusgroup");
}, "ArrowLeft moves forward in RTL inline-only focusgroup.");

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// ArrowRight is backward inline in RTL.
await focusAndKeyPress(item2, kArrowRight);
assert_equals(document.activeElement, item1,
"ArrowRight should move backward inline in RTL inline-only focusgroup");
}, "ArrowRight moves backward in RTL inline-only focusgroup.");

promise_test(async t => {
var item1 = document.getElementById("item1");

// Block axis keys should not move focus in an inline-only focusgroup.
await focusAndKeyPress(item1, kArrowDown);
assert_equals(document.activeElement, item1,
"ArrowDown should not move focus in inline-only focusgroup");

await focusAndKeyPress(item1, kArrowUp);
assert_equals(document.activeElement, item1,
"ArrowUp should not move focus in inline-only focusgroup");
}, "ArrowDown and ArrowUp do not move focus in RTL inline-only focusgroup.");

</script>
156 changes: 156 additions & 0 deletions ...interaction/focus/focusgroup/tentative/forward-navigation/mixed-ltr-rtl-visual-order.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - Arrow keys follow the focused element's writing direction.</title>
<meta name="assert" content="In a focusgroup with mixed writing directions, arrow keys follow the focused element's inherited writing direction. An RTL item uses ArrowLeft for forward and ArrowRight for backward, even inside an LTR focusgroup container, and vice versa.">
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
<script src="../../resources/focusgroup-utils.js"></script>

<!-- LTR container with items 1-2 inside an RTL wrapper.
item1/item2 inherit dir="rtl" → ArrowLeft is forward for them.
item3-5 are LTR → ArrowRight is forward for them. -->
<div id=ltr-group focusgroup="toolbar">
<div dir="rtl">
<span id=item1 tabindex=0>One</span>
<span id=item2 tabindex=0>Two</span>
</div>
<span id=item3 tabindex=0>Three</span>
<span id=item4 tabindex=0>Four</span>
<span id=item5 tabindex=0>Five</span>
</div>

<!-- RTL container with items r2-r3 inside an LTR wrapper.
r1 inherits dir="rtl" → ArrowLeft is forward.
r2/r3 inherit dir="ltr" → ArrowRight is forward for them. -->
<div id=rtl-group dir="rtl" focusgroup="toolbar">
<span id=r1 tabindex=0>One</span>
<div dir="ltr">
<span id=r2 tabindex=0>Two</span>
<span id=r3 tabindex=0>Three</span>
</div>
</div>

<script>

// --- LTR container with RTL wrapper ---
// item1 and item2 inherit RTL, so ArrowLeft is their forward key.

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// item1 is RTL: ArrowLeft = forward inline.
await focusAndKeyPress(item1, kArrowLeft);
assert_equals(document.activeElement, item2,
"ArrowLeft should move forward from RTL item1");
}, "LTR container: ArrowLeft (forward in RTL) from item1 moves to item2.");

promise_test(async t => {
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

// item2 is RTL: ArrowLeft = forward inline, crosses into LTR sibling.
await focusAndKeyPress(item2, kArrowLeft);
assert_equals(document.activeElement, item3,
"ArrowLeft should move forward from RTL item2 into LTR item3");
}, "LTR container: ArrowLeft (forward in RTL) from item2 crosses to LTR item3.");

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// item2 is RTL: ArrowRight = backward inline.
await focusAndKeyPress(item2, kArrowRight);
assert_equals(document.activeElement, item1,
"ArrowRight should move backward from RTL item2");
}, "LTR container: ArrowRight (backward in RTL) from item2 moves to item1.");

// item3-5 are LTR: ArrowRight = forward, ArrowLeft = backward.

promise_test(async t => {
var item3 = document.getElementById("item3");
var item4 = document.getElementById("item4");

await focusAndKeyPress(item3, kArrowRight);
assert_equals(document.activeElement, item4,
"ArrowRight should move forward from LTR item3");
}, "LTR container: ArrowRight from LTR item3 moves to item4.");

promise_test(async t => {
var item4 = document.getElementById("item4");
var item5 = document.getElementById("item5");

await focusAndKeyPress(item4, kArrowRight);
assert_equals(document.activeElement, item5,
"ArrowRight should move forward from LTR item4");
}, "LTR container: ArrowRight from LTR item4 moves to item5.");

promise_test(async t => {
var item4 = document.getElementById("item4");
var item5 = document.getElementById("item5");

await focusAndKeyPress(item5, kArrowLeft);
assert_equals(document.activeElement, item4,
"ArrowLeft should move backward from LTR item5");
}, "LTR container: ArrowLeft from LTR item5 moves to item4.");

promise_test(async t => {
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

// item3 is LTR: ArrowLeft = backward, crosses back into RTL wrapper.
await focusAndKeyPress(item3, kArrowLeft);
assert_equals(document.activeElement, item2,
"ArrowLeft should move backward from LTR item3 into RTL item2");
}, "LTR container: ArrowLeft from LTR item3 crosses back to RTL item2.");

// --- RTL container with LTR wrapper ---
// r1 inherits RTL: ArrowLeft = forward. r2/r3 inherit LTR: ArrowRight = forward.

promise_test(async t => {
var r1 = document.getElementById("r1");
var r2 = document.getElementById("r2");

// r1 is RTL: ArrowLeft = forward inline.
await focusAndKeyPress(r1, kArrowLeft);
assert_equals(document.activeElement, r2,
"ArrowLeft should move forward from RTL r1 into LTR wrapper");
}, "RTL container: ArrowLeft (forward in RTL) from r1 moves to LTR r2.");

promise_test(async t => {
var r2 = document.getElementById("r2");
var r3 = document.getElementById("r3");

// r2 is LTR: ArrowRight = forward inline.
await focusAndKeyPress(r2, kArrowRight);
assert_equals(document.activeElement, r3,
"ArrowRight should move forward from LTR r2");
}, "RTL container: ArrowRight (forward in LTR) from r2 moves to r3.");

promise_test(async t => {
var r1 = document.getElementById("r1");
var r2 = document.getElementById("r2");

// r2 is LTR: ArrowLeft = backward inline.
await focusAndKeyPress(r2, kArrowLeft);
assert_equals(document.activeElement, r1,
"ArrowLeft should move backward from LTR r2 to RTL r1");
}, "RTL container: ArrowLeft (backward in LTR) from r2 moves to r1.");

promise_test(async t => {
var r2 = document.getElementById("r2");
var r3 = document.getElementById("r3");

// r3 is LTR: ArrowLeft = backward inline.
await focusAndKeyPress(r3, kArrowLeft);
assert_equals(document.activeElement, r2,
"ArrowLeft should move backward from LTR r3");
}, "RTL container: ArrowLeft (backward in LTR) from r3 moves to r2.");

</script>
63 changes: 63 additions & 0 deletions ...eraction/focus/focusgroup/tentative/forward-navigation/rtl-direction-reverses-inline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - In RTL, ArrowLeft moves focus forward inline.</title>
<meta name="assert" content="In an RTL focusgroup, the ArrowLeft key should move focus forward (inline-end) and ArrowRight should move focus backward (inline-start), reversing the LTR default.">
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
<script src="../../resources/focusgroup-utils.js"></script>

<div dir="rtl" focusgroup="toolbar">
<span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=0>item2</span>
<span id=item3 tabindex=0>item3</span>
</div>

<script>

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// In RTL, ArrowLeft is forward inline (towards inline-end).
await focusAndKeyPress(item1, kArrowLeft);
assert_equals(document.activeElement, item2,
"ArrowLeft should move forward inline in RTL");
}, "ArrowLeft moves focus to the next item in an RTL focusgroup.");

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// In RTL, ArrowRight is backward inline (towards inline-start).
await focusAndKeyPress(item2, kArrowRight);
assert_equals(document.activeElement, item1,
"ArrowRight should move backward inline in RTL");
}, "ArrowRight moves focus to the previous item in an RTL focusgroup.");

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// ArrowDown should still move forward (block axis is unaffected by RTL).
await focusAndKeyPress(item1, kArrowDown);
assert_equals(document.activeElement, item2,
"ArrowDown should move forward block in RTL (unchanged)");
}, "ArrowDown moves focus forward in an RTL focusgroup (block axis unaffected).");

promise_test(async t => {
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");

// ArrowUp should still move backward (block axis is unaffected by RTL).
await focusAndKeyPress(item2, kArrowUp);
assert_equals(document.activeElement, item1,
"ArrowUp should move backward block in RTL (unchanged)");
}, "ArrowUp moves focus backward in an RTL focusgroup (block axis unaffected).");

</script>
43 changes: 43 additions & 0 deletions html/interaction/focus/focusgroup/tentative/forward-navigation/rtl-wraps-correctly.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - RTL wrapping respects reversed inline direction.</title>
<meta name="assert" content="In an RTL focusgroup with wrap, ArrowLeft at the last item should wrap to the first, and ArrowRight at the first item should wrap to the last.">
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
<script src="../../resources/focusgroup-utils.js"></script>

<div dir="rtl" focusgroup="toolbar wrap">
<span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=0>item2</span>
<span id=item3 tabindex=0>item3</span>
</div>

<script>

promise_test(async t => {
var item1 = document.getElementById("item1");
var item3 = document.getElementById("item3");

// ArrowLeft wraps forward: from last item should wrap to first.
await focusAndKeyPress(item3, kArrowLeft);
assert_equals(document.activeElement, item1,
"ArrowLeft from last item should wrap to first in RTL");
}, "ArrowLeft at last item wraps to first item in RTL focusgroup.");

promise_test(async t => {
var item1 = document.getElementById("item1");
var item3 = document.getElementById("item3");

// ArrowRight wraps backward: from first item should wrap to last.
await focusAndKeyPress(item1, kArrowRight);
assert_equals(document.activeElement, item3,
"ArrowRight from first item should wrap to last in RTL");
}, "ArrowRight at first item wraps to last item in RTL focusgroup.");

</script>
Loading