[core] Remove useIsFocusVisible util #42467

DiegoAndai · 2024-05-31T19:04:51Z

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.

mui-bot · 2024-05-31T19:07:57Z

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

packages/mui-utils/src/isFocusVisible/isFocusVisible.ts

mnajdova

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.

DiegoAndai · 2024-06-19T20:29:54Z

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 😊

aarongarciah

Very nice! Left some small comments and questions.

packages/mui-joy/src/Tooltip/Tooltip.tsx

packages/mui-joy/src/Link/Link.tsx

packages/mui-base/src/useSwitch/useSwitch.ts

packages/mui-utils/src/isFocusVisible/isFocusVisible.ts

aarongarciah

yay!

oliviertassinari · 2024-07-02T23:50:06Z

packages/mui-utils/src/isFocusVisible/isFocusVisible.ts

+/**
+ * Returns a boolean indicating if the event's target has :focus-visible
+ */
+export default function isFocusVisible(element: Element): boolean {


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 {

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.

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

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.

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.

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:

Button: can be replaced with :focus-visible

Slider: can be replaced with :focus-visible

Switch: can be replaced with :focus-visible

Link: can be replaced with :focus-visible

Rating: can be replaced with :focus-visible

ButtonBase: pulse ripple, on its way out

Tooltip: required for behavior. Calling .focus() shouldn't show the tooltip. It's also necessary in Base UI's Tooltip, but today this logic is hidden under https://github.com/floating-ui/floating-ui/blob/ecd627e4676a50643edcdf8915a6acefa50ee3d8/packages/react/src/hooks/useFocus.ts#L124.

So, ok, it's not 50% 😄

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

material-ui/packages/mui-utils/src/isFocusVisible/isFocusVisible.ts

Line 10 in 1c76999

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

.

DiegoAndai added the core Infrastructure work going on behind the scenes label May 31, 2024

DiegoAndai self-assigned this May 31, 2024

DiegoAndai requested review from michaldudak and mnajdova May 31, 2024 19:05

michaldudak reviewed Jun 4, 2024

View reviewed changes

packages/mui-utils/src/isFocusVisible/isFocusVisible.ts Outdated Show resolved Hide resolved

packages/mui-utils/src/isFocusVisible/isFocusVisible.ts Outdated Show resolved Hide resolved

mnajdova reviewed Jun 5, 2024

View reviewed changes

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 marked this pull request as ready for review June 19, 2024 20:25

DiegoAndai requested review from mnajdova and michaldudak June 19, 2024 20:30

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 20, 2024

DiegoAndai added 7 commits June 26, 2024 12:33

Remove useIsFocusVisible util

3e04e00

WIP adapting tests

cdb0022

Uncomment :focus-visible warning

6f2b4f1

Refactor isFocusVisible to receive event target

ffff78f

Update tests

1bc0175

Update skipped tests comment

26075d5

JSDOM skip base performance tests that rely on focus visible

16dddbb

DiegoAndai force-pushed the remove-use-is-focus-visible branch from 1dce511 to 16dddbb Compare June 26, 2024 16:34

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 requested review from aarongarciah and removed request for mnajdova and michaldudak June 26, 2024 16:36

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

romgrk mentioned this pull request Jun 27, 2024

[material-ui] Performance: lazy Ripple #41061

Merged

DiegoAndai mentioned this pull request Jun 27, 2024

[core][mui-utils] Remove remaining IE11 references #42777

Merged

aarongarciah reviewed Jun 28, 2024

View reviewed changes

DiegoAndai added 2 commits June 28, 2024 15:53

Remove unnecesary forked refs

37b0dd4

Improve isFocusVisible types

6c31464

DiegoAndai force-pushed the remove-use-is-focus-visible branch from 45f9abe to 6c31464 Compare June 28, 2024 19:55

aarongarciah approved these changes Jun 30, 2024

View reviewed changes

DiegoAndai merged commit 089c40c into mui:next Jul 1, 2024
19 checks passed

DiegoAndai deleted the remove-use-is-focus-visible branch July 1, 2024 15:13

oliviertassinari reviewed Jul 2, 2024

View reviewed changes

oliviertassinari mentioned this pull request Jul 14, 2024

[Select] - First options receives .Mui-focusVisible always #23747

Open

2 tasks

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024

[core] Remove useIsFocusVisible util (mui#42467)

9927683

oliviertassinari mentioned this pull request Sep 11, 2024

Update latest tag for published package #43538

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Remove useIsFocusVisible util #42467

[core] Remove useIsFocusVisible util #42467

DiegoAndai commented May 31, 2024 •

edited

Loading

mui-bot commented May 31, 2024 •

edited

Loading

mnajdova left a comment

DiegoAndai commented Jun 19, 2024 •

edited

Loading

aarongarciah left a comment

aarongarciah left a comment

oliviertassinari Jul 2, 2024 •

edited

Loading

DiegoAndai Jul 3, 2024

oliviertassinari Sep 14, 2024 •

edited

Loading

DiegoAndai Sep 16, 2024

michaldudak Sep 16, 2024

oliviertassinari Sep 16, 2024 •

edited

Loading

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

[core] Remove useIsFocusVisible util #42467

[core] Remove useIsFocusVisible util #42467

Conversation

DiegoAndai commented May 31, 2024 • edited Loading

mui-bot commented May 31, 2024 • edited Loading

Netlify deploy preview

Bundle size report

mnajdova left a comment

Choose a reason for hiding this comment

DiegoAndai commented Jun 19, 2024 • edited Loading

aarongarciah left a comment

Choose a reason for hiding this comment

aarongarciah left a comment

Choose a reason for hiding this comment

oliviertassinari Jul 2, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai Jul 3, 2024

Choose a reason for hiding this comment

oliviertassinari Sep 14, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai Sep 16, 2024

Choose a reason for hiding this comment

michaldudak Sep 16, 2024

Choose a reason for hiding this comment

oliviertassinari Sep 16, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai commented May 31, 2024 •

edited

Loading

mui-bot commented May 31, 2024 •

edited

Loading

DiegoAndai commented Jun 19, 2024 •

edited

Loading

oliviertassinari Jul 2, 2024 •

edited

Loading

oliviertassinari Sep 14, 2024 •

edited

Loading

oliviertassinari Sep 16, 2024 •

edited

Loading