TinyMCE wplink modal keyboard navigation

[afercia]

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.

[afercia]

Updated patch attached.

• The "X" Close should be announced to screen reader users.
• Changed the "div" to "button" so it can be focused and activated without using a mouse.

Some background: ​Making elements keyboard focusable and clickable and the related ​demo page

[afercia]

better cross-browser styling

[afercia]

couple of additional ideas:

• the modal title "Insert/edit link" should probably be a heading, not sure if h1 or h2
• provide context for "close" text as proposed in #28976 for media modals

any thoughts more than welcome, accessibility team anyone?

[azaozz]

In 29321:

wpLink: add keyboard navigation, improve accessibility. Props afercia, fixes #28897.

[azaozz]

In 29333:

wpLink:

• Fix adding a link on pressing Enter.
• Don't auto-focus the URL field after selecting a local link.
• Don't auto-focus the URL field when opening on touch devices. Toggle focus/blur on it to close the onscreen keyboard so the modal is positioned properly.

See #28897.