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

Improve consistency and accessibility of the Block placeholder variations picker #66062

Open
2 tasks done
afercia opened this issue Oct 11, 2024 · 1 comment · May be fixed by #67083
Open
2 tasks done

Improve consistency and accessibility of the Block placeholder variations picker #66062

afercia opened this issue Oct 11, 2024 · 1 comment · May be fixed by #67083
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Oct 11, 2024

Description

See conversation on #60206 and #60217
Re: the importance of having consistent block placeholders, see also #59275

Blocks that require some initial input / user choice for their initial configuration use a 'placeholder' UI. The design pattern for these placeholders is made of:

  • Icon + title.
  • Description.
  • Interactive controls for the initial configuration / choice.

Also blocks that present a 'variations picker' in the placeholder (e.g. Columns and Query Loop) use this design pattern, except the Group block.
Why?
I'm not sure this inconsistency helps users in any way and I don't see any reason why the Group placeholder should not use the same design pattern of other blocks. Screenshot:

Image

Additionally:
The variations picker for Columns, Query Loop, and Group have some long standing accessibility problems that need to be addressed. Most notably: the visible text mismatches the actual accessible name of the controls.
Labels and descriptions are used incorrectly on these variations pickers, mostly vor visual purposes. For semantics and accessibility, all interactive controls should:

  • Be labeled based on what they do, to communicat ethe control action.
  • Have an optional description to provide additional information, that isn't part of the label but still correctly associated with the control (likely via aria-describedby).

Step-by-step reproduction instructions

  • Add an Image block and observe its initial placeholder.
  • Add a Columns block and observe its initial placeholder.
  • Add a Query Loop block. Click 'Start blank' and observe the blockinitial placeholder.
  • Observe these three block placeholders use a consistent design pattern.
  • Add a Group block.
  • Observe the placeholder with the variations picker uses an inconsistent design pattern.
  • Observe the visible text below the variations isn't part of the variation button.
  • Columns: observe the visible text below each variation mismatches the actual accessible name of the variation button.
  • Group: observe the accessible name of the variation buttons is only exposed via a tooltip.

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 [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block library /packages/block-library [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. labels Oct 11, 2024
@jasmussen
Copy link
Contributor

I left a comment that's relevant to this PR here: #67083 (comment)

@jasmussen jasmussen removed the Needs Design Feedback Needs general design feedback. label Dec 17, 2024
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 [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended
Projects
None yet
2 participants