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 the labeling of EntitiesSavedStates when used with modal behavior #67354

Open
2 of 6 tasks
afercia opened this issue Nov 27, 2024 · 0 comments · May be fixed by #67473 or #67792
Open
2 of 6 tasks

Improve the labeling of EntitiesSavedStates when used with modal behavior #67354

afercia opened this issue Nov 27, 2024 · 0 comments · May be fixed by #67473 or #67792
Assignees
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

Comments

@afercia
Copy link
Contributor

afercia commented Nov 27, 2024

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:

<div
className="entities-saved-states__text-prompt--header-wrapper"
id={ renderDialog ? dialogLabel : undefined }
>
<strong className="entities-saved-states__text-prompt--header">
{ __( 'Are you ready to save?' ) }
</strong>
{ additionalPrompt }
</div>

The problem with that, is that when additionalPrompt is passed, it makes part of the dialog labeling which:

  • Makes the dialog labeling potentially too long and misleading.
  • The 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?.

Image

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.

  • Go to the WP admin > Appearance > any non-acitve block theme > Live preview.
  • The editor opens to preview the theme.
  • Click the editor canvas to switch to edit mode.
  • Click the button 'Activate {theme name}' at the top right of the screen.
  • Inspect the DOM and select the element with role=dialog and class entities-saved-states__panel.
  • In the dev tools inspector accessibility tab observe that the text passed as additionalPrompt is used in the labeling of the element.

Image

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended labels Nov 27, 2024
@afercia afercia changed the title Improve the labelinf of EntitiesSavedStates when used with modal behavior Improve the labeling of EntitiesSavedStates when used with modal behavior Nov 28, 2024
@dhruvang21 dhruvang21 linked a pull request Dec 2, 2024 that will close this issue
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 2, 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] Editor /packages/editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
1 participant