WordPress.org
Get WordPress

Make WordPress Core

Ticket #31476: 31476.diff

File 31476.diff, 13.8 KB (added by afercia, 8 years ago)

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

     
    865865        border-bottom: 1px solid #fafafa;
    866866}
    867867
    868 .widget-control-remove,
    869 .widget-control-remove:focus,
    870868.row-actions span.delete a,
    871869.row-actions span.trash a,
    872870.row-actions span.spam a,
    … …  
    893891#media-items a.delete:hover,
    894892#media-items a.delete-permanently:hover,
    895893#nav-menu-footer .menu-delete:hover {
    896         color: #f00;
     894        color: #dc3232;
    897895        border: none;
    898896}
    899897
    900 .widget-control-remove:hover {
    901         color: #f00;
    902 }
    903 
    904898/*------------------------------------------------------------------------------
    905899  3.0 - Actions
    906900------------------------------------------------------------------------------*/
    … …  
    32443238
    32453239/* @todo: can we use a common class for these? */
    32463240.nav-menus-php .item-edit:before,
    3247 .widget-top a.widget-action:after,
     3241.widget-top .widget-action .toggle-indicator:before,
    32483242.control-section .accordion-section-title:after,
    32493243.accordion-section-title:after {
    3250         right: 0;
    32513244        content: "\f140";
    3252         border: none;
    3253         background: none;
    32543245        font: normal 20px/1 dashicons;
    32553246        speak: none;
    32563247        display: block;
    3257         padding: 0;
    3258         text-indent: 0;
    3259         text-align: center;
    3260         position: relative;
    32613248        -webkit-font-smoothing: antialiased;
    32623249        -moz-osx-font-smoothing: grayscale;
    32633250        text-decoration: none !important;
    32643251}
    32653252
     3253.widget-top .widget-action .toggle-indicator:before {
     3254        padding: 1px 2px 1px 0px;
     3255        -webkit-border-radius: 50%;
     3256        border-radius: 50%;
     3257}
     3258
    32663259.handlediv,
    32673260.postbox .handlediv.button-link,
    32683261.item-edit,
    … …  
    32883281        color: #23282d;
    32893282}
    32903283
    3291 .widget-top a.widget-action:after {
    3292         padding: 1px 2px 1px 0px;
    3293         margin-top: 10px;
    3294         margin-right: 10px;
    3295         -webkit-border-radius: 50%;
    3296         border-radius: 50%;
    3297 }
    3298 
    3299 .widget-top a.widget-action:focus:after {
     3284.widget-top .widget-action:focus .toggle-indicator:before {
    33003285        -webkit-box-shadow:
    33013286                0 0 0 1px #5b9dd9,
    33023287                0 0 2px 1px rgba(30,140,190,.8);
    … …  
    33153300.control-section.open .accordion-section-title:after,
    33163301#customize-info.open .accordion-section-title:after,
    33173302.nav-menus-php .menu-item-edit-active .item-edit:before,
    3318 .widget.open .widget-top a.widget-action:after {
     3303.widget.open .widget-top .widget-action .toggle-indicator:before {
    33193304        content: "\f142";
    33203305}
    33213306
    … …  
    35943579        /* @todo: evaluate - most of these were likely replaced by dashicons */
    35953580        .curtime #timestamp,
    35963581        #screen-meta-links a.show-settings,
    3597         .widget-top a.widget-action,
    3598         .widget-top a.widget-action:hover,
     3582        .widget-top .widget-action,
     3583        .widget-top .widget-action:hover,
    35993584        .sidebar-name-arrow,
    36003585        .sidebar-name:hover .sidebar-name-arrow,
    36013586        .meta-box-sortables .postbox:hover .handlediv,

  • src/wp-admin/css/customize-nav-menus.css

     
    153153        text-align: center;
    154154}
    155155
    156 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
     156.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before {
    157157        content: "\f142";
    158158}
    159159
    … …  
    271271        display: inline-block;
    272272        font-size: 20px;
    273273        line-height: 1;
    274         text-indent: -1px; /* account for the dashicon alignment */
    275274}
    276275
    277276.rtl .wp-customizer .toggle-indicator {
    … …  
    278277        text-indent: 1px; /* account for the dashicon alignment */
    279278}
    280279
    281 .wp-customizer .toggle-indicator:after {
     280.wp-customizer .menu-item .item-edit .toggle-indicator:before,
     281#available-menu-items .accordion-section-title .toggle-indicator:before {
    282282        content: "\f140";
     283        display: block;
     284        padding: 1px 2px 1px 0px;
    283285        speak: none;
    284         vertical-align: top;
    285286        -webkit-border-radius: 50%;
    286287        border-radius: 50%;
    287288        color: #72777c;
    … …  
    494495        content: none !important;
    495496}
    496497
    497 #available-menu-items .accordion-section-title:hover .toggle-indicator:after,
    498 #available-menu-items .button-link:hover .toggle-indicator:after,
    499 #available-menu-items .button-link:focus .toggle-indicator:after {
     498#available-menu-items .accordion-section-title:hover .toggle-indicator:before,
     499#available-menu-items .button-link:hover .toggle-indicator:before,
     500#available-menu-items .button-link:focus .toggle-indicator:before {
    500501        color: #23282d;
    501502}
    502503
    503 #available-menu-items .open .accordion-section-title .toggle-indicator:after {
     504#available-menu-items .open .accordion-section-title .toggle-indicator:before {
    504505        content: "\f142";
    505506        color: #23282d;
    506507}
    … …  
    837838.wp-customizer .menu-item .submitbox .submitdelete:focus,
    838839.customize-screen-options-toggle:focus:before,
    839840#customize-controls .customize-info .customize-help-toggle:focus:before,
    840 .wp-customizer button:focus .toggle-indicator:after,
     841.wp-customizer button:focus .toggle-indicator:before,
    841842.menu-delete:focus,
    842843.menu-item-bar .item-delete:focus:before,
    843844#available-menu-items .item-add:focus:before {

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

     
    8989        line-height: 16px;
    9090}
    9191
    92 .customize-control-widget_form.expanded a.widget-action:after {
     92.customize-control-widget_form.expanded .widget-action .toggle-indicator:before {
    9393        content: "\f142";
    9494}
    9595
    96 .customize-control-widget_form.wide-widget-control a.widget-action:after {
     96.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before {
    9797        content: "\f139";
    9898}
    9999
    100 .customize-control-widget_form.wide-widget-control.expanded a.widget-action:after {
     100.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before {
    101101        content: "\f141";
    102102}
    103103
    … …  
    438438        .last-widget {
    439439                margin-bottom: 15px;
    440440        }
     441        /* This rule reduces the widgets titles height. */
    441442        .widget-title h3 {
    442443                padding: 13px 15px;
    443444        }
     445        .widget-top .widget-action {
     446                padding-bottom: 8px;
     447        }
    444448        .widget-reorder-nav span {
    445449                height: 39px;
    446450        }

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

     
    1414        background: #f7f7f7;
    1515}
    1616
    17 .widget-top a.widget-action,
    18 .widget-top a.widget-action:hover {
    19         -webkit-box-shadow: none;
    20         box-shadow: none;
     17.widget-top .widget-action {
     18        border: 0;
     19        margin: 0;
     20        padding: 10px;
     21        background: none;
     22        cursor: pointer;
    2123        outline: none;
    22         text-decoration: none;
    2324}
    2425
    2526.widget-title h3,
    … …  
    5051}
    5152
    5253.deleting .widget-title,
    53 .deleting .widget-top a.widget-action:after {
     54.deleting .widget-top .widget-action .toggle-indicator:before {
    5455        color: #a0a5aa;
    5556}
    5657

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

     
    219219        echo $sidebar_args['before_widget']; ?>
    220220        <div class="widget-top">
    221221        <div class="widget-title-action">
    222                 <a class="widget-action hide-if-no-js" href="#available-widgets"></a>
     222                <button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
     223                        <span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
     224                        <span class="toggle-indicator" aria-hidden="true"></span>
     225                </button>
    223226                <a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">
    224227                        <span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span>
    225228                        <span class="add"><?php _ex( 'Add', 'widget' ); ?></span>
    … …  
    250253
    251254        <div class="widget-control-actions">
    252255                <div class="alignleft">
    253                 <a class="widget-control-remove" href="#remove"><?php _e('Delete'); ?></a> |
    254                 <a class="widget-control-close" href="#close"><?php _e('Close'); ?></a>
     256                        <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> |
     257                        <button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button>
    255258                </div>
    256259                <div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
    257260                        <?php submit_button( __( 'Save' ), 'primary widget-control-save right', 'savewidget', false, array( 'id' => 'widget-' . esc_attr( $id_format ) . '-savewidget' ) ); ?>

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

     
    952952                        var self = this, $removeBtn, replaceDeleteWithRemove;
    953953
    954954                        // Configure remove button
    955                         $removeBtn = this.container.find( 'a.widget-control-remove' );
     955                        $removeBtn = this.container.find( '.widget-control-remove' );
    956956                        $removeBtn.on( 'click', function( e ) {
    957957                                e.preventDefault();
    958958
    … …  
    988988                        } );
    989989
    990990                        replaceDeleteWithRemove = function() {
    991                                 $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
     991                                $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the button as "Delete"
    992992                                $removeBtn.attr( 'title', l10n.removeBtnTooltip );
    993993                        };
    994994
    … …  
    13671367                 * @param {Object} args  merged on top of this.defaultActiveArguments
    13681368                 */
    13691369                onChangeExpanded: function ( expanded, args ) {
    1370                         var self = this, $widget, $inside, complete, prevComplete, expandControl;
     1370                        var self = this, $widget, $inside, complete, prevComplete, expandControl, $toggleBtn;
    13711371
    13721372                        self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
    13731373                        if ( expanded ) {
    … …  
    13861386
    13871387                        $widget = this.container.find( 'div.widget:first' );
    13881388                        $inside = $widget.find( '.widget-inside:first' );
     1389                        $toggleBtn = this.container.find( '.widget-top button.widget-action' );
    13891390
    13901391                        expandControl = function() {
    13911392
    … …  
    13991400                                complete = function() {
    14001401                                        self.container.removeClass( 'expanding' );
    14011402                                        self.container.addClass( 'expanded' );
     1403                                        $toggleBtn.attr( 'aria-expanded', 'true' );
    14021404                                        self.container.trigger( 'expanded' );
    14031405                                };
    14041406                                if ( args.completeCallback ) {
    … …  
    14281430                                        expandControl();
    14291431                                }
    14301432                        } else {
    1431 
    14321433                                complete = function() {
    14331434                                        self.container.removeClass( 'collapsing' );
    14341435                                        self.container.removeClass( 'expanded' );
     1436                                        $toggleBtn.attr( 'aria-expanded', 'false' );
    14351437                                        self.container.trigger( 'collapsed' );
    14361438                                };
    14371439                                if ( args.completeCallback ) {

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

     
    4141                $(document.body).bind('click.widgets-toggle', function(e) {
    4242                        var target = $(e.target),
    4343                                css = { 'z-index': 100 },
    44                                 widget, inside, targetWidth, widgetWidth, margin;
     44                                widget, inside, targetWidth, widgetWidth, margin,
     45                                toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
    4546
    4647                        if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
    4748                                widget = target.closest('div.widget');
    … …  
    6061                                                css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';
    6162                                                widget.css( css );
    6263                                        }
    63                                         widget.addClass( 'open' );
    64                                         inside.slideDown('fast');
     64                                        /*
     65                                         * Don't change the order of attributes changes and animation:
     66                                         * it's important for screen readers, see ticket #31476.
     67                                         */
     68                                        toggleBtn.attr( 'aria-expanded', 'true' );
     69                                        inside.slideDown( 'fast', function() {
     70                                                widget.addClass( 'open' );
     71                                        });
    6572                                } else {
    66                                         inside.slideUp('fast', function() {
     73                                        /*
     74                                         * Don't change the order of attributes changes and animation:
     75                                         * it's important for screen readers, see ticket #31476.
     76                                         */
     77                                        toggleBtn.attr( 'aria-expanded', 'false' );
     78                                        inside.slideUp( 'fast', function() {
    6779                                                widget.attr( 'style', '' );
    6880                                                widget.removeClass( 'open' );
    6981                                        });
    … …  
    7890                        } else if ( target.hasClass('widget-control-close') ) {
    7991                                widget = target.closest('div.widget');
    8092                                widget.removeClass( 'open' );
     93                                toggleBtn.attr( 'aria-expanded', 'false' );
    8194                                wpWidgets.close( widget );
    8295                                e.preventDefault();
    8396                        } else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) {
    … …  
    92105                        wpWidgets.appendTitle( this );
    93106
    94107                        if ( $this.find( 'p.widget-error' ).length ) {
    95                                 $this.find( 'a.widget-action' ).trigger('click');
     108                                $this.find( '.widget-action' ).trigger( 'click' ).attr( 'aria-expanded', 'true' );
    96109                        }
    97110                });
    98111
    … …  
    182195
    183196                                if ( inside.css('display') === 'block' ) {
    184197                                        ui.item.removeClass('open');
     198                                        ui.item.find( '.widget-top button.widget-action' ).attr( 'aria-expanded', 'false' );
    185199                                        inside.hide();
    186200                                        $(this).sortable('refreshPositions');
    187201                                }
    … …  
    254268                                }
    255269
    256270                                if ( addNew ) {
    257                                         $widget.find( 'a.widget-action' ).trigger('click');
     271                                        $widget.find( '.widget-action' ).trigger( 'click' );
    258272                                } else {
    259273                                        wpWidgets.saveOrder( $sidebar.attr('id') );
    260274                                }
    … …  
    492506
    493507        close : function(widget) {
    494508                widget.children('.widget-inside').slideUp('fast', function() {
    495                         widget.attr( 'style', '' );
     509                        widget.attr( 'style', '' )
     510                                .find( '.widget-top button.widget-action' )
     511                                        .attr( 'aria-expanded', 'false' )
     512                                        .focus();
    496513                });
    497514        },
    498515

  • src/wp-includes/css/buttons.css

     
    242242
    243243.wp-core-ui .button-link-delete:hover,
    244244.wp-core-ui .button-link-delete:focus {
    245         color: #f00;
     245        color: #dc3232;
    246246}
    247247
    248248.ie8 .wp-core-ui .button-link:focus {