[joy-ui][Modal] Is it expected for actions to be presented inverted?

[m4theushw]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/lucid-tereshkova-hyfyys?file=%2Fsrc%2FDemo.tsx%3A44%2C52

Steps:

1. Click in the button to open the modal
2. Press Tab to navigate between the actions

Current behavior

The options are presented inverted relative to how they were defined in the code.

Expected behavior

I don't know if this is expected but pressing Tab should move the focus forward. For instance, with the focus in "Archive", the next focusable element is the "Discard notes" button. The Material Design modal behaves like that.

If it's a bug, I think it's just the case of aligning the buttons with justify-content: flex-end instead of flex-direction: row-reverse.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: joy modal actions

[brijeshb42]

Seems to be a bit of both. You can change the tab order by passing orientation="horizontal" prop value, but the alignment then starts from left.

So this is the final change to work around the current issue -

<DialogActions
  orientation="horizontal"
  sx={{ justifyContent: "flex-end" }}
>
...

[yasminebeji]

@m4theushw I was thinking, maybe to address the issue with actions appearing in the wrong order in the modal, we could try adjusting the button alignment. It might help if we ensure the Tab key navigation moves the focus forward logically through the actions/buttons.

[mnajdova]

Hey @m4theushw, nice to see a familiar face :)

If it's a bug, I think it's just the case of aligning the buttons with justify-content: flex-end instead of flex-direction: row-reverse.

I would definitely consider this a bug, and what you propose makes sense. I am marking it as a "good first issue", so whoever wants can take it!

[siriwatknp]

Hey @m4theushw, nice to see a familiar face :)

If it's a bug, I think it's just the case of aligning the buttons with justify-content: flex-end instead of flex-direction: row-reverse.

I would definitely consider this a bug, and what you propose makes sense. I am marking it as a "good first issue", so whoever wants can take it!

The behavior is intended because I think tab should focus on the primary action first.

[m4theushw]

The behavior is intended because I think tab should focus on the primary action first.

@siriwatknp I understand your intention but for this to work properly it needs to be handled by the developer. Reversing the visual order of the items breaks the accessibility for blind users. They expect Tab to move the focus forward but it goes backwards.

From https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction:

Using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.

[Gavin-10]

Hey, has anyone started working on this issue yet? If not I'd love to take it.