2024687 - [wpt-sync] Sync PR 58577 - [reading-flow] Fix slotted node ordering in focus navigation

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, task, P4)

Description

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Sync web-platform-tests PR 58577 into mozilla-central (this bug is closed when the sync is complete).

PR: https://github.com/web-platform-tests/wpt/pull/58577
Details from upstream follow.

Peng Zhou <[e-mail]> wrote:

[reading-flow] Fix slotted node ordering in focus navigation

Reading-flow traversal assumed items were direct flat-tree children of
the container. When nodes are assigned through non-container slots this
assumption breaks, producing incorrect focus navigation order and
accessibility child ordering for grid-order case in Shadow DOM.

Treat non-container slots as layout anchors when resolving reading-flow
items and ensure slotted nodes are mapped back to their container when
computing focus and accessibility order.

Bug: 452981723
Change-Id: I4e7642657914b8c4dc6ca802957cfde35f491edf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7659082
Reviewed-by: Mason Freed \<[e-mail]>
Commit-Queue: Peng Zhou \<[e-mail]>
Cr-Commit-Position: refs/heads/main@{#1601836}

Comment 1

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Pushed to try (stability) https://treeherder.mozilla.org/#/jobs?repo=try&revision=248bc1036fa5fa734ed2d4cbf2338369983bb8e4

Comment 2

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

CI Results

Ran 9 Firefox configurations based on mozilla-central, and Firefox, Chrome, and Safari on GitHub CI

Total 20 tests and 5 subtests

Status Summary

Firefox

OK : 1[GitHub] 20[Gecko-android-em-14-x86_64-debug-geckoview, Gecko-android-em-14-x86_64-lite-opt-geckoview, Gecko-android-em-14-x86_64-opt-geckoview, Gecko-linux2404-64-debug, Gecko-linux2404-64-opt, Gecko-windows11-32-24h2-debug, Gecko-windows11-32-24h2-opt, Gecko-windows11-64-24h2-debug, Gecko-windows11-64-24h2-opt]
PASS: 5
FAIL: 7[GitHub] 43[Gecko-android-em-14-x86_64-debug-geckoview, Gecko-android-em-14-x86_64-lite-opt-geckoview, Gecko-android-em-14-x86_64-opt-geckoview, Gecko-linux2404-64-debug, Gecko-linux2404-64-opt, Gecko-windows11-32-24h2-debug, Gecko-windows11-32-24h2-opt, Gecko-windows11-64-24h2-debug, Gecko-windows11-64-24h2-opt]

Chrome

OK : 1
PASS: 4
FAIL: 3

Safari

OK : 1
FAIL: 7

Links

Gecko CI (Treeherder)
GitHub PR Head
GitHub PR Base

Details

New Tests That Don't Pass

• /shadow-dom/focus-navigation/reading-flow/tentative/carousel-grid-order.html [wpt.fyi]
  • Grid items in carousel should follow grid-order reading flow: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/flex-flow.html [wpt.fyi]
  • Flex items in flexbox should follow flex-flow reading flow: FAIL
  • Flex items in rtl flexbox should follow flex-flow reading flow: FAIL
  • Flex items in vertical-lr flexbox should follow flex-flow reading flow: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/flex-visual-order.html [wpt.fyi]
  • Flex items in row-reverse flexbox should follow flex-visual reading flow: FAIL
  • Flex items in row-reverse rtl flexbox should follow flex-visual reading flow: FAIL
  • Flex items in row-reverse and vertical-lr flexbox should follow flex-visual reading flow: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-auto-flow-reading-order.html [wpt.fyi]
  • Grid items should follow grid-rows reading flow, but let reading-order can move item's focus order to the top.: FAIL
  • Grid items should follow reading flow, mix of reading-order and order values.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-columns.html [wpt.fyi]
  • Grid items in grid template columns should follow grid-columns reading flow: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-across-scopes.html [wpt.fyi]
  • Grid items in shadow host that is a display contents grid item: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-on-shadow-host.html [wpt.fyi]
  • Grid items in shadow host with delegatesFocus: FAIL
  • Grid items in shadow host without delegatesFocus: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-pseudo-elements.html [wpt.fyi]
  • Grid pseudo items are not focusable: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-display-contents.html [wpt.fyi]
  • Items in display contents are sorted in same grid container and are placed in the position where their first child resides.: FAIL
  • Items in display contents are sorted in same grid container and are placed in the position where their first child resides. The display contents have tabindex and should be focusable.: FAIL
  • Grid items are in nested display contents containers.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-iframe.html [wpt.fyi]
  • Grid items are iframes.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-nested-grids.html [wpt.fyi]
  • Grid items are not grid containers.: FAIL
  • Grid items are grid containers.: FAIL
  • Only has grid containers.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-popover.html [wpt.fyi]
  • Popover is reading-flow item.: FAIL
  • Popover is reading-flow item and reading-flow container.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-position-absolute.html [wpt.fyi]
  • Items in position:absolute container are visited at the end of the focus sequence. reading-order can override DOM order.: FAIL
  • Items that have position:absolute are visited at the end of the focus sequence, in DOM order.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-position-fixed.html [wpt.fyi]
  • Items in position:fixed container are visited at the end of the focus sequence. reading-order can override DOM order.: FAIL
  • Items that have position:fixed are visited at the end of the focus sequence, in DOM order.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-slots.html [wpt.fyi]
  • Slot assigned element is a grid with reading-flow.: FAIL (Chrome: PASS, Safari: FAIL)
  • Slot is a grid with reading-flow.: FAIL (Chrome: PASS, Safari: FAIL)
  • Slot is inside a grid container with reading-flow.: FAIL (Chrome: FAIL, Safari: FAIL)
  • Slot is a grid with reading-flow inside a grid container with reading-flow.: FAIL (Chrome: FAIL, Safari: FAIL)
  • Slot is not inside a shadow host.: FAIL (Chrome: PASS, Safari: FAIL)
  • Slot is a display contents inside a grid container.: FAIL (Chrome: FAIL, Safari: FAIL)
  • Slot is a display block inside a grid container.: FAIL (Chrome: PASS, Safari: FAIL)
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-order.html [wpt.fyi]
  • Grid items with order property: FAIL
  • Grid items with order property and tabindex. Positive tabindex doesn't reorder reading flow item, but can affect its descendants.: FAIL
  • Items in display block are not in parent grid container.: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/grid-rows.html [wpt.fyi]
  • Grid items in grid template columns should follow grid-rows reading flow: FAIL
• /shadow-dom/focus-navigation/reading-flow/tentative/source-order-valid.html [wpt.fyi]
  • Block elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.: FAIL
  • Block inline elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.: FAIL
  • Flex elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.: FAIL
  • Grid elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.: FAIL
  • Flow root elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.: FAIL

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/dca6a5d06a2c
https://hg.mozilla.org/integration/autoland/rev/d2d501fd7fa9
[wpt PR 58577] - [reading-flow] Fix slotted node ordering in focus navigation, a=testonly

Comment 4

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/d2d501fd7fa9