WordPress.org

Make WordPress Core

Changeset 40480


Ignore:
Timestamp:
04/19/17 21:13:53 (9 months 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.