[wp-trac] [WordPress Trac] #28897: TinyMCE wplink modal keyboard navigation

[WordPress Trac]

#28897: TinyMCE wplink modal keyboard navigation
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  TinyMCE            |    Version:  3.9
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Checking all the great stuff done on TinyMCE modals in #26952 and I read
 there's been a lot of work done and tests on the wplink dialog but I've
 noticed something weird. Hope I'm on the right way to help and asking for
 your feedback. Trying to be short:

 - keyboard users can't open/close the search panel
 - keyboard users can't focus the "Cancel" link
 - the search results scrolling div needs tabindex="0" to be focusable in
 all browsers, currently it receives focus via keyboard only when using
 Firefox (you won't notice any visual feedback, there's no styling on
 focus, but it's actually focused) so the user experience is not consistent
 across browsers, see attached test case.

 Please open an "Insert/edit link" modal (Ctrl + k) and navigate through
 all its focusable elements using just your Tab key, you will notice you
 can't focus the "search toggle" (the "Or link to existing content") cause
 it's not focusable at all. Same for the Cancel link: as soon as focus is
 on the "submit" button, when you press Tab again the focus will be moved
 on the "close" X in the top right. Same with reverse keyboard navigation
 (Shift + Tab)

 In the proposed patch:

 - the "search toggle" is now an anchor, can receive focus and can be
 activated via keyboard
 - added tabindex="0" to the search results scrolling div and styling when
 focused
 - moved the "Cancel" link before the submit button to keep it contained in
 the tabbing "cycle" created in wplink.js, this will also match the
 keyboard navigation order with the elements visual order
 - optional :) wondering how many users are aware they can select a search
 results item using the up and down arrow keys, added a message that gets
 displayed when search field and results are focused and tried to match the
 WP styles about messages
 - .query-notice shouldn't have a "pointer" cursor style because it's not a
 clickable element

 About RTL languages, editor-rtl.css needs to be updated, sorry I don't
 know the best way to include that in the patch, -rtl files are missing
 from develop.svn repository. (by the way, how do you usually manage RTL
 files in your patches?)

 Final result in the attached screenshot. Any thoughts are more than
 welcome.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/28897>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform