When dialog opens, focus remains on background

[paulschreiber]

Duplicates

• I have searched the existing issues

Latest version

• 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