When dialog opens, focus remains on background

[paulschreiber]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When a dialog opens, focus remains on the background. I've used CSS to highlight focus in yellow to make this visually evident:

Expected behavior 🤔

When a dialog opens, focus should move to a dialog button (ideally the close/cancel button).

Steps to reproduce 🕹

:focus {
  background: yellow !important;
}

import React, { useState } from "react";
import {
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions
} from "@mui/material";
import "./index.css";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const onClick = (event) => {
    setIsOpen(true);
    event.stopPropagation();
  };

  return (
    <>
      <Dialog open={isOpen}>
        <DialogTitle>Title</DialogTitle>
        <DialogContent>Hi mom</DialogContent>

        <DialogActions>
          <Button>Hello</Button>
          <Button>There</Button>
        </DialogActions>
      </Dialog>
      <Button onClick={onClick}>Open</Button>
    </>
  );
}

Context 🔦

This is important for screen reader users.

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 12.5.1 Binaries: Node: 18.7.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.15.0 - /opt/homebrew/bin/npm Browsers: Chrome: 105.0.5195.102 Edge: Not Found Firefox: 104.0.1 Safari: 15.6.1 npmPackages: @emotion/react: ^11.10.0 => 11.9.3 @emotion/styled: ^11.10.0 => 11.9.3 @mui/base: 5.0.0-alpha.96 @mui/codemod: 5.10.4 @mui/core-downloads-tracker: 5.10.4 @mui/docs: 5.10.3 @mui/envinfo: 2.0.6 @mui/icons-material: 5.10.3 @mui/joy: 5.0.0-alpha.44 @mui/lab: 5.0.0-alpha.98 @mui/markdown: 5.0.0 @mui/material: 5.10.4 @mui/material-next: 6.0.0-alpha.52 @mui/private-theming: 5.10.3 @mui/styled-engine: 5.10.4 @mui/styled-engine-sc: 5.10.3 @mui/styles: 5.10.3 @mui/system: 5.10.4 @mui/types: 7.2.0 @mui/utils: 5.10.3 @mui/x-data-grid: 5.15.2 @mui/x-data-grid-generator: 5.15.2 @mui/x-data-grid-premium: 5.15.2 @mui/x-data-grid-pro: 5.15.2 @mui/x-date-pickers: 5.0.0-beta.5 @mui/x-date-pickers-pro: 5.0.0-beta.5 @mui/x-license-pro: 5.15.0 @types/react: ^18.0.17 => 18.0.14 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: 5.3.5 typescript: ^4.8.2 => 4.6.4 ```

[paulschreiber]

Please tag with accessibility. I don't have a PR for this because I'm not sure of the correct approach. Fix may need to go in Modal or another parent component.

[siriwatknp]

The auto-focus should be done by the developer. For example, this demo focuses on the TextField when the dialog opens.

On you case, I guess you can add autoFocus to the Button:

<Dialog open={isOpen}>
  <DialogTitle>Title</DialogTitle>
  <DialogContent>Hi mom</DialogContent>

  <DialogActions>
    <Button autoFocus>Hello</Button>
    <Button>There</Button>
  </DialogActions>
</Dialog>
<Button onClick={onClick}>Open</Button>

If this does not work, please let me know. Note that, I am not sure why it does not work in CodeSandbox.

[CWSites]

For anyone that is looking, I believe this is related to #34980