Media Editor: Undo and Redo icons are not consistent throughout the interface

[afercia]

Moved from the ​WPCampus accessibility report issues on GitHub, see ​https://github.com/WordPress/gutenberg/issues/15310

Undo and Redo icons are not consistent throughout the interface

• Severity: Low
• Affected Populations:
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Edit Media

#### Issue description

On the Edit Media page, there are various icon buttons for performing
actions to the selected media image, along with "Undo" and "Redo"
buttons.

These two buttons use different icons than the "Undo" and "Redo"
buttons in the Editor Top Bar.

Ideally these buttons' icons would be consistent with the ones in the
Editor Top Bar, especially since these icons look like Rotate icons
(causing the actual Rotate buttons to require more complex glyphs to
appear more clearly as Rotate-the-image), while the Editor Top Bar icons
do not look like Rotate buttons.

#### Remediation Guidance

Use the same icons for the "Undo" and "Redo" buttons as are used in
the Editor Top Bar.

#### Relevant standards

• ​3.2.4 Consistent Identification (Level AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by [Tenon](​https://www.tenon.io) and funded by [WP Campus](​https://wpcampus.org/). This issue is GUT-84 in Tenon's report

[afercia]

See also comments and screenshots by @kjellr and @melchoyce on the GitHub issue starting from ​https://github.com/WordPress/gutenberg/issues/15310#issuecomment-488774893

From a technical perspective, this implies introducing SVG icons in core, which uses only Dashicons so far. I guess there's large consensus about consistency.

[afercia]

Comparison of the Gutenberg icons in the Editor Toolbar and the icons in the Media Modal

[antpb]

Hello! This was discussed in the recent Media meeting and we are clear on the issue but need to explore the functionality of these buttons further to understand their purpose. There is some discussion around the purpose of the buttons and wether or not they are the same. If the same, we should provide a more visually consistent button. If not, maybe the difference is justified and we just need to make them more different.

Also worth noting from @mikeschroder ’s initial digging, he found that “aria-label on the Gutenberg buttons are “Undo” and “Redo”
looks like a span with class of “screen-reader-text” of “Undo” and “Redo” in the image editor”

[afercia]

Re: aria-label vs. screen-reader-text

In Gutenberg, the buttons use aria-label also because their tooltips use the text from the aria-label. This allows to expose the buttons accessible name visually, both on hover and on focus.

In the media editor the buttons use screen-reader-text just because of historical reasons. The visually hidden text allows screen reader users to understand what the buttons are about.

However, these media editor buttons don't expose their names visually. This is a problem for sighted users who can only use the keyboard or a technology that mimics the keyboard. For example: speech recognition software (Dragon) users. They need to know what a UI control name is to be able to voice a command like, for example: "Click flip vertically".

Not to mention cognitive impairments or simply different cultural background or non-familiarity with icons. Controls that use only icons are problematic for many users. This issue was discussed at length in the Gutenberg project and still needs to be fully addressed.

Accessible tooltips would help but they still wouldn't solve the issue for speech recognition software users. Worth also reminding that the introduction of tooltips in core was discussed many years ago and there was no consensus.

Gutenberg uses tooltips though, so I guess it's time to start some new conversation to evaluate their introduction in core.

As said, they wouldn't be sufficient anyway: the UI should offer options to reveal the controls name, see this related issue on the Gutenberg GitHub: ​https://github.com/WordPress/gutenberg/issues/10524

[audrasjb]

I don't know how it happened but I have the same icons for undo and redo on my development installation!
See screenshot below: was it patched in another commit?

[afercia]

@desrosj @Joen when you have a chance: is this change related to ​https://github.com/WordPress/dashicons/issues/352 / ​https://github.com/WordPress/dashicons/pull/350 or any other recent change in the dashicons repo?

I couldn't find any mention of changes to the undo / redo icons in the related Trac ticket #41074.

[desrosj]

I believe that I spoke with @joen about this at one point and this was an intentional change.

It looks like this PR is responsible: ​https://github.com/WordPress/dashicons/pull/176.

Let's close this out, and if I am remembering incorrectly, it can be reopened.

[SergeyBiryukov]

If the icons are consistent now, per comment:9, I would consider the ticket fixed, rather than invalid :)

[desrosj]

No opposition here. I only did invalid and removed the milestone because it was actually fixed in 5.2 through #41074. I also toyed with marking as a duplicate of that issue.