Changeset 33617

Timestamp:

08/14/2015 09:22:57 PM (10 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:

• css/customize-nav-menus.css (modified) (3 diffs)
• js/customize-nav-menus.js (modified) (2 diffs)

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

@@ -711 +711 @@
     bottom: 0px; /* 100% height that still triggers lazy load */
     max-height: none;
-    width: 270px;
+    width: 100%;
+    padding: 1px 15px 15px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
@@ -1037 +1041 @@
 }
 
+@media screen and ( max-width: 782px ) {
+    #available-menu-items #available-menu-items-search .accordion-section-content {
+        top: 63px;
+    }
+}
+
 @media screen and ( max-width: 640px ) {
     body.adding-menu-items div#available-menu-items {
@@ -1043 +1053 @@
         z-index: 10;
         width: 100%;
+    }
+
+    #available-menu-items #available-menu-items-search .accordion-section-content {
+        top: 133px;
     }
 

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -539 +539 @@
                 options = $( '#screen-options-wrap' ),
                 button = panelMeta.find( '.customize-screen-options-toggle' );
-            button.on( 'click', function() {
+            button.on( 'click keydown', function( event ) {
+                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                    return;
+                }
+                event.preventDefault();
+
                 // Hide description
                 if ( content.not( ':hidden' ) ) {
@@ -562 +567 @@
 
             // Help toggle
-            help.on( 'click', function() {
+            help.on( 'click keydown', function( event ) {
+                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                    return;
+                }
+                event.preventDefault();
+
                 if ( 'true' === button.attr( 'aria-expanded' ) ) {
                     button.attr( 'aria-expanded', 'false' );