WordPress.org

Make WordPress Core

Changeset 43020


Ignore:
Timestamp:
04/29/2018 05:03:56 PM (16 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/theme.js

    r42632 r43020  
    574574    setNavButtonsState: function() {
    575575        var $themeInstaller = $( '.theme-install-overlay' ),
    576             current = _.isUndefined( this.current ) ? this.model : this.current;
     576            current = _.isUndefined( this.current ) ? this.model : this.current,
     577            previousThemeButton = $themeInstaller.find( '.previous-theme' ),
     578            nextThemeButton = $themeInstaller.find( '.next-theme' );
    577579
    578580        // Disable previous at the zero position
    579581        if ( 0 === this.model.collection.indexOf( current ) ) {
    580             $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
     582            previousThemeButton
     583                .addClass( 'disabled' )
     584                .prop( 'disabled', true );
     585
     586            nextThemeButton.focus();
    581587        }
    582588
    583589        // Disable next if the next model is undefined
    584590        if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
    585             $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
     591            nextThemeButton
     592                .addClass( 'disabled' )
     593                .prop( 'disabled', true );
     594
     595            previousThemeButton.focus();
    586596        }
    587597    },
  • trunk/src/wp-admin/theme-install.php

    r42875 r43020  
    310310        <div class="wp-full-overlay-header">
    311311            <button class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    312             <button class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></button>
    313             <button class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></button>
     312            <button class="previous-theme"><span class="screen-reader-text"><?php _e( 'Previous theme' ); ?></span></button>
     313            <button class="next-theme"><span class="screen-reader-text"><?php _e( 'Next theme' ); ?></span></button>
    314314            <# if ( data.installed ) { #>
    315315                <a class="button button-primary activate" href="{{ data.activate_url }}"><?php _e( 'Activate' ); ?></a>
Note: See TracChangeset for help on using the changeset viewer.