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

Multi block selection: Block Switcher misleading label and tooltip #51917

Closed
afercia opened this issue Jun 26, 2023 · 1 comment · Fixed by #54692
Closed

Multi block selection: Block Switcher misleading label and tooltip #51917

afercia opened this issue Jun 26, 2023 · 1 comment · Fixed by #54692
Assignees
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release

Comments

@afercia
Copy link
Contributor

afercia commented Jun 26, 2023

Description

When selecting multiple block, the Block toolbar shows commands that are applicable to the set of selected blocks. So far so good.

In the toolbar, the Block Switched button shows the ‘copy’ icon. Could be better, but yes: so far so good.
However, the aria-label and the tooltip text refer to the first block title. Not sure it makes any sense. I would expect it would tell users it’s a multi-selection state or something along those lines.

The label and tooltip actually are the title of the first block in the set of selected blocks:

Screenshot 2023-06-26 at 11 44 34

Also, the Block switcher button has a visually hidden description, associated by the means of aria-describedby. The text of the description does refer to the multi-selection state and it's Change type of %d blocks but it doesn't make sense in combination with the first block title.

Actually, screen reader users will hear something like:

Quote. Change type of 3 blocks

Turns out with multi-selection the label of the Block switcher button used to be Change type of %d blocks. It was changed to the first block title in #26135

The current labeling + description doesn't make sense. I would expect it to be something like:

Label: Multiple blocks selected
Description: Change type of %d blocks

It should be more concise that that, because the label becomes visible when the preference 'Show button text labels' is enabled:

Show button text labels

Looking at the code, the description was made conditional and changes depending on whether there's a multi-block selection. Instead, the label is always the block title, which doesn't seem correct. It should change conditionally as well.

Additionally:

I'd also suggest to improve a bit the labeling + description for the single selection state. In this case, the Description repeats the block title, which is redundant and just adds noise:

Screenshot 2023-06-26 at 12 07 26

Step-by-step reproduction instructions

  • Create a new post.
  • Add a few blocks of different type.
  • Click in a Paragraph block.
  • Select all the blocks by pressing Cmd/Ctrl + A twice.
  • The block toolbar appears.
  • Hover the Block switcher button in the toolbar (the first button).
  • Observe the tooltip text is the title of the first block.
  • Unselect the blocks.
  • Change order of the blocks so that the first one is of a different type.
  • Select all again.
  • Hover the Block switcher button in the toolbar.
  • Observe the tooltip text is changed because it's the title of the new first block.
  • Inspect the source or use a screen reader to check the visually hidden description associated with the Block switcher button.
  • Observe the description text is Change type of %d blocks.

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). [Type] Regression Related to a regression in the latest release [Package] Block editor /packages/block-editor [a11y] Labelling labels Jun 26, 2023
@Mamaduka
Copy link
Member

PR #54692.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Sep 21, 2023
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] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants