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

[data grid] Fix focus visible style on scrollbar #12402

Merged
merged 1 commit into from
Mar 10, 2024

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Mar 10, 2024

A quick win, I noticed this by chance, providing an example in #12401. It's a small regression from #10059.

Before:

Screen.Recording.2024-03-10.at.17.30.37.mov

After:

Screen.Recording.2024-03-10.at.17.30.47.mov

Similar to mui/material-ui#9147 but also different. There are no focus rings for scroll containers, it's not what end-users expect.

BTW, great to see that the keyboard actually works, it doesn't on AG Grid 🙈, a positive differentiator 👍

@oliviertassinari oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer bug 🐛 Something doesn't work regression A bug, but worse labels Mar 10, 2024
@mui-bot
Copy link

mui-bot commented Mar 10, 2024

Deploy preview: https://deploy-preview-12402--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against f84f49e

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Mar 10, 2024

to be fair, scroll containers that are focusable have the outline when when focus-visible triggers:

SCR-20240311-bsmu

but I believe here we set the focus just to be able to handle keyboard events, so good to move forward 😄

@oliviertassinari oliviertassinari merged commit 994f739 into mui:next Mar 10, 2024
21 checks passed
@oliviertassinari oliviertassinari deleted the fix-design-scrollbar branch March 10, 2024 23:54
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants