Style revisions: Avoid mismatch between visible labeling and accessible name

[afercia]

Description

In the global styles revisions, each revision item shows some visible content e.g. date, time, user avatar and user name. However, the accessible name completely mismatches the visible text.

These items are actionable button elements in a list. Interactive controls need to provide a meaneingful accessible name but it must not completely mismatch the visible text.

WCAG 2.5.3 Label in Name requires the accessible name to contain the text that is presented visually. https://www.w3.org/TR/WCAG22/#label-in-name

Technically, that means the aria-label must at least contain the visible text or a meaningful part of it. However, in practice, that doesn't work with voice control / speech recognition software. Also, sighted screen reader users may be totally confused by the mismatch because they will hear the element being announced in a way that is completelu different from its visual presentation.

In the ecample above, the highlighted item relevant pieces are:

• Visible content: OCT 25, 2024 6:05 PM admin admin. Note: the first admin is because of the alt="admin" on the user profile avatar image.
• Accessible name: aria-label="Changes saved by admin on Oct 25, 2024 6:05 pm"

While I do understand the good intent behind crafting such a label, this isn't the recommended way to use ARIA labels.

To some extent, in limited cases, aria-label can be user to 'expand' the name and provide more context. But, it must not compeltely mismatch the visible text.

It is important to know that, in a way, the de facto state of assistive technology doesn't fully support WCAG 2.5.3 Label in Name. To maximize comaptibility with voice control / speech recognition software, the visible text must match the name.

Step-by-step reproduction instructions

• Go to the Site editor
• Make sure you have some style revisions: make any change to the global styles and save if necessary.
• Go to Styles > Revisions.
• Inspect the source of a revision item in the revisions list.
• Observe the aria-label mismatches the visible text.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [ ] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[up1512001]

@afercia can you please review this PR? 🙇‍♂ https://github.com/WordPress/gutenberg/pull/66534

[afercia]

@up1512001 thanks for your PR. I'd suggest to explore some redesign in order to provide a more meaningful labeling of the revision items. See my comment on the PR https://github.com/WordPress/gutenberg/pull/66534#issuecomment-2443997895 I'd suggest to wait form some more design and accessibility feedback.