Make WordPress Core

Changeset 41621


Ignore:
Timestamp:
09/27/2017 04:28:59 PM (7 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.