Make WordPress Core

Ticket #33260: 33260.5.diff

File 33260.5.diff, 4.6 KB (added by afercia, 9 years ago)
  • src/wp-admin/js/customize-widgets.js

     
    16441644                        /**
    16451645                         * Keyboard-accessible reordering
    16461646                         */
    1647                         this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
    1648                                 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    1649                                         return;
    1650                                 }
    1651 
     1647                        this.container.find( '.reorder-toggle' ).on( 'click', function() {
    16521648                                self.toggleReordering( ! self.isReordering );
    16531649                        } );
    16541650                },
     
    16591655                _setupAddition: function() {
    16601656                        var self = this;
    16611657
    1662                         this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
    1663                                 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    1664                                         return;
    1665                                 }
    1666 
     1658                        this.container.find( '.add-new-widget' ).on( 'click', function() {
    16671659                                if ( self.$sectionContent.hasClass( 'reordering' ) ) {
    16681660                                        return;
    16691661                                }
    16701662
    16711663                                if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
     1664                                        $( this ).attr( 'aria-expanded', 'true' );
    16721665                                        api.Widgets.availableWidgetsPanel.open( self );
    16731666                                } else {
     1667                                        $( this ).attr( 'aria-expanded', 'false' );
    16741668                                        api.Widgets.availableWidgetsPanel.close();
    16751669                                }
    16761670                        } );
     
    17241718                 * @todo We should have a reordering state instead and rename this to onChangeReordering
    17251719                 */
    17261720                toggleReordering: function( showOrHide ) {
     1721                        var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
     1722                                reorderBtn = this.container.find( '.reorder-toggle' );
     1723
    17271724                        showOrHide = Boolean( showOrHide );
    17281725
    17291726                        if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
     
    17381735                                        formControl.collapse();
    17391736                                } );
    17401737
    1741                                 this.$sectionContent.find( '.first-widget .move-widget' ).focus();
    1742                                 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
     1738                                addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     1739                                reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
     1740                                wp.a11y.speak( l10n.reorderModeOn );
    17431741                        } else {
    1744                                 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
     1742                                addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
     1743                                reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
     1744                                wp.a11y.speak( l10n.reorderModeOff );
    17451745                        }
    17461746                },
    17471747
  • src/wp-includes/class-wp-customize-control.php

     
    14561456         * @access public
    14571457         */
    14581458        public function render_content() {
     1459                $id = 'reorder-widgets-desc-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
    14591460                ?>
    1460                 <span class="button-secondary add-new-widget" tabindex="0">
     1461                <button type="button" class="button-secondary add-new-widget" aria-label="<?php esc_attr_e( 'Add or remove widgets' ); ?>" aria-expanded="false" aria-controls="available-widgets">
    14611462                        <?php _e( 'Add a Widget' ); ?>
    1462                 </span>
    1463 
    1464                 <span class="reorder-toggle" tabindex="0">
     1463                </button>
     1464                <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
    14651465                        <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
    14661466                        <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
    1467                 </span>
     1467                </button>
     1468                <p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p>
    14681469                <?php
    14691470        }
    14701471
  • src/wp-includes/class-wp-customize-widgets.php

     
    655655                                'error'            => __( 'An error has occurred. Please reload the page and try again.' ),
    656656                                'widgetMovedUp'    => __( 'Widget moved up' ),
    657657                                'widgetMovedDown'  => __( 'Widget moved down' ),
     658                                'reorderModeOn'    => __( 'Reorder mode enabled' ),
     659                                'reorderModeOff'   => __( 'Reorder mode closed' ),
     660                                'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),
     661                                'reorderLabelOff'  => esc_attr__( 'Close reorder mode' ),
    658662                        ),
    659663                        'tpl' => array(
    660664                                'widgetReorderNav' => $widget_reorder_nav_tpl,