WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#33305 closed defect (bug) (fixed)

Plugin details modal: initial focus and constraining tabbing

Reported by: afercia Owned by: afercia
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.2
Component: Plugins Keywords: has-patch commit
Focuses: ui, accessibility, javascript Cc:

Description

See related #28823, where the initial focus was fixed but just for the Plugins and Plugins Install screens. There are other places where users can open the Plugin detail modal and initial focus should be handled. For example the "Import" screen and the "Updates" screen (when there are plugin updates).

I'm probably missing some other screens where the Plugin modal can be opened, please comment on the ticket if you find something :)

Additionally, tabbing with the keyboard should be constrained within the modal, which is a bit more complicated then usual since it uses an iframe.

Attachments (6)

33305.diff (604 bytes) - added by mehulkaklotar 4 years ago.
upgrade, import and dashboard popular plugin install popup tab focus fixed
33305.patch (24.0 KB) - added by afercia 4 years ago.
33305.2.patch (25.2 KB) - added by afercia 4 years ago.
33305.3.patch (25.7 KB) - added by afercia 4 years ago.
33305.4.patch (24.0 KB) - added by azaozz 3 years ago.
33305.5.patch (25.5 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (23)

#1 @afercia
4 years ago

Found one more place: Dashboard > WordPress News > Popular Plugin

@mehulkaklotar
4 years ago

upgrade, import and dashboard popular plugin install popup tab focus fixed

#2 @mehulkaklotar
4 years ago

  • Keywords reporter-feedback added

#3 follow-up: @afercia
4 years ago

  • Keywords reporter-feedback removed

:) Thanks @mehulkaklotar that's a good start. Was thinking to implement also some features that are used in (most) of the modal dialogs in the admin, and some general best practices, for example:

  • to avoid that long pile of selectors maybe we could use a specific CSS class on all the links which open the Plugin details dialog (see for example [32645])
  • all those links should also have a data-title attribute to hold the Plugin name, for use by JavaScript in the dialog
  • get and store a reference of the control which opened the dialog
  • set a proper ARIA role and attributes on the modal dialog
  • constrain the navigation with the tab key within the dialog
  • close the modal when pressing Escape or clicking on the overlay
  • the Close button should be... a button
  • when closing the dialog, set focus back to the control that had focus
  • special case: the Network Admin Themes screen, I think we can't do much here other than moving the initial focus on the Close button

@afercia
4 years ago

#4 @afercia
4 years ago

  • Keywords has-patch added

First pass, trying to implement all the points above. Any thoughts more than welcome.

Last edited 4 years ago by afercia (previous) (diff)

#5 @DrewAPicture
4 years ago

  • Owner set to afercia
  • Status changed from new to assigned

#6 in reply to: ↑ 3 ; follow-up: @afercia
4 years ago

Replying to afercia:

  • special case: the Network Admin Themes screen, I think we can't do much here other than moving the initial focus on the Close button

Definitely can't remember what I meant with this :)

@afercia
4 years ago

#7 @afercia
4 years ago

  • Milestone changed from Awaiting Review to 4.5

Refreshed patch. A bit more complicated than I thought. Turns out When the "Install" button is disabled, e.g. the Plugin is already installed:

https://cldup.com/HR2xtOVyf3.png

then we can't predict where the last focusable element is. We need to get it each time the active tab panel changes and re-assign events each time. Everything seems to work properly now, would appreciate some testing :)

@afercia
4 years ago

#8 @afercia
4 years ago

Refreshed patch with some cleaning and (hopefully) some improvements. Removed some JavaScript that seems no more useful, was used to set the color and the text on the old modal "title bar" see screenshot:

https://cldup.com/pIbnUI4nsw.png

The iframe title gets the name from the link data-title attribute but not all the links that open the plugin modal have this attribute, see below (same thing happens in the Import screen, in the Dashboard, etc.):

https://cldup.com/Bb4I_bZCyL.png

Thus, when clicking on a link without the data-title attribute, a string undefined is injected in the HTML:

https://cldup.com/_8vsmMOLHw.png

The refactored JavaScript covers this case now, maybe worth considering to audit all the links that open the plugin modal and add the missing attribute. Should go in a separate ticket though.

Note about IE 8: to properly set focus back when closing the modal, it would need a setTimout() but honestly I'd prefer to don't add it just to support an outdated browser.

This ticket was mentioned in Slack in #core by afercia. View the logs.


3 years ago

#10 in reply to: ↑ 6 ; follow-up: @SergeyBiryukov
3 years ago

Replying to afercia:

special case: the Network Admin Themes screen, I think we can't do much here other than moving the initial focus on the Close button

Definitely can't remember what I meant with this :)

The "View version X details" modal for available updates, perhaps? :) It opens an iframe with the theme page from the directory, e.g. https://wordpress.org/themes/twentysixteen/.

#11 in reply to: ↑ 10 @afercia
3 years ago

Replying to SergeyBiryukov:

The "View version X details" modal for available updates, perhaps? :) It opens an iframe with the theme page from the directory

Probably yes since the iframe content is from another domain and no JS interaction is possible :)

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


3 years ago

@azaozz
3 years ago

#13 @azaozz
3 years ago

  • Keywords commit added

33305.3.patch looks good. Refreshed it a bit in 33305.4.patch, some chunks were rejected for update.php.

@afercia
3 years ago

#14 @afercia
3 years ago

Thanks @azaozz :) Refreshed patch to add the .open-plugin-details-modal CSS class to a couple of links.

#15 @afercia
3 years ago

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

In 36964:

Accessibility: Improve accessibility for the Plugin details modal.

The plugin details modal can be invoked from several screens. There's now a new
.open-plugin-details-modal CSS class to be used in combination with the
.thickbox CSS class that adds everything needed for accessibility.

  • Adds an ARIA role dialog and an aria-label attribute to the modal
  • Adds a title attribute to the iframe inside the modal
  • Constrains tabbing within the modal
  • Restores focus back in a proper place when closing the modal

Also, improves a bit the native Thickbox implementation: it should probably be
replaced with some more modern tool but at least keyboard focus should be moved
inside the modal.

Fixes #33305.

#16 @mehulkaklotar
3 years ago

Any Props? :) @afercia @mikeschroder

This ticket was mentioned in Slack in #core by mehulkaklotar. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.