WordPress.org
Get WordPress

Make WordPress Core

Ticket #40677: 40677.diff

File 40677.diff, 10.7 KB (added by afercia, 8 years ago)

  • src/wp-admin/css/common.css

     
    33593359.control-section.open .accordion-section-title:after,
    33603360#customize-info.open .accordion-section-title:after,
    33613361.nav-menus-php .menu-item-edit-active .item-edit:before,
    3362 .widget.open .widget-top .widget-action .toggle-indicator:before {
     3362.widget.open .widget-top .widget-action .toggle-indicator:before,
     3363.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before  {
    33633364        content: "\f142";
    33643365}
    33653366

  • src/wp-admin/css/widgets.css

     
    381381        box-shadow: none;
    382382}
    383383
    384 #available-widgets .widget-action {
    385         display: none;
    386 }
    387 
    388384#available-widgets .widget {
    389385        margin: 0;
    390386}
    … …  
    511507}
    512508
    513509#available-widgets .widget-control-edit .edit,
     510#available-widgets .widget-action .edit,
    514511#widgets-left .inactive-sidebar .widget-control-edit .add,
    515 #widgets-right .widget-control-edit .add {
     512#widgets-left .inactive-sidebar .widget-action .add,
     513#widgets-right .widget-control-edit .add,
     514#widgets-right .widget-action .add {
    516515        display: none;
    517516}
    518517
    … …  
    659658}
    660659
    661660.widgets-chooser li {
    662         padding: 10px 15px 10px 35px;
    663661        border-bottom: 1px solid #ccc;
    664662        background: #fff;
    665663        margin: 0;
    666         cursor: pointer;
    667         outline: none;
    668664        position: relative;
    669         transition: background 0.2s ease-in-out;
    670665}
    671666
    672  /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
    673 .widgets-chooser li:hover,
    674 .widgets-chooser li:focus {
    675         background: rgba(255,255,255,0.7);
     667.widgets-chooser .widgets-chooser-button {
     668        width: 100%;
     669        padding: 10px 15px 10px 35px;
     670        background: transparent;
     671        border: 0;
     672        box-sizing: border-box;
     673        text-align: left;
     674        cursor: pointer;
     675        transition: background 0.2s ease-in-out;
    676676}
    677677
    678 .widgets-chooser li:focus:before {
    679         content: "\f147";
    680         display: block;
    681         -webkit-font-smoothing: antialiased;
    682         font: normal 26px/1 dashicons;
    683         color: #555d66;
    684         position: absolute;
    685         top: 7px;
    686         left: 5px;
     678/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
     679.widgets-chooser .widgets-chooser-button:hover,
     680.widgets-chooser .widgets-chooser-button:focus {
     681        outline: none;
     682        text-decoration: underline;
    687683}
    688684
    689685.widgets-chooser li:last-child {
    … …  
    690686        border: none;
    691687}
    692688
    693 .widgets-chooser li.widgets-chooser-selected {
    694         background: #00a0d2;
     689.widgets-chooser .widgets-chooser-selected .widgets-chooser-button {
     690        background: #0073aa;
    695691        color: #fff;
    696692}
    697693
    698 .widgets-chooser li.widgets-chooser-selected:before,
    699 .widgets-chooser li.widgets-chooser-selected:focus:before {
     694.widgets-chooser .widgets-chooser-selected:before {
    700695        content: "\f147";
    701696        display: block;
    702697        -webkit-font-smoothing: antialiased;
    … …  
    712707        text-align: center;
    713708}
    714709
    715 .widgets-chooser button {
    716         margin-right: 5px;
    717 }
    718 
    719710#available-widgets .widget .widget-top {
    720711        cursor: pointer;
    721712}

  • src/wp-admin/includes/widgets.php

     
    9090        echo '<div id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';
    9191
    9292        if ( $sidebar_name ) {
     93                $add_to = sprintf(
     94                        /* translators: %s: widgets sidebar name. */
     95                        __( 'Add to: %s' ),
     96                        $sidebar_name
     97                );
    9398                ?>
    94                 <div class="sidebar-name">
     99                <div class="sidebar-name" data-add-to="<?php echo esc_attr( $add_to ); ?>">
    95100                        <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
    96101                                <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
    97102                                <span class="toggle-indicator" aria-hidden="true"></span>
    … …  
    239244        <div class="widget-top">
    240245        <div class="widget-title-action">
    241246                <button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
    242                         <span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
     247                        <span class="screen-reader-text edit"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
     248                        <span class="screen-reader-text add"><?php printf( __( 'Add widget: %s' ), $widget_title ); ?></span>
    243249                        <span class="toggle-indicator" aria-hidden="true"></span>
    244250                </button>
    245251                <a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">

  • src/wp-admin/js/widgets.js

     
    2121        l10n: {
    2222                save: '{save}',
    2323                saved: '{saved}',
    24                 saveAlert: '{saveAlert}'
     24                saveAlert: '{saveAlert}',
     25                widgetAdded: '{widgetAdded}'
    2526        },
    2627
    2728        /**
    … …  
    176177                                                widget.removeClass( 'open' );
    177178                                        });
    178179                                }
    179                                 e.preventDefault();
    180180                        } else if ( target.hasClass('widget-control-save') ) {
    181181                                wpWidgets.save( target.closest('div.widget'), 0, 1, 0 );
    182182                                e.preventDefault();
    183183                        } else if ( target.hasClass('widget-control-remove') ) {
    184184                                wpWidgets.save( target.closest('div.widget'), 1, 1, 0 );
    185                                 e.preventDefault();
    186185                        } else if ( target.hasClass('widget-control-close') ) {
    187186                                widget = target.closest('div.widget');
    188187                                widget.removeClass( 'open' );
    189188                                toggleBtn.attr( 'aria-expanded', 'false' );
    190189                                wpWidgets.close( widget );
    191                                 e.preventDefault();
    192190                        } else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) {
    193191                                wpWidgets.removeInactiveWidgets();
    194192                                e.preventDefault();
    … …  
    433431                $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
    434432                        var $element = $( element ),
    435433                                name = $element.find( '.sidebar-name h2' ).text(),
     434                                ariaLabel = $element.find( '.sidebar-name' ).data( 'add-to' ),
    436435                                id = $element.find( '.widgets-sortables' ).attr( 'id' ),
    437                                 li = $('<li tabindex="0">').text( $.trim( name ) );
     436                                li = $( '<li>' ),
     437                                button = $( '<button>', {
     438                                        type: 'button',
     439                                        'aria-pressed': 'false',
     440                                        'class': 'widgets-chooser-button',
     441                                        'aria-label': ariaLabel
     442                                } ).text( $.trim( name ) );
    438443
     444                        li.append( button );
     445
    439446                        if ( index === 0 ) {
    440447                                li.addClass( 'widgets-chooser-selected' );
     448                                button.attr( 'aria-pressed', 'true' );
    441449                        }
    442450
    443451                        selectSidebar.append( li );
    … …  
    444452                        li.data( 'sidebarId', id );
    445453                });
    446454
    447                 $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
    448                         var $widget = $(this).closest( '.widget' );
     455                $( '#available-widgets .widget .widget-top' ).on( 'click.widgets-chooser', function() {
     456                        var $widget = $( this ).closest( '.widget' ),
     457                                toggleButton = $( this ).find( '.widget-action' ),
     458                                chooserButtons = selectSidebar.find( '.widgets-chooser-button' );
    449459
    450460                        if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) {
     461                                toggleButton.attr( 'aria-expanded', 'false' );
    451462                                self.closeChooser();
    452463                        } else {
    453464                                // Open the chooser
    454465                                self.clearWidgetSelection();
    455466                                $( '#widgets-left' ).addClass( 'chooser' );
     467                                // Add CSS class and insert the chooser after the widget description.
    456468                                $widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser );
    457 
     469                                // Open the chooser with a slide down animation.
    458470                                chooser.slideDown( 300, function() {
    459                                         selectSidebar.find('.widgets-chooser-selected').focus();
     471                                        // Update the toggle button aria-epander attribute after previous DOM manipulations.
     472                                        toggleButton.attr( 'aria-expanded', 'true' );
    460473                                });
    461474
    462                                 selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
    463                                         selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
    464                                         $(this).addClass( 'widgets-chooser-selected' );
     475                                chooserButtons.on( 'click.widgets-chooser', function() {
     476                                        selectSidebar.find( '.widgets-chooser-selected' ).removeClass( 'widgets-chooser-selected' );
     477                                        chooserButtons.attr( 'aria-pressed', 'false' );
     478                                        $( this )
     479                                                .attr( 'aria-pressed', 'true' )
     480                                                .closest( 'li' ).addClass( 'widgets-chooser-selected' );
    465481                                } );
    466482                        }
    467483                });
    … …  
    477493                                self.closeChooser();
    478494                        }
    479495                }).on( 'keyup.widgets-chooser', function( event ) {
    480                         if ( event.which === $.ui.keyCode.ENTER ) {
    481                                 if ( $( event.target ).hasClass( 'widgets-chooser-cancel' ) ) {
    482                                         // Close instead of adding when pressing Enter on the Cancel button
    483                                         self.closeChooser();
    484                                 } else {
    485                                         self.addWidget( chooser );
    486                                         self.closeChooser();
    487                                 }
    488                         } else if ( event.which === $.ui.keyCode.ESCAPE ) {
     496                        if ( event.which === $.ui.keyCode.ESCAPE ) {
    489497                                self.closeChooser();
    490498                        }
    491499                });
    … …  
    705713                        // Cannot use a callback in the animation above as it fires twice,
    706714                        // have to queue this "by hand".
    707715                        widget.find( '.widget-title' ).trigger('click');
     716                        // At the end of the animation, announce the widget has been added.
     717                        window.wp.a11y.speak( wpWidgets.l10n.widgetAdded, 'assertive' );
    708718                }, 250 );
    709719        },
    710720
    711721        closeChooser: function() {
    712                 var self = this;
     722                var self = this,
     723                        widgetInQuestion = $( '#available-widgets .widget-in-question' );
    713724
    714725                $( '.widgets-chooser' ).slideUp( 200, function() {
    715726                        $( '#wpbody-content' ).append( this );
    716727                        self.clearWidgetSelection();
     728                        // Move focus back to the toggle button.
     729                        widgetInQuestion.find( '.widget-action' ).attr( 'aria-expanded', 'false' ).focus();
    717730                });
    718731        },
    719732

  • src/wp-includes/script-loader.php

     
    786786
    787787                $scripts->add( 'admin-gallery', "/wp-admin/js/gallery$suffix.js", array( 'jquery-ui-sortable' ) );
    788788
    789                 $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
     789                $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable', 'wp-a11y' ), false, 1 );
    790790                did_action( 'init' ) && $scripts->add_inline_script(
    791791                        'admin-widgets', sprintf(
    792792                                'wpWidgets.l10n = %s;', wp_json_encode(
    793793                                        array(
    794                                                 'save'      => __( 'Save' ),
    795                                                 'saved'     => __( 'Saved' ),
    796                                                 'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
     794                                                'save'        => __( 'Save' ),
     795                                                'saved'       => __( 'Saved' ),
     796                                                'saveAlert'   => __( 'The changes you made will be lost if you navigate away from this page.' ),
     797                                                'widgetAdded' => __( 'Widget has been added to the selected sidebar' ),
    797798                                        )
    798799                                )
    799800                        )