-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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.
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
[joy-ui][Modal] Is it expected for actions to be presented inverted? #42185
Comments
Seems to be a bit of both. You can change the tab order by passing So this is the final change to work around the current issue - <DialogActions
orientation="horizontal"
sx={{ justifyContent: "flex-end" }}
>
... |
@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. |
Hey @m4theushw, nice to see a familiar face :)
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. |
@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:
|
Hey, has anyone started working on this issue yet? If not I'd love to take it. |
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/lucid-tereshkova-hyfyys?file=%2Fsrc%2FDemo.tsx%3A44%2C52
Steps:
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 offlex-direction: row-reverse
.Context
No response
Your environment
npx @mui/envinfo
Search keywords: joy modal actions
The text was updated successfully, but these errors were encountered: