Make all popovers implement a modal behavior

afercia commented 11 months ago

Description

Splitting this out from https://github.com/WordPress/gutenberg/pull/56042#issuecomment-1807695604

Turns out most of the popovers in the editor UI do implement constrained tabbing but some don't. I'm not sure what the reasoning behing this inconsistent is, but I'd tend to think all the popovers should implement a consistent keyboard interaction, regardless whether the component is 'inline' within the post content or in other parts of the UI.

Step-by-step reproduction instructions

Edit a post, select some text and press COmmand+K to add a link to the selected text.
A popover open, focus is moved to the link input field.
Press the Tab key multiple times
Observe that tabbing is constrained within the popover.
Add a link and save.
Select the linked text.
A popover with the Edit link UI appears.
Press the Tab key to move within the popover.
Move focus to the Edit button (the one with the pencil icon) and press Enter.
A popover with the Edti link UI appears.
Press the Tab key multiple times.
Observe that tabbing is not constrained within the popover.

There may be other instances of popovers where tabbing is not constrained. To me, it seems there is no good reason why popovers should not constrain tabbing. The keyboard interaction should always be the same: predictable and consistent. I'd like to hear thoughts also from @alexstine and @joedolson

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

alexstine commented 11 months ago

@afercia I tend to agree but also note that some popovers don't take focus by default. The AutocompleteUI for example.

CC: @getdave.

afercia commented 11 months ago

Thanks @alexstine

getdave commented 11 months ago

I started looking into dialogs on Link Control here https://github.com/WordPress/gutenberg/pull/54063 although it's clearly a work in progress and should be considered with that in mind.

mdrovdahl commented 1 month ago

I think related...the tab behavior in the Link Control edit mode within the Patterns context is suboptimal. Additionally, this Link Control behavior in the Patterns context is inconsistent with same control in the post editor context.

Steps to reproduce:

Create a new site via Playground (https://playground.wordpress.net)
Navigate to: Appearance > Editor > Patterns > Add New Pattern
Within the default paragraph block, create and save some hyperlinked text
Edit the hyperlink, change the text
Press tab twice and the dialog closes without saving the changes from step 4

https://github.com/user-attachments/assets/6dc16e79-0008-471b-9fb2-94b61dbcae7a

WordPress / gutenberg