Skip to content

Details Block: Inner blocks cannot be focused using only the keyboard #70047

@t-hamano

Description

@t-hamano

Description

Reported at #65603 (comment)

Previously, the Details block automatically opened and closed the contents inside the block when the block was selected. However, this behavior was removed by #67766 after users reported issues with dragging and dropping blocks.

However, this introduced another accessibility issue. Keyboard users cannot access the inner blocks because the contents inside the block can only be opened and closed by clicking the summary element with the mouse pointer.

Step-by-step reproduction instructions

  1. Add a new post.
  2. Insert details block.
  3. Notice how focus should land in the summary title field.
  4. Try to move to the hidden paragraph.
  5. Impossible because the block is collapsed.
  6. Try to expand the block with the keyboard.
  7. Impossible because there is no exposed expander/trigger due to the overriding of semantics for screen readers.
  8. Open the list view.
  9. Expand the details block in the tree.
  10. Try to select the paragraph block.
  11. Block is announced as selected but focus doesn't move since it is not exposed in the canvas.

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] DetailsAffects the Details Block - used to display content which can be shown/hidden[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    Status

    ✅ Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions