red-hat-design-system
red-hat-design-system copied to clipboard
[bug] `<rh-dialog>` keyboard focus issue
Describe the bug
Triggering an rh-dialog component to "open" via a keyboard, the focus doesn't correctly transition from the trigger button to the open dialog. The focus remains on the trigger.
Which Component?
rh-dialog
Steps to reproduce
- Go to https://ux.redhat.com/elements/dialog/demo/
- Using your keybaord, tab to the first "open" button
- Hit "Enter"
- Verify that the focus has remained on the "open"button
Expected behaviour
The focus should move the the dialog element when the trigger is clicked and focus moved back to the trigger button when the dialog is closed
Screenshots
Element HTML
No response
Operating System (OS)
macOS
Browser
Chrome
More browser information
No response
Additional Info
No response
I have a fix from rhpt-elements that I can put into a PR.
we should just use <dialog> internally https://caniuse.com/dialog
@bennypowers - Switching to dialog internally was going to be the follow up https://github.com/RedHat-UX/red-hat-design-system/issues/1242
<dialog> provides browser-built-in focus trap. should we spend time implementing that in javascript now then immediately turn around and delete that code? even if it's blocking release, we might reasonably estimate the amount of testing and qa of both approaches to be roughly equivalent. wdyt @nikkimk ?
@adamjohnson can you look into this for Clefairy?
Seems like this may now be something that could be fixed in #1242
Focus is correctly applied with the implementation of the native <dialog> in #2078.