Improve the labeling of EntitiesSavedStates when used with modal behavior #67354
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Package] Editor
/packages/editor
[Status] In Progress
Tracking issues with work in progress
[Type] Bug
An existing feature does not function as intended
Description
Discovered while working on #67313 / #67351
When it is used with a modal behavior attached, the EntitiesSavedStates component has a
role=dialog' and it's labelled via an
aria-labelledby` attribute that points to these part:gutenberg/packages/editor/src/components/entities-saved-states/index.js
Lines 163 to 171 in f8140c4
The problem with that, is that when
additionalPrompt
is passed, it makes part of the dialog labeling which:additionalPrompt
text is meant to be more an additional description rather than a label.For example. in the Theme preview in the Site editor the label of the dialog is as follows:
Are you ready to save? Saving your changes will change your active theme from Twenty Twenty-Five to Twenty Twenty-Four."
That's used for the label and it's way too long. The second part should be used for the description and the labeling should only be the first part:
Are you ready to save?
.Step-by-step reproduction instructions
First, apply the changes from #67351 if it's hasn't been merged yet as that PR fixes the labeling of the dialog.
entities-saved-states__panel
.additionalPrompt
is used in the labeling of the element.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: