Plugin details modal: initial focus and constraining tabbing

[afercia]

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.

[afercia]

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

[mehulkaklotar]

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

[afercia]

:) 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]

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

[afercia]

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]

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

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]

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:

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.):

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

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.

[SergeyBiryukov]

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/.

[afercia]

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 :)

[azaozz]

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

[afercia]

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

[afercia]

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.

[mehulkaklotar]

Any Props? :) @afercia @mikeschroder