Skip to content
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

Open
m4theushw opened this issue May 9, 2024 · 6 comments · May be fixed by #44496
Open

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

m4theushw opened this issue May 9, 2024 · 6 comments · May be fixed by #44496
Assignees
Labels
component: dialog This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. package: joy-ui Specific to @mui/joy

Comments

@m4theushw
Copy link
Member

m4theushw commented May 9, 2024

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

Kooha-2024-05-09-19-59-37

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

@m4theushw m4theushw added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 9, 2024
@brijeshb42 brijeshb42 added component: dialog This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy labels May 10, 2024
@brijeshb42
Copy link
Contributor

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
Copy link

@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
Copy link
Member

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!

@mnajdova mnajdova added good first issue Great for first contributions. Enable to learn the contribution process. and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 14, 2024
@siriwatknp
Copy link
Member

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
Copy link
Member Author

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: dialog This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. package: joy-ui Specific to @mui/joy
Projects
None yet
6 participants