WordPress.org
Get WordPress

Make WordPress Core

Changeset 40480 for trunk


Ignore:
Timestamp:
04/19/2017 09:13:53 PM (8 years ago)
Author:
afercia
Message:

Accessibility: Make some Widgets buttons real buttons.

Links used as UI controls that behave like buttons, should be buttons.

  • changes the widgets "toggle", "Delete", and "Close" links to buttons
  • uses aria-expanded to announce the state of the toggle buttons
  • increases a bit the clickable area of the toggle
  • ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
  • uses a <span> element with an aria-hidden attribute to hide CSS generated font icons from assistive technologies
  • standardizes on .toggle-indicator:before rather than :after
  • changes two #f00 reds in #dc3232, see #35622

Fixes #31476.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

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

    r40059 r40480  
    866866}
    867867
    868 .widget-control-remove,
    869 .widget-control-remove:focus,
    870868.row-actions span.delete a,
    871869.row-actions span.trash a,
    … …  
    894892#media-items a.delete-permanently:hover,
    895893#nav-menu-footer .menu-delete:hover {
    896     color: #f00;
     894    color: #dc3232;
    897895    border: none;
    898 }
    899 
    900 .widget-control-remove:hover {
    901     color: #f00;
    902896}
    903897
    … …  
    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;
     3251}
     3252
     3253.widget-top .widget-action .toggle-indicator:before {
     3254    padding: 1px 2px 1px 0px;
     3255    -webkit-border-radius: 50%;
     3256    border-radius: 50%;
    32643257}
    32653258
    … …  
    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,
    … …  
    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}
    … …  
    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,

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

    r40358 r40480  
    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}
    … …  
    272272    font-size: 20px;
    273273    line-height: 1;
    274     text-indent: -1px; /* account for the dashicon alignment */
    275274}
    276275
    … …  
    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%;
    … …  
    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;
    … …  
    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,

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

    r39249 r40480  
    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}
    … …  
    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;

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

    r37740 r40480  
    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
    … …  
    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}

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

    r38672 r40480  
    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>
    … …  
    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'; ?>">

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

    r40330 r40480  
    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();
    … …  
    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            };
    … …  
    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.
    … …  
    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() {
    … …  
    14001401                    self.container.removeClass( 'expanding' );
    14011402                    self.container.addClass( 'expanded' );
     1403                    $toggleBtn.attr( 'aria-expanded', 'true' );
    14021404                    self.container.trigger( 'expanded' );
    14031405                };
    … …  
    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                };

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

    r38672 r40480  
    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 ) {
    … …  
    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' );
    … …  
    7991                widget = target.closest('div.widget');
    8092                widget.removeClass( 'open' );
     93                toggleBtn.attr( 'aria-expanded', 'false' );
    8194                wpWidgets.close( widget );
    8295                e.preventDefault();
    … …  
    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        });
    … …  
    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');
    … …  
    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') );
    … …  
    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    },

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

    r40428 r40480  
    243243.wp-core-ui .button-link-delete:hover,
    244244.wp-core-ui .button-link-delete:focus {
    245     color: #f00;
     245    color: #dc3232;
    246246}
    247247
Note: See TracChangeset for help on using the changeset viewer.