Skip to content

Regression: the new Block Inserter doesn't constrain tabbing #22858

@afercia

Description

@afercia

Describe the bug
The new Block Inserter doesn't constrain tabbing with the Tab key.

In the old one, tabbing was constrained. Although we're not treating the Block Inserter as a modal, I think the previous behavior was beneficial. Not sure about the reasoning behind the removal of the tabbing constraining. I'd appreciate anyone pointing me to the discussion where this behavior removal was considered.

To reproduce

  • test on default WordPress 5.4 block editor first
  • open the main block inserter:

Screenshot 2020-06-03 at 15 59 24

  • focus is moved within the inserter
  • use the Tab key to navigate the inserter content
  • see that tabbing is constrained within the inserter: once you reach the last focusable element, focus is moved to the beginning and vice-versa
  • activate the Gutenberg plugin, right now it's version 8.2.1
  • open the main block inserter: you get the new one:

Screenshot 2020-06-03 at 15 58 24

  • use the Tab key to navigate the inserter content
  • by default the inserter displays 70 blocks so you will need to press Tab 70 times
  • I'll refrain from expressing usability concerns about the removal of the expandable block groups: having to tab dozens of times, or scroll through a long list of blocks, doesn't seem a great improvement to me
  • once you reach the last focusable element, tabbing is not constrained within the inserter any longer (and vice-versa)
  • keeping tabbing exits the inserter and moves focus to the rest of the UI, which isn't ideal

Expected behavior
Tabbing to be constrained.

Editor version (please complete the following information):

  • WordPress version: 5.4
  • Gutenberg plugin 8.2.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] InserterThe main way to insert blocks using the + button in the editing interface[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] RegressionRelated to a regression in the latest release

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions