[wp-trac] [WordPress Trac] #42055: Customize Themes: improve the Theme details modal accessibility

[WordPress Trac]

#42055: Customize Themes: improve the Theme details modal accessibility
---------------------------+-------------------------
 Reporter:  afercia        |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  4.9
Component:  Customize      |    Version:  4.8
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:  accessibility  |
---------------------------+-------------------------
 When using `role="dialog"` on a "modal", Windows screen readers switch to
 "forms mode", that is arrow keys navigation doesn't work and only the Tab
 key works.

 This is because a "dialog" is expected to contain mostly interactive
 content, such as form inputs, buttons, etc., with a specific task users
 have to accomplish. If a dialog contains also text, it should be
 associated with a form element using aria-describedby otherwise the screen
 reader will just ignore it.

 However, modal dialog are often used for "mixed" content (interactive
 elements and blocks of text) or also for just text. In this case, the
 Theme detail modal contains both interactive elements and lots of tet with
 information about the theme.

 A common technique in these cases is to keep the benefits of the dialog
 role but also switch the modal content back to `role="document"`.
 Basically, when using `role="dialog"` there's always the need to evaluate
 the nature of the dialog content.
 - exclusively or mostly interactive content: keep just the dialog role an
 associate any text with aria-describedby to the proper form controls
 - mixed content: switch back to document role or re-evaluate if the dialog
 role is appropriate to begin with

 References:
 https://www.w3.org/TR/wai-aria-practices/#dialog_modal
 See the note "When a dialog opens, focus placement depends on the nature
 and size of the content."

 See also:
 https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-
 dialogs/

 Id also propose to standardize this behavior between the Theme details
 modal in the Customizer and the one in the Themes screen.

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