Tips for consistently implementing focusVisible design on a targeted Material-UI Button element:

Question

Tips for consistently implementing focusVisible design on a targeted Material-UI Button element:

When using the Material-UI Button component, I want the "focus" styling to match the "focusVisible" styling. This means I want the same ripple effect to be visible whether the button is focused programmatically or with the mouse, as it would be when focused with the tab key.

I discovered a workaround by triggering a

dispatchEvent(new window.Event("keydown"))

on the element before focusing it, which forces the keyboard to be the last input type used. This successfully achieves the desired button appearance until a mouse event like onMouseLeave is fired, causing the visible focus to disappear.

I managed to alter the focus styling of the component using the following code:

import React from "react"
import { withStyles } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"

const styles = {
  root: {
    '&:focus': {
      border: "3px solid #000000"
    }
  }
}

const CustomButtonRaw = React.forwardRef((props, ref) => {
  const { classes, ...rest } = props
  return <Button classes={{root: classes.root}} {...rest} ref={ref}/>
}

const CustomButton = withStyles(styles, { name: "CustomButton" })(CustomButtonRaw)

export default CustomButton

Although I was able to apply some styles to the button in the "focus" state (such as adding a border), I am struggling to get the styles to actually apply. I attempted adding the className 'Mui-visibleFocus' to the Button, but it appeared to have no effect. Is there a way to access the styles that would be applied if the Button was in the visibleFocus state?

css reactjs button material-ui focus

Answer 1

Answer №1

ButtonBase is a crucial component in Material-UI that Button delegates to. It includes an action prop that enables the setting of the button's focus-visible state through the use of the useImperativeHandle hook.

To utilize this functionality, you need to pass a ref into the action prop and later call actionRef.current.focusVisible(). However, this alone is not enough because ButtonBase listens to various mouse and touch events for ripple effects. If you use the disableTouchRipple prop, it stops the ripple animation based on those events.

Unfortunately, disabling the touch ripple effect also removes the click and touch animations on the button. One way to restore these animations is to manually add another TouchRipple element that you have control over. The example provided below demonstrates how to handle onMouseDown and onMouseUp events to achieve this.

For a comprehensive solution, it would be necessary to address all the different events that ButtonBase handles. The working example showcases a custom button component called FocusRippleButton that incorporates these concepts.

Feel free to check out the CodeSandbox example for a live demonstration.

Answer 2

ButtonBase is a crucial component in Material-UI that Button delegates to. It includes an action prop that enables the setting of the button's focus-visible state through the use of the useImperativeHandle hook.

To utilize this functionality, you need to pass a ref into the action prop and later call actionRef.current.focusVisible(). However, this alone is not enough because ButtonBase listens to various mouse and touch events for ripple effects. If you use the disableTouchRipple prop, it stops the ripple animation based on those events.

Unfortunately, disabling the touch ripple effect also removes the click and touch animations on the button. One way to restore these animations is to manually add another TouchRipple element that you have control over. The example provided below demonstrates how to handle onMouseDown and onMouseUp events to achieve this.

For a comprehensive solution, it would be necessary to address all the different events that ButtonBase handles. The working example showcases a custom button component called FocusRippleButton that incorporates these concepts.

Feel free to check out the CodeSandbox example for a live demonstration.

Answer 3

Answer №2

Utilizing the action attribute of the material-ui Button component allows us to create a reference and implement the ripple effect using useLayoutEffect

import React, { createRef, useLayoutEffect } from "react";
import Button from "@material-ui/core/Button";

function RippleButton(props) {
  const { handleClose } = props;

  const actionRef = createRef();

  useLayoutEffect(() => {
    if (actionRef.current) {
      actionRef.current.focusVisible();
    }
  }, []);

  return (
    <Button action={actionRef} onClick={handleClose}>
      Ok
    </Button>
  );
}

The RippleButton above can serve as an alternative to the standard Button, or you can simply utilize a reference to trigger the focusVisible() method

For example:

const buttonRef = createRef();

const handleButton2Click = () => {
    buttonRef.current.focusVisible();
};

.
.
.
.

<Button action={buttonRef} variant="outlined">
        Button 1
</Button>

<Button variant="outlined" color="primary" onClick={handleButton2Click}>
        Button 2
</Button>

Explore the live demo on this link

Answer 4

Utilizing the action attribute of the material-ui Button component allows us to create a reference and implement the ripple effect using useLayoutEffect

import React, { createRef, useLayoutEffect } from "react";
import Button from "@material-ui/core/Button";

function RippleButton(props) {
  const { handleClose } = props;

  const actionRef = createRef();

  useLayoutEffect(() => {
    if (actionRef.current) {
      actionRef.current.focusVisible();
    }
  }, []);

  return (
    <Button action={actionRef} onClick={handleClose}>
      Ok
    </Button>
  );
}

The RippleButton above can serve as an alternative to the standard Button, or you can simply utilize a reference to trigger the focusVisible() method

For example:

const buttonRef = createRef();

const handleButton2Click = () => {
    buttonRef.current.focusVisible();
};

.
.
.
.

<Button action={buttonRef} variant="outlined">
        Button 1
</Button>

<Button variant="outlined" color="primary" onClick={handleButton2Click}>
        Button 2
</Button>

Explore the live demo on this link

Tips for consistently implementing focusVisible design on a targeted Material-UI Button element:

Answer №1

Answer №2

Similar questions

Removing a comma from a dynamic loop of Material UI Text fields in React can be achieved by accessing

How to organize initial, exit, and layout animations in Framer Motion (React) tutorial?

The options in the drop-down menu appear to be stuck and remain in place

Designing table rows to resemble full-width cards

Encountering the "node:internal/modules/cjs/loader:1050" error while attempting to execute a folder using the "npm run dev" command

Using React, the value of the <input> element will remain the same even after editing

"Developing a stand-alone ASP.NET Core WebAPI with back-end authentication, and creating a React Redux application with front-end authentication that operate autonom

Is it possible to use both MUI makeStyles and Theming in the _app.js file?

Eliminate file security error in Meteor by utilizing Filestack

Problem with ternary operator when returning in React

Changing the text alignment to justify in OWA - HTML emails

Setting a default value for Autocomplete in MaterialUI and React.js

The element within the iterator is lacking a "key" prop, as indicated by the linter error message in a React component

React component state change in reverse

How can I assign global classes to material-ui components in ReactJs?

Removing the values of all keys in Async Storage in React Native when logging out

What are the steps to vertically aligning rows in bootstrap?

Navigating to the previous page in a Next.js 14 application with the App Router

Choosing an HTML element within a useEffect Hook

Troubles with NextJS and TailwindCSS Styling