WordPress.org
Get WordPress

Make WordPress Core

Changeset 41621


Ignore:
Timestamp:
09/27/2017 04:28:59 PM (9 years ago)
Author:
afercia
Message:

Accessibility: Improve the sidebar toggles in the Widgets screen.

  • uses button elements for the toggles
  • uses aria-expanded on the toggles to communicate to assistive technologies the panels expanded/collapsed state
  • adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
  • standardizes CSS class names to .toggle-indicator and .handlediv as these names are already used across the admin for similar controls

Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes #37013.

Location:
trunk/src/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r41595 r41621  
    29672967
    29682968/* Metabox collapse arrow indicators */
    2969 .js .sidebar-name .sidebar-name-arrow:before,
     2969.sidebar-name .toggle-indicator:before,
    29702970.js .meta-box-sortables .postbox .toggle-indicator:before,
    29712971.bulk-action-notice .toggle-indicator:before {
    … …  
    29792979}
    29802980
    2981 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
     2981.js .widgets-holder-wrap.closed .toggle-indicator:before,
    29822982.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
    29832983.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
    29842984        content: "\f140";
    2985 }
    2986 
    2987 .js .sidebar-name .sidebar-name-arrow:before {
    2988         padding: 10px;
    2989         left: 0;
    2990 }
    2991 
    2992 .js #widgets-left .sidebar-name .sidebar-name-arrow {
    2993         display: none;
    2994 }
    2995 
    2996 .js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow,
    2997 .js #widgets-left .sidebar-name:hover .sidebar-name-arrow {
    2998         display: block;
    29992985}
    30002986
    … …  
    31723158.postbox .handlediv.button-link,
    31733159.item-edit,
    3174 .sidebar-name-arrow,
     3160.toggle-indicator,
    31753161.accordion-section-title:after {
    31763162        color: #72777c;
    … …  
    31893175.item-edit:hover,
    31903176.item-edit:focus,
    3191 .sidebar-name:hover .sidebar-name-arrow,
     3177.sidebar-name:hover .toggle-indicator,
    31923178.accordion-section-title:hover:after {
    31933179        color: #23282d;
    … …  
    34893475        .widget-top .widget-action,
    34903476        .widget-top .widget-action:hover,
    3491         .sidebar-name-arrow,
    3492         .sidebar-name:hover .sidebar-name-arrow,
     3477        .sidebar-name .toggle-indicator,
     3478        .sidebar-name:hover .toggle-indicator,
    34933479        .meta-box-sortables .postbox:hover .handlediv,
    34943480        #bulk-titles div a,

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

    r41602 r41621  
    261261}
    262262
    263 .sidebar-name-arrow {
    264         position: absolute;
    265         top: 0;
    266         right: 0;
    267         bottom: 0;
    268 }
    269 
    270263.js .sidebar-name {
    271264        cursor: pointer;
     265}
     266
     267.sidebar-name .handlediv {
     268        float: right;
     269        width: 38px;
     270        height: 38px;
     271        border: 0;
     272        margin: 0;
     273        padding: 8px;
     274        background: none;
     275        cursor: pointer;
     276        outline: none;
     277}
     278
     279#widgets-right .sidebar-name .handlediv {
     280        margin: 5px 3px 0 0;
     281}
     282
     283.sidebar-name .handlediv:focus {
     284        box-shadow: none;
     285        outline: none;
     286}
     287
     288#widgets-left .sidebar-name .toggle-indicator {
     289        display: none;
     290}
     291
     292#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
     293#widgets-left .sidebar-name:hover .toggle-indicator,
     294#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
     295        display: block;
     296}
     297
     298.sidebar-name .toggle-indicator:before {
     299        padding: 1px 2px 1px 0;
     300        border-radius: 50%;
     301}
     302
     303.sidebar-name .handlediv:focus .toggle-indicator:before {
     304        box-shadow:
     305                0 0 0 1px #5b9dd9,
     306                0 0 2px 1px rgba(30, 140, 190, .8);
    272307}
    273308
    … …  
    324359        padding: 10px 0;
    325360        margin: 0 10px 0 0;
    326 }
    327 
    328 #widgets-left .sidebar-name .sidebar-name-arrow:before {
    329         padding: 9px;
    330361}
    331362
    … …  
    424455}
    425456
    426 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
    427         top: 2px;
    428 }
    429 
    430457div#widgets-right .widget-top {
    431458        padding: 0;
    … …  
    557584#access-off,
    558585.widgets_access .widget-action,
    559 .widgets_access .sidebar-name-arrow,
     586.widgets_access .handlediv,
    560587.widgets_access #access-on,
    561588.widgets_access .widget-holder .description,

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

    r41352 r41621  
    8181                ?>
    8282                <div class="sidebar-name">
    83                         <div class="sidebar-name-arrow"><br /></div>
     83                        <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
     84                                <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
     85                                <span class="toggle-indicator" aria-hidden="true"></span>
     86                        </button>
    8487                        <h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
    8588                </div>

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

    r41352 r41621  
    4040                        isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
    4141
    42                 $('#widgets-right .sidebar-name').click( function() {
    43                         var $this = $(this),
    44                                 $wrap = $this.closest('.widgets-holder-wrap');
    45 
    46                         if ( $wrap.hasClass('closed') ) {
    47                                 $wrap.removeClass('closed');
    48                                 $this.parent().sortable('refresh');
    49                         } else {
    50                                 $wrap.addClass('closed');
    51                         }
    52 
    53                         $document.triggerHandler( 'wp-pin-menu' );
    54                 });
     42                // Handle the widgets containers in the right column.
     43                $( '#widgets-right .sidebar-name' )
     44                        /*
     45                         * Toggle the widgets containers when clicked and update the toggle
     46                         * button `aria-expanded` attribute value.
     47                         */
     48                        .click( function() {
     49                                var $this = $( this ),
     50                                        $wrap = $this.closest( '.widgets-holder-wrap '),
     51                                        $toggle = $this.find( '.handlediv' );
     52
     53                                if ( $wrap.hasClass( 'closed' ) ) {
     54                                        $wrap.removeClass( 'closed' );
     55                                        $toggle.attr( 'aria-expanded', 'true' );
     56                                        // Refresh the jQuery UI sortable items.
     57                                        $this.parent().sortable( 'refresh' );
     58                                } else {
     59                                        $wrap.addClass( 'closed' );
     60                                        $toggle.attr( 'aria-expanded', 'false' );
     61                                }
     62
     63                                // Update the admin menu "sticky" state.
     64                                $document.triggerHandler( 'wp-pin-menu' );
     65                        })
     66                        /*
     67                         * Set the initial `aria-expanded` attribute value on the widgets
     68                         * containers toggle button. The first one is expanded by default.
     69                         */
     70                        .find( '.handlediv' ).each( function( index ) {
     71                                if ( 0 === index ) {
     72                                        // jQuery equivalent of `continue` within an `each()` loop.
     73                                        return;
     74                                }
     75
     76                                $( this ).attr( 'aria-expanded', 'false' );
     77                        });
    5578
    5679                // Show AYS dialog when there are unsaved widget changes.
    … …  
    87110                });
    88111
    89                 $('#widgets-left .sidebar-name').click( function() {
    90                         $(this).closest('.widgets-holder-wrap').toggleClass('closed');
     112                // Handle the widgets containers in the left column.
     113                $( '#widgets-left .sidebar-name' ).click( function() {
     114                        var $wrap = $( this ).closest( '.widgets-holder-wrap' );
     115
     116                        $wrap
     117                                .toggleClass( 'closed' )
     118                                .find( '.handlediv' ).attr( 'aria-expanded', ! $wrap.hasClass( 'closed' ) );
     119
     120                        // Update the admin menu "sticky" state.
    91121                        $document.triggerHandler( 'wp-pin-menu' );
    92122                });
    … …  
    216246                         * Open Sidebar when a Widget gets dragged over it.
    217247                         *
    218                          * @param event
     248                         * @param {object} event jQuery event object.
    219249                         */
    220250                        over: function( event ) {
    … …  
    228258                                if ( $wrap.hasClass( 'closed' ) ) {
    229259                                        wpWidgets.hoveredSidebar = $wrap;
    230                                         $wrap.removeClass( 'closed' );
     260                                        $wrap
     261                                                .removeClass( 'closed' )
     262                                                .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
    231263                                }
    232264
    … …  
    237269                         * Close Sidebar when the Widget gets dragged out of it.
    238270                         *
    239                          * @param event
     271                         * @param {object} event jQuery event object.
    240272                         */
    241273                        out: function( event ) {
    … …  
    320352
    321353                                if ( $sidebar.parent().hasClass('closed') ) {
    322                                         $sidebar.parent().removeClass('closed');
     354                                        $sidebar.parent()
     355                                                .removeClass( 'closed' )
     356                                                .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
     357
    323358                                        $children = $sidebar.children('.widget');
    324359
    … …  
    623658                }
    624659
    625                 // Open the widgets container
    626                 sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
     660                // Open the widgets container.
     661                sidebar.closest( '.widgets-holder-wrap' )
     662                        .removeClass( 'closed' )
     663                        .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
    627664
    628665                sidebar.append( widget );
    … …  
    680717         * Used when a Widget gets dragged in/out of the Sidebar and never dropped.
    681718         *
    682          * @param sidebar
     719         * @param {object} event jQuery event object.
    683720         */
    684         closeSidebar: function( sidebar ) {
    685                 this.hoveredSidebar.addClass( 'closed' );
    686                 $( sidebar.target ).css( 'min-height', '' );
     721        closeSidebar: function( event ) {
     722                this.hoveredSidebar
     723                        .addClass( 'closed' )
     724                        .find( '.handlediv' ).attr( 'aria-expanded', 'false' );
     725
     726                $( event.target ).css( 'min-height', '' );
    687727                this.hoveredSidebar = null;
    688728        }

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

    r40313 r41621  
    388388        <div id="available-widgets" class="widgets-holder-wrap">
    389389                <div class="sidebar-name">
    390                         <div class="sidebar-name-arrow"><br /></div>
     390                        <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
     391                                <span class="screen-reader-text"><?php _e( 'Available Widgets' ); ?></span>
     392                                <span class="toggle-indicator" aria-hidden="true"></span>
     393                        </button>
    391394                        <h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
    392395                </div>
Note: See TracChangeset for help on using the changeset viewer.