red-hat-design-system icon indicating copy to clipboard operation
red-hat-design-system copied to clipboard

[bug] `<rh-dialog>` keyboard focus issue

Open heyMP opened this issue 2 years ago • 6 comments

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

  1. Go to https://ux.redhat.com/elements/dialog/demo/
  2. Using your keybaord, tab to the first "open" button
  3. Hit "Enter"
  4. 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

Screenshot 2023-09-26 at 10 31 02 AM Screenshot 2023-09-26 at 10 31 08 AM

Element HTML

No response

Operating System (OS)

macOS

Browser

Chrome

More browser information

No response

Additional Info

No response

heyMP avatar Sep 26 '23 14:09 heyMP

I have a fix from rhpt-elements that I can put into a PR.

heyMP avatar Sep 26 '23 14:09 heyMP

we should just use <dialog> internally https://caniuse.com/dialog

bennypowers avatar Oct 11 '23 07:10 bennypowers

@bennypowers - Switching to dialog internally was going to be the follow up https://github.com/RedHat-UX/red-hat-design-system/issues/1242

brianferry avatar Oct 12 '23 13:10 brianferry

<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 ?

bennypowers avatar Oct 15 '23 07:10 bennypowers

@adamjohnson can you look into this for Clefairy?

markcaron avatar Aug 22 '24 14:08 markcaron

Seems like this may now be something that could be fixed in #1242

markcaron avatar Aug 22 '24 14:08 markcaron

Focus is correctly applied with the implementation of the native <dialog> in #2078.

adamjohnson avatar Feb 10 '25 15:02 adamjohnson