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

[core] Remove useIsFocusVisible util #42467

Merged
merged 9 commits into from
Jul 1, 2024

Conversation

DiegoAndai
Copy link
Member

@DiegoAndai DiegoAndai commented May 31, 2024

Part of #40958
Closes: #14420

As :focus-visible is now supported in all our supported browsers (reference), we can remove this utility and rely completely on :focus-visible.

This is an intermediate step: ideally, we would use the :focus-visible pseudo-selector directly, but that would mean removing the focusVisible classes and refactoring many components.

@DiegoAndai DiegoAndai added the core Infrastructure work going on behind the scenes label May 31, 2024
@DiegoAndai DiegoAndai self-assigned this May 31, 2024
@mui-bot
Copy link

mui-bot commented May 31, 2024

Netlify deploy preview

https://deploy-preview-42467--material-ui.netlify.app/

Link: parsed: -2.54% 😍, gzip: -2.82% 😍
@mui/joy: parsed: -0.31% 😍, gzip: -0.52% 😍
@material-ui/core: parsed: -0.26% 😍, gzip: -0.39% 😍
@mui/joy/Switch: parsed: -1.95% 😍, gzip: -2.23% 😍
@mui/joy/Checkbox: parsed: -1.80% 😍, gzip: -2.06% 😍
@mui/joy/Radio: parsed: -1.85% 😍, gzip: -2.09% 😍
@mui/joy/Chip: parsed: -1.94% 😍, gzip: -2.02% 😍
@mui/joy/ChipDelete: parsed: -1.65% 😍, gzip: -1.82% 😍
Rating: parsed: -2.14% 😍, gzip: -2.24% 😍
@mui/joy/IconButton: parsed: -1.75% 😍, gzip: -1.81% 😍
@mui/joy/Link: parsed: -1.82% 😍, gzip: -2.27% 😍
@mui/joy/Button: parsed: -1.73% 😍, gzip: -1.76% 😍
@mui/joy/ListItemButton: parsed: -2.02% 😍, gzip: -1.99% 😍
@mui/joy/ModalClose: parsed: -1.61% 😍, gzip: -1.84% 😍
@mui/joy/Slider: parsed: -1.65% 😍, gzip: -1.74% 😍
@mui/joy/Tab: parsed: -1.85% 😍, gzip: -1.90% 😍
@mui/joy/MenuItem: parsed: -1.89% 😍, gzip: -1.85% 😍
@mui/joy/Autocomplete: parsed: -0.84% 😍, gzip: -1.01% 😍
@mui/joy/Option: parsed: -1.90% 😍, gzip: -1.84% 😍
Button: parsed: -17.54% 😍, gzip: -17.08% 😍
and 38 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 6c31464

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a precaution, have you tested that all these components behave identically once moving to use the :focus-visible pseudo selector in the oldest browsers we support? Just to make sure there won't introduce some subtle breaking changes with this.

@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Jun 12, 2024
@DiegoAndai DiegoAndai marked this pull request as ready for review June 19, 2024 20:25
@DiegoAndai
Copy link
Member Author

DiegoAndai commented Jun 19, 2024

Just a precaution, have you tested that all these components behave identically once moving to use the :focus-visible pseudo selector in the oldest browsers we support? Just to make sure there won't introduce some subtle breaking changes with this.

I tested all browsers, both minimally supported and latest versions. The only thing "not working" is the Link's focus visible in Firefox 115, but that's not working on master (mui.com) either. I think it might be a configuration issue. It's working correctly on the latest Firefox version (127). So, in summary, this is working the same way as master in all supported browsers. This makes sense as we were already relying in :focus-visible on all browsers in which it was available (reference).

This is ready for review 😊

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 20, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 26, 2024
@DiegoAndai DiegoAndai requested review from aarongarciah and removed request for mnajdova and michaldudak June 26, 2024 16:36
@aarongarciah aarongarciah added the port-to-base-ui PR to be included in the Base UI repository once the API changes are done label Jun 26, 2024
Copy link
Member

@aarongarciah aarongarciah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice! Left some small comments and questions.

packages/mui-joy/src/Tooltip/Tooltip.tsx Outdated Show resolved Hide resolved
packages/mui-joy/src/Link/Link.tsx Outdated Show resolved Hide resolved
packages/mui-base/src/useSwitch/useSwitch.ts Show resolved Hide resolved
packages/mui-utils/src/isFocusVisible/isFocusVisible.ts Outdated Show resolved Hide resolved
Copy link
Member

@aarongarciah aarongarciah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yay!

@DiegoAndai DiegoAndai merged commit 089c40c into mui:next Jul 1, 2024
19 checks passed
@DiegoAndai DiegoAndai deleted the remove-use-is-focus-visible branch July 1, 2024 15:13
/**
* Returns a boolean indicating if the event's target has :focus-visible
*/
export default function isFocusVisible(element: Element): boolean {
Copy link
Member

@oliviertassinari oliviertassinari Jul 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would have expected this to come from Base UI.

?

Suggested change
export default function isFocusVisible(element: Element): boolean {
// TODO import from Base UI
export default function isFocusVisible(element: Element): boolean {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned in the description: "ideally, we would use the :focus-visible pseudo-selector directly, but that would mean removing the focusVisible classes and refactoring many components."

The isFocusVisible function is an intermediary step, so I don't think we should implement it in Base UI. When we reimplement the look of the library, we should use :focus-visible directly, deprecate the focusVisible classes, and eventually remove this function.

Copy link
Member

@oliviertassinari oliviertassinari Sep 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this one. 50% of the use of isFocusVisible is to apply the focusVisible class name. We can eventually remove this. The other 50% is to change React states or JavaScript behaviors. So I don't see how this isFocusVisible() helper can be removed.

(I landed here from https://www.notion.so/engineering-mui-utils-purpose-9a9fc9da3a004864b6c4e1f4d1f24f95?d=43a963028e3f410fa7eb7f0366a23968&pvs=4#d4907a42a7b0408ca14802a2880d2362).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other 50% is to change React states or JavaScript behaviors

From the components in this PR, the only one that uses isFocusVisible to manage JavaScript behavior is ButtonBase. Two out of three of those are related to ripple pulse, which, if I recall correctly, is not present in MD3.

The remaining one of the three relates to event handling, which should eventually come from Base UI. If they don't have a use case for managing JavaScript behavior, then I don't think Material UI will. cc: @michaldudak.

I'm not sure; I haven't dug into this yet as it's not a priority at all, but we might be able to remove it eventually.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't use such a utility currently in Base UI. However, there's one use case where it may help - when we focus an element programmatically during an mousedown event it sometimes incorrectly enters the focus-visible state. This happens as browsers (seemingly) wait for the click event to determine if a mouse interaction caused focus change. A custom utility could fix it.

Copy link
Member

@oliviertassinari oliviertassinari Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two out of three of those are related to ripple pulse, which, if I recall correctly, is not present in MD3.

@DiegoAndai If by pulse we mean:

Screen.Recording.2024-09-16.at.18.13.12.mov

Agree, it's gone. I think it's a great move of MD3, didn't like that. Otherwise, ripple is still present: https://material-web.dev/components/button/.

uses isFocusVisible to manage JavaScript behavior

What seems to be true:

So, ok, it's not 50% 😄

cc @atomiks for awareness. There could be value, e.g. for logic like

if (process.env.NODE_ENV !== 'production' && !/jsdom/.test(window.navigator.userAgent)) {
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes port-to-base-ui PR to be included in the Base UI repository once the API changes are done
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[material-ui][mui-system] Completely remove IE 11 support in v6
6 participants