[wp-trac] [WordPress Trac] #47145: Feature Image dialog does not follow the dialog pattern

[WordPress Trac]

#47145: Feature Image dialog does not follow the dialog pattern
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  afercia
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  major                                |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  has-patch                                      |  accessibility
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:  needs-patch has-screenshots wpcampus-report => has-screenshots
     wpcampus-report has-patch
 * owner:  (none) => afercia
 * status:  new => assigned


Comment:

 [attachment:"47145.diff"] is a first pass at implementing the ARIA dialog
 pattern.

 It's important to note the media modal is used in different places in the
 admin and its content displays various "views", not only the one for the
 featured image. The media modal can also be used in the front end by
 themes and plugins authors.

 Within the modal views there's some text content that is not associated to
 form controls. It's just text, often used as explanatory text. Using the
 `role=dialog` makes screen readers switch to "forms mode" and this textual
 content may be completely ignored. For this reason, the patch switches
 back the modal ''content'' to `role=document`, to ensure all content is
 available to assistive technologies.

 The patch also moves the `h1` heading before the menu in the source order.
 As the modal is now an ARIA dialog, the best practice is to have the `h1`
 title be the first piece of content within the dialog.

 To better communicate also visually that the `h1` title is the first
 content in the modal, I'd like to propose to slightly move down the menu
 in the left sidebar. See attached screenshot.

 The patch also makes sure to hide the page content, adding an `aria-
 hidden` attribute to the relevant body children. This part of the code is
 basically ported from
 [https://github.com/WordPress/gutenberg/blob/d318b2f658012e264559d1206acfa7e1d3d3019e/packages/components/src/modal
 /aria-helper.js the modal aria-helper implemented in Gutenberg].

 Todo:
 - try to move this code to `wp.media.view.FocusManager`: it makes sense to
 have DOM related methods separated from the views code and `FocusManager`
 seems the most appropriate place
 - ensure the modal dialog has a default `h1` title: will split this to a
 separate ticket

 Some testing would be nice :)

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