Make WordPress Core

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: alh0319's profile alh0319 Owned by: joedolson's profile joedolson
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)

#1 @joedolson
7 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted

#2 @joedolson
7 weeks ago

Added in [46363] to fix #47149.

Note: See TracTickets for help on using tickets.