Changeset 43020

Timestamp:

04/29/2018 05:03:56 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve the Themes Installer navigation buttons accessibility.

• really disables buttons when they look disabled (when navigation is at the first or last theme)
• when navigation is at the first or last theme, moves focus to the other navigation button, to avoid a focus loss
• improves the buttons visually hidden accessibility text

Props walbo, afercia.
Fixes #36627.

Location:

trunk/src/wp-admin

Files:

• js/theme.js (modified) (1 diff)
• theme-install.php (modified) (1 diff)

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

@@ -574 +574 @@
     setNavButtonsState: function() {
         var $themeInstaller = $( '.theme-install-overlay' ),
-            current = _.isUndefined( this.current ) ? this.model : this.current;
+            current = _.isUndefined( this.current ) ? this.model : this.current,
+            previousThemeButton = $themeInstaller.find( '.previous-theme' ),
+            nextThemeButton = $themeInstaller.find( '.next-theme' );
 
         // Disable previous at the zero position
         if ( 0 === this.model.collection.indexOf( current ) ) {
-            $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+            previousThemeButton
+                .addClass( 'disabled' )
+                .prop( 'disabled', true );
+
+            nextThemeButton.focus();
         }
 
         // Disable next if the next model is undefined
         if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
-            $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
+            nextThemeButton
+                .addClass( 'disabled' )
+                .prop( 'disabled', true );
+
+            previousThemeButton.focus();
         }
     },

trunk/src/wp-admin/theme-install.php

@@ -310 +310 @@
         <div class="wp-full-overlay-header">
             <button class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
-            <button class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></button>
-            <button class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></button>
+            <button class="previous-theme"><span class="screen-reader-text"><?php _e( 'Previous theme' ); ?></span></button>
+            <button class="next-theme"><span class="screen-reader-text"><?php _e( 'Next theme' ); ?></span></button>
             <# if ( data.installed ) { #>
                 <a class="button button-primary activate" href="{{ data.activate_url }}"><?php _e( 'Activate' ); ?></a>