WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#28897 closed defect (bug) (fixed)

TinyMCE wplink modal keyboard navigation

Reported by: afercia Owned by: azaozz
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9
Component: TinyMCE Keywords: has-patch needs-testing
Focuses: ui, accessibility Cc:

Description

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.

Attachments (5)

28897.patch (6.5 KB) - added by afercia 7 years ago.
scrollable-div-and-focus.htm (5.1 KB) - added by afercia 7 years ago.
wplink-focus.png (100.6 KB) - added by afercia 7 years ago.
28897.2.patch (7.7 KB) - added by afercia 7 years ago.
28897.3.patch (7.7 KB) - added by afercia 7 years ago.
better cross-browser styling

Download all attachments as: .zip

Change History (11)

@afercia
7 years ago

@afercia
7 years ago

#1 @afercia
7 years ago

  • Keywords has-patch needs-testing added

#2 @afercia
7 years ago

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
7 years ago

@afercia
7 years ago

better cross-browser styling

#3 @afercia
7 years ago

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?

#4 @azaozz
7 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 29321:

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

#5 @azaozz
7 years ago

  • Milestone changed from Awaiting Review to 4.0

#6 @azaozz
7 years ago

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.

Note: See TracTickets for help on using tickets.