[wp-trac] [WordPress Trac] #63984: Assess if the tabpanels in the media modals should receive focus

[WordPress Trac]

#63984: Assess if the tabpanels in the media modals should receive focus
---------------------------+-----------------------------
 Reporter:  alh0319        |      Owner:  (none)
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Media          |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 The media modal has tabpanels that include a tabindex so they are the next
 tab stop after the tab buttons. Here's an example of the code for one of
 the panels:


 {{{
 <div class="media-frame-tab-panel" role="tabpanel" aria-labelledby="menu-
 item-insert" tabindex="0">
                         <div class="media-frame-router"><div
 role="tablist" aria-orientation="horizontal" class="media-router"><button
 type="button" role="tab" class="media-menu-item active" id="menu-item-
 upload" aria-selected="true">Upload files</button><button type="button"
 role="tab" class="media-menu-item" id="menu-item-browse" aria-
 selected="false" tabindex="-1">Media Library</button></div></div>
                         <div class="media-frame-content" role="tabpanel"
 aria-labelledby="menu-item-upload" tabindex="0"><div class="uploader-
 inline">


                 <div class="uploader-inline-content no-upload-message">

                                         <div class="upload-ui">
                                 <h2 class="upload-instructions drop-
 instructions">Drop files to upload</h2>
                                 <p class="upload-instructions drop-
 instructions">or</p>
                                 <button type="button" class="browser
 button button-hero" style="position: relative; z-index: 1;" id="__wp-
 uploader-id-1" aria-labelledby="__wp-uploader-id-1 post-upload-
 info">Select Files</button>
                         </div>

                         <div class="upload-inline-status"><div class
 ="media-uploader-status" style="display: none;">
                 <h2>Uploading</h2>

                 <div class="media-progress-bar"><div></div></div>
                 <div class="upload-details">
                         <span class="upload-count">
                                 <span class="upload-index"></span> / <span
 class="upload-total"></span>
                         </span>
                         <span class="upload-detail-separator">–</span>
                         <span class="upload-filename"></span>
                 </div>
                 <div class="upload-errors"></div>
                 <button type="button" class="button upload-dismiss-
 errors">Dismiss errors</button>
         </div></div>

                         <div class="post-upload-ui" id="post-upload-info">

                                 <p class="max-upload-size">
                                 Maximum upload file size: 256 MB.
 </p>



                                                         </div>
                                 </div>
         </div></div>
                 </div>
 }}}

 When hitting the Tab key after selecting a tab in the modal, the focus
 goes to the panel itself instead of the first interactive element in the
 panel. In VoiceOver, the panel's name is read out concisely as set by the
 `aria-labelledby` attribute. However in NVDA, this results in the entire
 tabpanel contents being read out which is quite verbose.

 [https://drive.google.com/file/d/1DhVtUKUAgddCkfvMSRgq6umYQCon_zQ9/view?usp=drivesdk
 Image showing NVDA reading all content of the Add Media Panel]

 We should assess whether the tab panel receiving focus is desired and
 consistent with how other tabs are coded throughout the admin.

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