Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#28823 closed defect (bug) (fixed)

Plugin details screen is not given focus

Reported by: philipjohn's profile philipjohn Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Plugins Keywords: has-patch needs-testing
Focuses: accessibility, administration Cc:


Summary: When accessing the new plugin grid with the keyboard and hitting the "More Details" link, the keyboard focus does not switch to the plugin modal.

Steps to reproduce;

  1. Go to the Add New Plugins screen and search for a plugin
  2. Tab to any plugin's "More Details" link and press Enter
  3. The focus returns to the top of the main page (i.e. before the "Skip Content" link) not the newly opened plugin modal

Attachments (2)

28823.diff (962 bytes) - added by jwenerd 10 years ago.
28823.2.diff (1.2 KB) - added by ocean90 10 years ago.

Download all attachments as: .zip

Change History (12)

#1 @joedolson
10 years ago

This seems to be a chronic issue with Thickbox driven modals; is it possible to set focus inside the TB modal from thickbox.js? I couldn't see a way to do it, but my JS chops aren't quite up to that.

#2 @SergeyBiryukov
10 years ago

  • Focuses administration added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.0

#3 @lancewillett
10 years ago

Sharing feedback sent in by a screen reader user and a11y consultant Jose María Ortiz ( He sent to me via email in Spanish, I'm translating here into English as he'd like to contribute his notes.

In two places I’ve seen with the WordPress backend — both when opening the Media Library and when viewing plugin details — there’s an overlay with new content (a type of lightbox) that appears to be on top of everything else. There are times when the screen readers don’t realize that this new content has appeared, and they continue to be access the entire rest of the page. In other words, the page navigation isn’t constrained to just the overlay. Here’s a resource that explains how to create overlays that are compatible with screen readers:

Could also relate to #27705.

This ticket was mentioned in IRC in #wordpress-dev by tellyworth. View the logs.

10 years ago

10 years ago

#5 @jwenerd
10 years ago

This patch applies fixes the issue of keyboard navigation jumping back to the top of the screen. It also gives the iframe a title which should be read by a screen reader.

#6 @jwenerd
10 years ago

  • Keywords has-patch added; needs-patch removed

#7 @DrewAPicture
10 years ago

  • Keywords needs-testing added

Could use a couple of people to test 28823.diff.

This ticket was mentioned in IRC in #wordpress-ui by ocean90. View the logs.

10 years ago

10 years ago

#9 @rianrietveld
10 years ago

Patch 28823.2.diff​ tested in Firefox, Safari, Chrome and IE 11, and with NVDA/FireFox.
It works.
The addition of the title attribute on the iFrame ( form patch 28823.diff ) is also helpful for screen readers. It helps screenreader users identify the purpose of the iframe and it's a recommended WCAG 2 technique

#10 @ocean90
10 years ago

  • Resolution set to fixed
  • Status changed from new to closed

In 29534:

Plugin details: Accessibility improvements

  • Focus the close link to transfer focus into the plugin modal.
  • Set title attribute on iframe for screereaders.

props jwenerd for initial patch and a11y team for testing.
fixes #28823.

Note: See TracTickets for help on using tickets.