Opened 7 weeks ago
Last modified 7 weeks ago
#63984 accepted enhancement
Assess if the tabpanels in the media modals should receive focus
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Media | Keywords: | |
| Focuses: | accessibility | Cc: |
Description
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.
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.
Change History (2)
Note: See
TracTickets for help on using
tickets.
Added in [46363] to fix #47149.