Skip to content
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

Make all popovers implement a modal behavior #56077

Open
afercia opened this issue Nov 13, 2023 · 4 comments
Open

Make all popovers implement a modal behavior #56077

afercia opened this issue Nov 13, 2023 · 4 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Nov 13, 2023

Description

Splitting this out from #56042 (comment)

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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components labels Nov 13, 2023
@alexstine
Copy link
Contributor

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

CC: @getdave.

@afercia afercia changed the title Make all popover implement a modal behavior Make all popovers implement a modal behavior Nov 13, 2023
@afercia
Copy link
Contributor Author

afercia commented Nov 13, 2023

Thanks @alexstine

@getdave
Copy link
Contributor

getdave commented Nov 13, 2023

I started looking into dialogs on Link Control here #54063 although it's clearly a work in progress and should be considered with that in mind.

@mdrovdahl
Copy link

mdrovdahl commented Sep 19, 2024

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:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

4 participants