[wp-trac] [WordPress Trac] #33031: Fix accessibility for the Keyboard Shortcuts help dialog

[WordPress Trac]

#33031: Fix accessibility for the Keyboard Shortcuts help dialog
--------------------------+------------------------------
 Reporter:  azaozz        |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  TinyMCE       |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  accessibility
--------------------------+------------------------------

Comment (by afercia):

 Tested the patch with Firefox+NVDA and it works nicely. Now when using a
 screen reader, it is possible to use arrows or other screen readers
 keystrokes to read the modal dialog content.

 There are some more issues though, most notably the initial focus given to
 the Close button at the bottom of the modal dialog. Since it's the only
 element TinyMCE gives focus to, users can't use Tab to move focus to other
 elements. Also, users won't have a clue that the actual content is
 "before" the initial focused element so it would be very difficult for
 them to understand they actually have to navigate backwards to read the
 content.

 To my understanding this would be a bit tricky to solve if we still want
 to use native TinyMCE modal dialogs. Wondering if there's an easy way to
 set initial focus '''before''' the content.

 Other improvements would be:
 - the "titles" before each table should be `h2` this would allow users to
 "jump" through content blocks
 - for the same reason, consider to add a "title" (h2) to the editor
 patterns shortcuts too ("Magic patterns"?)
 - wondering if we should really use tables, they're a bit confusing when
 read out by screen readers, especially the rows with 4 columns because in
 a single row there are 2 row headers `th`. Anyways, they need a
 `scope="row"` attribute, otherwise the default is `scope="col"`
 - Chrome needs a `tabindex="0"` on the div with `overflow: auto` otherwise
 the dive can't receive focus and users won't be able to scroll the content

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