Using CSS reading-flow breaks focus in Dialog

[instaproadrian]

Description

Reading flow (https://developer.chrome.com/blog/reading-flow) is a relatively new addition to CSS, which changes the order in which tabbing happens and it seems to provide a nice win for accessibility issues around visual order vs tab order. However, I think this causes issues for the code that handles focus trapping in the ArkUI Dialog, which I guess is expecting tab order and source order to be the same. This results in some items being unreachable via the keyboard.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/up7usqe3?file=src%2Findex.css

Steps to Reproduce

1. Open the Dialog,
2. Try to reach the OK button by tabbing

The focus will switch between the close button and cancel button and you'll never reach OK in browsers that support reading-flow (Chromium based browsers from v137)

Ark UI Version

5.18.3

Framework

• React
• Solid
• Vue
• Svelte

Browser

Google Chrome 138

Additional Information

The reproduction I provided is an oversimplification of my actual use case. Obviously in this case you could fix it by reversing the order of buttons in markup and removing reading-flow, but the actual use case I have has the button order displayed differently between mobile and desktop devices, which means I can't do that.