[wp-trac] [WordPress Trac] #31634: Minor UI improvements to bulk editing

[WordPress Trac]

#31634: Minor UI improvements to bulk editing
--------------------------------------+--------------------------------
 Reporter:  siobhan                   |       Owner:  afercia
     Type:  enhancement               |      Status:  assigned
 Priority:  normal                    |   Milestone:  4.4
Component:  Quick/Bulk Edit           |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  good-first-bug has-patch  |     Focuses:  ui, accessibility
--------------------------------------+--------------------------------

Comment (by rianrietveld):

 Hi all, the accessibility test team looked at this and here are there
 results (summary at the bottom):

 Tested on: WordPress 4.4-alpha-35151

 '''Geof Collis with IE 11, latest Firefox JAWS 14.5:'''
 Bulk edit move to trash is easiest enough to do, but what I'd like is the
 focus to be taken to the message that it was completed. After I clicked
 apply I'm not sure what happened, I was taken to the top of the page and
 had to heading down to find the text that they had been moved.

 '''Shaun Everiss with NVDA FireFox:'''
 Looks ok no issue

 '''Gabriela Nino with VoiceOver + Safari'''

 When only one post is selected the button become clickable. I think it
 should be clickable when at least two posts are selected, since doing a
 bulk action for only one post does not make sense.

 I found the bulk editing feature more clear this way. I agree it should be
 disabled if no more than two posts are selected. But the feature is
 lacking two important things:

 1: An easier way to navigate from the posts to the actions
 It takes time to review the list of posts, the user needs to pass over
 each line of the table to listen to the post title and proceed to select
 it. It would be nice to have a shortcut for the Bulk actions for example
 on the post menu (edit - Quick edit – Trash - View – Bulk editing) so the
 user does not require to move back until the she finds the Bulk button.
 With VoiceOver, I'm able to navigate using the rotor, but first I have to
 select “Form controls” menu and then listen to the options to find the
 button “Bulk editing”

 2: Give feedback to the user when edit or move to trash action is applied
 After clicking on the “Apply” button there is none feedback for the user.
 “Edit” open a "Bulk edit" section, but the user is not informed. The “Move
 to trash” action shows an information message at the top of the page, the
 user is not aware of it (I agree with Geof).

 '''Michelle DeYoung with Firefox and NVDA'''
 These are my suggestions for hopefully making it more understandable to
 screen reader users.
 I think this case can benefit from having more instruction voiced to the
 user rather than less.
 The idea is to programmatically toggle the label that is voiced by screen
 readers when the item is available or disabled.

 When Bulk Action is disabled:

 {{{
 <div class="alignleft actions bulkactions">
 <label class="screen-reader-text" for="bulk-action-selector-top"
 style="display:none;">Select bulk action</label>
 <label class="screen-reader-text" for="bulk-action-selector-top">Select
 bulk action will be available when selections are made from the table
 below.</label>
 <select id="bulk-action-selector-top" name="action" disabled="">
 <option value="-1">Bulk Actions</option>
 <option class="hide-if-no-js" value="edit">Edit</option>
 <option value="trash">Move to Trash</option>
 </select>
 <input id="doaction" class="button action" type="submit" value="Apply"
 disabled="">
 </div>
 }}}


 When Bulk Action is available:

 {{{
 <div class="alignleft actions bulkactions">
 <label class="screen-reader-text" for="bulk-action-selector-top">Select
 bulk action</label>
 <label class="screen-reader-text" for="bulk-action-selector-top"
 style="display:none;">Select bulk action will be available when selections
 are made from the table below.</label>
 <select id="bulk-action-selector-top" name="action">
 <option value="-1">Bulk Actions</option>
 <option class="hide-if-no-js" value="edit">Edit</option>
 <option value="trash">Move to Trash</option>
 </select>
 <input id="doaction" class="button action" type="submit" value="Apply"
 disabled="">
 </div>
 }}}


 For the table selections:
 For the checkboxes in the table, I also think a bit more information on
 the "Select All" label could help.

 {{{
 <table class="wp-list-table widefat fixed striped posts">
 <thead>
 <tr>
 <td id="cb" class="manage-column column-cb check-column">
 <label class="screen-reader-text" for="cb-select-all-1">"Select All" to
 perform a bulk action on all items or select individual items below to
 perform a bulk action on.</label>
 <input id="cb-select-all-1" type="checkbox">
 </td>
 }}}

 '''Ruth Nisenbaum'''
 Keyboard only on Firefox

 It looks clear to me.
 I have a usability keyboard problem, when I want to move through the
 different posts, to go to the next post, I have to click 8 times the tab
 button.
 Would it be possible to have a skiplink from post to post that would
 enable me to jump to the next post instead of clicking 8 times?

 Summary
 1. Better feedback for screen reader users about what to expect and what
 happens (see also code examples Michelle)
 2. The button should become clickable when at least two posts are
 selected, since doing a bulk action for only one post does not make sense.
 3. If possible a more usable tab order to select posts

 So: no show stoppers, but more feedback and usability would be welcome.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31634#comment:21>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform