WordPress.org

Make WordPress Core

Changeset 33617


Ignore:
Timestamp:
08/14/2015 09:22:57 PM (6 years ago)
Author:
westonruter
Message:

Customize: Fix keyboard accessibility for toggling screen options and contextual help.

Also fix layout of search results in mobile.

Props valendesigns, afercia, adamsilverstein.
Fixes #33184.

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

Legend:

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

    r33610 r33617  
    711711    bottom: 0px; /* 100% height that still triggers lazy load */
    712712    max-height: none;
    713     width: 270px;
     713    width: 100%;
     714    padding: 1px 15px 15px;
     715    -webkit-box-sizing: border-box;
     716    -moz-box-sizing: border-box;
     717    box-sizing: border-box;
    714718}
    715719
     
    10371041}
    10381042
     1043@media screen and ( max-width: 782px ) {
     1044    #available-menu-items #available-menu-items-search .accordion-section-content {
     1045        top: 63px;
     1046    }
     1047}
     1048
    10391049@media screen and ( max-width: 640px ) {
    10401050    body.adding-menu-items div#available-menu-items {
     
    10431053        z-index: 10;
    10441054        width: 100%;
     1055    }
     1056
     1057    #available-menu-items #available-menu-items-search .accordion-section-content {
     1058        top: 133px;
    10451059    }
    10461060
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r33602 r33617  
    539539                options = $( '#screen-options-wrap' ),
    540540                button = panelMeta.find( '.customize-screen-options-toggle' );
    541             button.on( 'click', function() {
     541            button.on( 'click keydown', function( event ) {
     542                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     543                    return;
     544                }
     545                event.preventDefault();
     546
    542547                // Hide description
    543548                if ( content.not( ':hidden' ) ) {
     
    562567
    563568            // Help toggle
    564             help.on( 'click', function() {
     569            help.on( 'click keydown', function( event ) {
     570                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     571                    return;
     572                }
     573                event.preventDefault();
     574
    565575                if ( 'true' === button.attr( 'aria-expanded' ) ) {
    566576                    button.attr( 'aria-expanded', 'false' );
Note: See TracChangeset for help on using the changeset viewer.