Changeset 40646

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.

Location:

trunk/src/wp-admin

Files:

• includes/class-bulk-upgrader-skin.php (modified) (3 diffs)
• js/common.js (modified) (1 diff)

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>';
         }

trunk/src/wp-admin/js/common.js

@@ -979 +979 @@
     // Set initial focus on a specific element.
     $( '.wp-initial-focus' ).focus();
+
+    // Toggle update details on update-core.php.
+    $body.on( 'click', '.js-update-details-toggle', function() {
+        var $updateNotice = $( this ).closest( '.js-update-details' ),
+            $progressDiv = $( '#' + $updateNotice.data( 'update-details' ) );
+
+        /*
+         * When clicking on "Show details" move the progress div below the update
+         * notice. Make sure it gets moved just the first time.
+         */
+        if ( ! $progressDiv.hasClass( 'update-details-moved' ) ) {
+            $progressDiv.insertAfter( $updateNotice ).addClass( 'update-details-moved' );
+        }
+
+        // Toggle the progress div visibility.
+        $progressDiv.toggle();
+        // Toggle the Show Details button expanded state.
+        $( this ).attr( 'aria-expanded', $progressDiv.is( ':visible' ) )
+    })
 });