Add the names of Widgets to the Add and Edit buttons on the Accessible Widget Management Screen

[cannona]

When a screen reader user has accessibility mode turned on on the widget management screen, the add and edit buttons are ambiguous. The problem is that it is not obvious what widget each button is associated with.

For example, on my Widgets page, I hear:

Add

Heading Level 4 Custom Menu
Use this widget to add one of your custom menus as a widget. 
Add

Heading Level 4 Google Analytics Stats
Displays Stat Info From Google Analytics 
Add

Heading Level 4 Links
Your blogroll 
Add

Heading Level 4 Meta
Log in/out, admin, feed and WordPress links

Note that the line-breaks weren't inserted by me. My screen reader inserts them when it detects a division of some sort, usually the start of a new paragraph, or similar.

The ideal solution would be to change the add and edit links to have the name of the effected widget appended to them. So, instead of just "Add" it might read "Add Links".

If it was undesirable to do this for visual design reasons, the appended text could be shown to screen reader users only, using the existing CSS classes for this purpose. However, including such clarifying text could only improve usability for everyone (IMHO).

[cannona]

Patch.

[cannona]

This patch does not hide the text for non-screen reader users.

[SergeyBiryukov]

21338-1.patch​ creates a string overlapping (21338-1.png​), which is especially noticeable with longer translated strings.

21338.2.patch​ is an attempt to add a .screen-reader-text clarification.

[cannona]

This patch doesn't quite work for screen reader users. Screan readers now read this as "AddAdd Widget Name". Furthermore, I believe that this is an improper use of the legend tag.

However, thanks for letting me know about the issues with the styling. I am blind, so I don't have a way of determining things like that myself. I'll try to submit a corrected patch this evening.

Thanks.

Aaron

[cannona]

Patch 3

[cannona]

The third patch seems to work well with my screen reader. Hopefully it won't cause problems visually.

The only drawback to the way I did it is that it may not internationalize perfectly in all languages. Basically, while in English, prepending add or edit to the title of the widget works well and is grammatically correct, it may not be so in other languages. However, I suspect the meaning should be obvious regardless, but I'm open to other ideas on how to handle this.

Aaron

[SergeyBiryukov]

21338-3.patch​ seems good to me.

[azaozz]

In [21355]:

Widgets: Add the name of the widget to the Add and Edit buttons on the Accessible Widget Management Screen, props cannona, fixes #21338

[nacin]

In [21355], we need to add context to the 'Edit' and 'Add' strings. This will ensure that it localizes well.

So, _ex( 'Edit', 'widget' ) and _ex( 'Add', 'widget' ).

[azaozz]

In [21356]:

Widgets: add localization context for 'Add' and 'Edit', props nacin, fixes #21338