image-edit button icon titles

[dj_angola]

It is great that the Image edit buttons have icons, and that there is screen-reader-text, however non-screen-reader users are left to guess the meaning of the icons.

I propose to add the same screen reader text to the buttons' title attribute

<button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button" title="<?php esc_html_e( 'Flip horizontally' ); ?>">

[dj_angola]

patch

[afercia]

Discussed during today's accessibility meeting on Slack. Moving to Future Release as something that should be addressed for all the controls that use only icon in the admin. However, rather than re-introducing title attributes that serve a little purpose, a better solution would be using visible text below the icons. Worth also mentioning the new WCAG 2.1 will require the target size to be at least 44 by 22 pixels, with a few exceptions. See ​https://www.w3.org/TR/WCAG21/#target-size

[afercia]

Update: the target size requirement has been moved to level AAA in the Candidate Recommendation of WCAG 2.1. Some background here: ​http://www.incobs.de/articles/items/target-size-fate.html

[afercia]

Screenshot for reference: it's about these buttons in the Image editor:

Needs design feedback for either visible labels underneath the buttons or... tooltips!

[karmatosed]

Just making sure this has feedback keywords over needing a design as that seems right suggestion.

[afercia]

Related: #47116.

[nrqsnchz]

Closing as a duplicate of #47116. Both tickets are about the same topic and there's been more momentum there.