Skip to content

Gutenberg block settings not keyboard accessible at 200% zoom #9739

Description

@abrightclearweb

Describe the bug
At 200% zoom, the block settings panel is not easily keyboard accessible.

The relevant WCAG 2.0 success criterion:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

To Reproduce
Steps to reproduce the behavior:

  1. Create a Gutenberg post with several blocks.
  2. Focus on one block e.g. a Paragraph block.
  3. Go to the Block Settings.
  4. Attempt to change e.g. the text size in the Block Settings panel.

Expected behavior
I expected that Block Settings would be visible at 200% zoom. It was not and I had to toggle it again. I would have expected to see it after the Editor pane.

When I tried to access the Text Setttings controls for my chosen block, the keyboard focus cycled through the previous blocks in the post instead.

Even if I had been able to access them, it would have been difficult to know which Paragraph block text size I was changing if there were more than one. In a large document, this would be almost impossible.

Screenshots

This is how the paragraph text size can be set at 100% zoom using the keyboard (in this gif, I used the mouse to add the cursor to the Paragraph block for speed).
change paragraph text size 100 zoom

This shows the zoom size for the previously edited Paragraph block increasing to 200%. When I attempt to access block settings now, I start focusing on the other blocks ahead of the Paragraph block and their controls. I cannot access the Block Settings controls.
gutenberg block settings 200 zoom

Desktop (please complete the following information):

  • OS: Windows 10 64-bit
  • Browser: Firefox Quantum
  • Version: 61.0.2
  • Gutenberg 3.7.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    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