[wp-trac] [WordPress Trac] #41417: Error when opening up Thickbox lightbox on plugins page

[WordPress Trac]

#41417: Error when opening up Thickbox lightbox on plugins page
-----------------------------------------+-----------------------------
 Reporter:  moeloubani1                  |       Owner:  afercia
     Type:  defect (bug)                 |      Status:  assigned
 Priority:  normal                       |   Milestone:  4.9
Component:  Administration               |     Version:  4.5
 Severity:  normal                       |  Resolution:
 Keywords:  has-screenshots needs-patch  |     Focuses:  ui, javascript
-----------------------------------------+-----------------------------

Comment (by afercia):

 Thickbox has been modified over time to suit core needs, and it's not
 guaranteed for usage outside core. However, WordPress should do its best
 to not create conflicts with the native Thickbox styles and
 functionalities.

 WordPress uses a custom style for the Thickbox plugin details modal, and
 it does that using CSS selectors based on some admin pages. This way, when
 trying to use the native Thickbox in these pages, the WP custom style
 conflicts with the native Thickbox style.

 The Thickbox plugin details modal was restyled in [27559], in a first
 moment just for the plugin-install and the dashboard pages. Then also for
 the plugins and update pages in [27932], and for the import page in
 [28080]. It was then added to the about page for 4.4 in [35763] and
 removed in [37175]. It was removed also from the dashboard with the
 introduction of the Nearby events widget in [40607].

 However, some no more used CSS selectors are still there in `common.css`,
 for example:


 {{{
 body.about-php #TB_window,
 body.plugin-install-php #TB_window,
 body.import-php #TB_window,
 body.plugins-php #TB_window,
 body.update-core-php #TB_window,
 body.index-php #TB_window ...
 }}}

 These selectors are used multiple times. I'd propose to simplify: add a
 CSS class to the plugin details modal and target that class. This way, it
 won't conflict any longer with the native Thickbox style.

 To solve the JS issue, `$focusedBefore` in `plugin-install.js` needs to be
 initialized as a jQuery object.

 Worth noting Thickbox doesn't handle natively all the accessibility
 features a modal dialog needs. For example, when closing the modal, focus
 should be moved back to the element that opened the modal. This, and other
 features, should be added during implementation as `plugin-install.js`
 does.

 Lastly, the native `TB_load` loading animated GIF doesn't work well since
 [27532] because its `z-index` value wasn't updated together with the
 overlay and modal ones. Also, when Thickbox loads an iframe, it doesn't
 work at all because of [23518] that applied to all browsers what was an
 exception meant to be used just for Safari.

 This is how `TB_load` used to look like in WordPress 2.7:

 [[Image(https://cldup.com/ooA4TKbO90.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41417#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform