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

Block Bindings: UI components that show connected values should be readonly and not disabled #58673

Closed
afercia opened this issue Feb 5, 2024 · 0 comments · Fixed by #59059
Closed
Labels
[Feature] Block bindings [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Feb 5, 2024

Description

I followed instructions from WordPress/wordpress-develop#5888 to test the connected blocks in the editor UI. I see that, so far, components in the editor UI that show the connected values are disabled by the means of a disabled HTML attribute.

For example, when an image alt attribute is connected to a post meta source, the alternative text textarea in the Settings panel is disabled:

disabled

There's a few problem with this:

  • The whole concept of connected attributes is that their content comes from another source. As such, they cannot be edited. Semantically, they are read-only attributes and the UI should communicate that.
  • Disabled controls cannot be focused. As such, their value can't be selected and copied.
  • Since disabled controls aren't required to have a sufficient color contrawt ration, they're styled in a way that their content is eay less readable. However, users may still want to read their value.
  • Screen readers may ignore the associated descriptive text Connected to a custom field as it doesn't make sense to provide a description for a control that is disabled in the first place. In my testing, Safari + VoiceOver don't make the description available to users.

Rather, the control should be readonly.

  • The readonly attribute better communicates the attribute cannot be edited but it's still functional.
  • The value can be selected and copied.
  • The applied styling makes the value way more readable (see screenshot below).
  • Screen readers do provide the associated description of readonly controls.

Screenshot with readonly instead of disabled:

readonly

In my testing I've gone only through the image alt attribute so far but this applies to any other control of the editor that shows connected values.

Step-by-step reproduction instructions

  • Follow instructions from Add the Block Bindings API wordpress-develop#5888 to make an image block alt text connected to a post meta.
  • Select the Image block.
  • Observe the Alternative Text control (a textarea element) in the Settings sidebar is disabled.

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 [Feature] Block API API that allows to express the block paradigm. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Feb 5, 2024
@gziolo gziolo added [Feature] Block bindings and removed [Feature] Block API API that allows to express the block paradigm. labels Feb 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block bindings [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants