[wp-trac] [WordPress Trac] #21334: Accessibility of Quick Edit panel in Posts/Pages/etc

[WordPress Trac]

#21334: Accessibility of Quick Edit panel in Posts/Pages/etc
-----------------------------------+--------------------
 Reporter:  grahamarmfield         |       Owner:
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  3.6
Component:  Accessibility          |     Version:  3.4.1
 Severity:  normal                 |  Resolution:
 Keywords:  2nd-opinion has-patch  |
-----------------------------------+--------------------

Comment (by adamsilverstein):

 thanks for the response; so tabindex is my friend? searching core i do see
 their use, but will probably avoid them if i can get the tab order correct
 without them.

 i like your idea about adding/removing a class to turn on the quicklinks,
 i may give that a try, i have an idea about how this could work, but i'm
 concerned it will not work for touch screen devices like an ipad since the
 cell would never become active;

 if you are able to download my patch and test it, i believe it does
 exactly what you suggest - adding show quicklinks and hide quicklinks -
 [http://core.trac.wordpress.org/attachment/ticket/21334/21334-2.diff
 21334-2.diff]. it still has some tabbing issues in firefox i need to
 address.



 Replying to [comment:13 grahamarmfield]:
 > Replying to [comment:12 adamsilverstein]:
 > > Replying to [comment:11 azaozz]:
 > > > Tabindex is "evil" :)
 > > >
 > > > It breaks the natural flow of tabbing affecting negatively all
 users, and behaves differently in different browsers when added to
 elements that can be shown/hidden or are moved in the DOM.
 > > >
 > > > A better way to fix this may be to make the table cell (or row?)
 "focusable" and show these links on focus. This should also be tested on
 touch devices.
 >
 > In 'normal' use I agree that tabindex is evil. However there are two
 values of tabindex that are actually useful - especially in answer to how
 you can give focus to something that isn't a link or a button.
 >
 > * tabindex="0" - this includes the item in the tab order for the page,
 but using the context of the order that it appears in the HTML. Focus can
 be given to the item in javascript too.
 > * tabindex="-1" - Focus can be given to an item using javascript only.
 It does not appear in the natural tab order within a page.
 >
 > These values are supported in enough modern browsers to make them safely
 usable.
 >
 > So, you could try giving the table cells or rows tabindex values of 0.
 You would certainly be able to tab to the table cell/row then. Whether the
 table cell or row maintains meaningful focus whilst you tab around the
 quick links inside is another matter. I'm thinking of how you may keep the
 quick links panel open whilst a user interacts with with the various links
 and input fields. I've not tested this.
 >
 > Another approach might be to use your javascript to add an extra class
 to the table cell or row when the post/page title receives focus. This
 could trigger the opening of the quick links panel. Then, whenever any of
 the links or elements within the quick links panel receive focus the class
 is pushed up through all ancestors to the tabel cell in order to keep open
 the quick links panel until the user tabs to a different post/page.
 >
 > This all sounds much more complicated than providing a link just after
 the post/page title that says 'Open Quicklinks'. Clicking this will open
 quicklinks for that title and it will change the link to now say 'Close
 quicklinks'. The quicklinks panel will stay open until the user
 specifically closes it by clicking on that link. That way a screen reader
 user will onlu get all the extra items if they want them, and speech
 recognition users will be catered for too.
 >
 > Screenshots attached.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21334#comment:14>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software