Make WordPress Core

Opened 8 years ago

Closed 7 years ago

#28823 closed defect (bug) (fixed)

Plugin details screen is not given focus

Reported by: 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 7 years ago.
28823.2.diff (1.2 KB) - added by ocean90 7 years ago.

Download all attachments as: .zip

Change History (12)

#1 @joedolson
8 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
8 years ago

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

#3 @lancewillett
8 years ago

Sharing feedback sent in by a screen reader user and a11y consultant Jose María Ortiz (https://twitter.com/jmortizsilva). 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: http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-2/.

Could also relate to #27705.

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

7 years ago

7 years ago

#5 @jwenerd
7 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
7 years ago

  • Keywords has-patch added; needs-patch removed

#7 @DrewAPicture
7 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.

7 years ago

7 years ago

#9 @rianrietveld
7 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 http://www.w3.org/TR/WCAG20-TECHS/H64.html

#10 @ocean90
7 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.