[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:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  major        |   Keywords:  needs-patch has-screenshots
  Focuses:  ui,          |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see
 https://github.com/WordPress/gutenberg/issues/15295

 * **Severity**:
  * High
 * **Platform(s)**:
  * Windows - Screen Reader
  * Windows - ZoomText
  * Mac - VoiceOver
  * Android - TalkBack
  * iOS - VoiceOver
 * **Components affected**:
  * Media Dialog

 **Issue description**
 Users opening the "Feature Image" dialog are not told they are
 entering a dialog. Keyboard focus is trapped, however screen reader
 users are able to go beyond the last items of the dialog without
 realising they have left it.

 Keyboard users who find their focus cycling around the dialog get a Tab
 stop with no visible focus. This is the dialog itself, which can receive
 keyboard focus while having no visible focus state.

 The triggering "Set Featured Image" button does not express an
 expanded or collapsed state, which would not matter if users could not
 reach the button when the modal was open; however, they can.

 Lack of an explicit role for modal dialogs may be confusing for
 assistive technology users, since they may not realise they're inside a
 dialog, and that consequently the keyboard interactions may be different
 from the rest of the page. Lack of an explicit label for dialogs may be
 confusing for assistive technology users, since they won't have an
 immediate sense of what the dialog is for.

 **Issue Code**
 {{{
     <button type="button" class="components-button editor-post-featured-
 image__toggle">Set featured image</button>


     ...


     <div tabindex="0" class="media-modal wp-core-ui">


         <button type="button" class="...">...Close media panel...</button>


         <div class="media-modal-content">


             ...


             <div class="media-frame-title">


                 <h1>Featured Image<span class="dashicons dashicons-arrow-
 down"></span></h1>


             </div>


             ...


         </div>


     </div>
 }}}

 **Remediation Guidance**
 Give the modal a role of dialog and set "aria-modal=true".
 Additionally, set aria-hidden="true" on the element which wraps
 the rest of the page, to prevent older browsers or assistive
 technologies that don't support aria-modal from accessing the rest
 of the page while the modal is open.

 Use aria-labelledby and an id on the modal heading to name the
 modal.

 Change the tabindex to -1 so that it can be focused via
 JavaScript without being in the Tab order. The exception to this advice
 is if having the modal in the Tab order is necessary so that keyboard
 users can scroll content inside it; however in existing cases,
 scrollable areas are separate parts of the modal. But if a container
 must receive focus in order to allow keyboard users to scroll the
 content, then the container must visibly show focus.

 **Recommended Code**
 {{{
     <div id="wpwrap" aria-hidden="true">...</div>





     <div role="dialog" aria-modal="true" aria-labelledby="media-modal-
 title" tabindex="-1" class="media-modal wp-core-ui">


         <button type="button" class="...">...Close media panel...</button>


         <div class="media-modal-content">


             ...


             <div class="media-frame-title">


                 <h1 id="media-modal-title">Featured Image<span
 class="dashicons dashicons-arrow-down"></span></h1>


             </div>


             ...


         </div>


     </div>
 }}}

 **Relevant standards**
 * 1.3.1 Info and Relationships (Level A)
 * 4.1.2 Name, Role, Value (Level A)

 **Note**: This issue may be a duplicate with other existing accessibility-
 related bugs in this project. This issue comes from the Gutenberg
 accessibility audit, performed by Tenon and funded by WP Campus. This
 issue is GUT-42 in Tenon's report

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