New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(components): [message-box] add autofocus attribute #8445
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should add this option to config provider too.
It is possible to do this, but the message-box may be a little different. They may behave differently, so I think it's better to leave a dedicated property for this purpose. |
🧪 Playground Preview: https://element-plus.run/?pr=8445 |
This change will break the original accessibility, Demo |
Maybe we should not introduce this feature, remove the autofocus is a bad experience for some users. Maybe we should guide developers who want to change it like this in the docs to change it through styles. |
I got it. Fixed. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In its current state, autofocus: false
results in the close x being focused, which turns it blue. You may want to explicitly assign focusStartRef to rootRef when atuofocus is false. This will result in no visual change, and when the user tabs the focus will be trapped between the close and ok buttons.
@Giwayume Sorry I'm not familiar with a11y, I made some changes, Is this what you mean? |
Focus is automatically set to the first focusable element inside the dialog |
Yes, looks good! Those are examples for specific use cases, as far as focus and dialog goes it always depends on the use case for the dialog. There are cases where your dialog is purely informational and contains no real actions, in which case focus is pulled to the dialog element itself so its content is read out. Anyhow, with the PR in its current state, If the developer changes |
close #8213
autofocus
attribute (default:true
)Please make sure these boxes are checked before submitting your PR, thank you!
dev
branch.