Block inserter toggle: avoid dynamic label #68536
Labels
[Feature] Inserter
The main way to insert blocks using the + button in the editing interface
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Package] Edit Widgets
/packages/edit-widgets
[Package] Editor
/packages/editor
[Type] Bug
An existing feature does not function as intended
Description
Discovered while working on #68531
When the
Show button text labels
is enabled, the label of the block inserter toggle in the top bar is shortened fromBlock Inserter
toAdd
.However, when opening the block inserter, the label dynamically changes from
Add
toClose
. Screenshots:While I do understand the intent to provide a visual indication, control labels should not be used for mere visual purposes. Their purpose is to unambiguously communicate what a control does or is about and should not change dynamically.
The pressed state of the button is already communicated by a color inversion and an appropriate
aria-pressed
attribute set on the button (although the usage ofaria-pressed
is slightly incorrect in this case). The button also uses anaria-expanded
attribute. Semantically, there's no need to add anything else and the label should not change. I'd argue that also visually the label should not change.Additionally, when
Show button text labels
is disabled, the label of the button isBlock Inserter
which is way too technical for users. Should a good UI communicate obscure technical terminology or rather provide users with a simple, understandable, label? I'd vote for the latter and useAdd
also when the preference is disabled.Note:
in #68531 I'm implementing this 'dynamic' label in the Widgets editor only to not introduce a new inconsistency across the editors. If #68531 gets merged, this issue should be addressed also in the Widgets editor.
Step-by-step reproduction instructions
Block Inserter
.Show button text labels
from the top bar Options > Preferences > Accessibility.Add
.Close
.Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.
The text was updated successfully, but these errors were encountered: