Closed paulschreiber closed 1 year ago
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.
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.
For anyone that is looking, I believe this is related to #34980
Duplicates
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 🕹
Context 🔦
This is important for screen reader users.
Your environment 🌎
``` 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 ```npx @mui/envinfo