Skip to content

Block inspector: tabs slot fill should appear below post/block buttons in DOM #47623

Description

@alexstine

Description

In the block inspector, while the block tab is selected, the sub tabs slot fill can contain content above the slot fill which may make the tabs less discoverable to screen reader users. The sub tabs should appear below the post/block tabs and directly above the close button. This slot fill probably should not be a slot fill at all, it should be dedicated to tab navigation without the ability for developers to add other content that could distract from the sub tab navigation experience.

Step-by-step reproduction instructions

  1. Open a post.
  2. Insert some blocks, ensure one of them is a group block.
  3. Select the group block.
  4. Tab into the block inspector.
  5. Notice how you tab across Post, Block, and then Close.
  6. At this point, it is reasonable for a user to not expect tabs because the other buttons (fake tabs) are located above the close button.
  7. Press key tab again and you will land in a grouping of options called: Transform to variation.
  8. After this group is the sub tabs.

Screenshots, screen recording, code snippet

No response

Environment info

Gutenberg: trunk
OS: Windows 10 Professional
Firefox: latest
WordPress: 6.2-alpha-54678

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Needs DevReady for, and needs developer efforts[Feature] Inspector ControlsThe interface showing block settings and the controls available for each block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions