WordPress.org

Make WordPress Core

Changeset 37230


Ignore:
Timestamp:
04/17/2016 03:40:50 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Customizer, improve UI controls in customize.php

  • makes the mobile preview/customize toggle a button
  • changes the "Close" link hidden text from 'Cancel' to 'Close the Customizer and go back to the previous page'
  • adds a missing type="button" attribute
  • removes unnecessary keydown events and preventDefault(): buttons don't need a keydown event and when they have a type="button" attribute there's no default action to prevent

Props Cheffheid, afercia.

Fixes #31487.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r37060 r37230  
    15511551        line-height: 45px;
    15521552        font-size: 14px;
    1553         padding: 0 12px 0 12px;
     1553        padding: 0 12px;
    15541554        margin: 0;
    15551555        height: 45px;
    15561556        background: #eee;
     1557        border: 0;
    15571558        border-right: 1px solid #ddd;
    15581559        color: #444;
  • trunk/src/wp-admin/customize.php

    r37197 r37230  
    119119            ?>
    120120            <span class="spinner"></span>
    121             <a class="customize-controls-preview-toggle" href="#">
     121            <button type="button" class="customize-controls-preview-toggle">
    122122                <span class="controls"><?php _e( 'Customize' ); ?></span>
    123123                <span class="preview"><?php _e( 'Preview' ); ?></span>
    124             </a>
     124            </button>
    125125            <a class="customize-controls-close" href="<?php echo esc_url( $wp_customize->get_return_url() ); ?>">
    126                 <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
     126                <span class="screen-reader-text"><?php _e( 'Close the Customizer and go back to the previous page' ); ?></span>
    127127            </a>
    128128        </div>
     
    135135                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    136136                    ?></span>
    137                     <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     137                    <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    138138                </div>
    139139                <div class="customize-panel-description"><?php
  • trunk/src/wp-admin/js/customize-controls.js

    r37167 r37230  
    32733273
    32743274        // Expand/Collapse the main customizer customize info.
    3275         $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    3276             if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    3277                 return;
    3278             }
    3279             event.preventDefault(); // Keep this AFTER the key filter above
    3280 
     3275        $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
    32813276            var section = $( this ).closest( '.accordion-section' ),
    32823277                content = section.find( '.customize-panel-description:first' );
     
    36343629        });
    36353630
    3636         $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {
    3637             if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    3638                 return;
    3639             }
    3640 
     3631        $( '.customize-controls-preview-toggle' ).on( 'click', function() {
    36413632            overlay.toggleClass( 'preview-only' );
    3642             event.preventDefault();
    36433633        });
    36443634
Note: See TracChangeset for help on using the changeset viewer.