[joy-ui][Modal] Is it expected for actions to be presented inverted? about material-ui HOT 6 OPEN

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!

from material-ui.

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" }}
>
...

from material-ui.

@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.

from material-ui.

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.

from material-ui.

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.

from material-ui.

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

from material-ui.