Changeset 40646 for trunk/src/wp-admin/includes/class-bulk-upgrader-skin.php

Timestamp:

05/11/2017 11:50:01 PM (8 years ago)

Author:

afercia

Message:

Accessibility: Change the "Show details" links in the update core screen to buttons.

These controls toggle the visibility of the update progress: they perform an action
therefore they should be buttons. Also:

• uses aria-expanded to communicate the toggle button state
• removes some inline JavaScript
• when clicking the toggle buttons, the progress details get moved with JavaScript after the button: this helps users of assistive technologies in finding them and makes the UI a bit more intuitive

Props Cheffheid, afercia.
See #26504.
Fixes #40453.

File:

• trunk/src/wp-admin/includes/class-bulk-upgrader-skin.php (modified) (3 diffs)

trunk/src/wp-admin/includes/class-bulk-upgrader-skin.php

@@ -44 +44 @@
         $this->upgrader->strings['skin_update_failed'] = __('The update of %1$s failed.');
         /* translators: 1: Title of an update */
-        $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' ) . ' <a onclick="%2$s" href="#" class="hide-if-no-js"><span>' . __( 'Show Details' ) . '</span><span class="hidden">' . __( 'Hide Details' ) . '</span></a>';
+        $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' );
         $this->upgrader->strings['skin_upgrade_end'] = __('All updates have been completed.');
     }
@@ -129 +129 @@
         printf( '<h2>' . $this->upgrader->strings['skin_before_update_header'] . ' <span class="spinner waiting-' . $this->upgrader->update_current . '"></span></h2>', $title, $this->upgrader->update_current, $this->upgrader->update_count );
         echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').css("display", "inline-block");</script>';
+        // This progress messages div gets moved via JavaScript when clicking on "Show details.".
         echo '<div class="update-messages hide-if-js" id="progress-' . esc_attr($this->upgrader->update_current) . '"><p>';
         $this->flush_output();
@@ -149 +150 @@
         }
         if ( $this->result && ! is_wp_error( $this->result ) ) {
-            if ( ! $this->error )
-                echo '<div class="updated"><p>' . sprintf($this->upgrader->strings['skin_update_successful'], $title, 'jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').toggle();jQuery(\'span\', this).toggle(); return false;') . '</p></div>';
+            if ( ! $this->error ) {
+                echo '<div class="updated js-update-details" data-update-details="progress-' . esc_attr( $this->upgrader->update_current ) . '">' .
+                    '<p>' . sprintf( $this->upgrader->strings['skin_update_successful'], $title ) .
+                    ' <button type="button" class="hide-if-no-js button-link js-update-details-toggle" aria-expanded="false">' . __( 'Show details.' ) . '</button>' .
+                    '</p></div>';
+            }
+
             echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').hide();</script>';
         }