Improve the labeling of EntitiesSavedStates #67473
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #67354
What?
This PR updates the behavior of the EntitiesSavedStates component when used in a modal dialog (role="dialog") to ensure the dialog labeling is appropriate. Specifically:
The aria-labelledby attribute now references only the primary label text (Are you ready to save?).
The additionalPrompt text is moved to the aria-describedby attribute, ensuring it acts as a supplementary description instead of being included in the dialog label.
Why?
When additionalPrompt is passed, it becomes part of the dialog label, which can make the labeling overly long and misleading. For example, in the Theme preview of the Site Editor, the dialog label currently reads:
"Are you ready to save? Saving your changes will change your active theme from Twenty Twenty-Five to Twenty Twenty-Four."
This excessively long label makes it harder for users, especially those using assistive technologies, to quickly understand the purpose of the dialog. By separating the primary label and the additional descriptive text, we enhance usability and accessibility.
How?
Updated Markup for Descriptions:
Testing Instructions
The aria-labelledby attribute references only the primary label.
The aria-describedby attribute includes the additionalPrompt text.
Screenshots or screencast