Changeset 33069

Timestamp:

07/03/2015 08:18:17 PM (9 years ago)

Author:

ocean90

Message:

Customizer: Accessibility enhancements.

• Move tabindex/focus code into onChangeExpanded so that it works for cases where expand() is called directly.
• Use visibility: hidden to hide hidden elements from keyboard focus and screen readers.

props celloexpressions.
fixes #31336.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (1 diff)
• js/customize-controls.js (modified) (5 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -490 +490 @@
 }
 
+.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
+    visibility: hidden;
+    overflow-y: hidden;
+}
+
+.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
+    visibility: visible;
+}
+
+.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
+    overflow-y: auto;
+}
+
 p.customize-section-description {
     font-style: normal;

trunk/src/wp-admin/js/customize-controls.js

@@ -525 +525 @@
          */
         attachEvents: function () {
-            var section = this,
-                backBtn = section.container.find( '.customize-section-back' ),
-                sectionTitle = section.container.find( '.accordion-section-title' ).first();
+            var section = this;
 
             // Expand/Collapse accordion sections on click.
@@ -538 +536 @@
                 if ( section.expanded() ) {
                     section.collapse();
-                    backBtn.attr( 'tabindex', '-1' );
-                    sectionTitle.attr( 'tabindex', '0' );
-                    sectionTitle.focus();
                 } else {
                     section.expand();
-                    sectionTitle.attr( 'tabindex', '-1' );
-                    backBtn.attr( 'tabindex', '0' );
-                    backBtn.focus();
                 }
             });
@@ -593 +585 @@
                 content = section.container.find( '.accordion-section-content' ),
                 overlay = section.container.closest( '.wp-full-overlay' ),
+                backBtn = section.container.find( '.customize-section-back' ),
+                sectionTitle = section.container.find( '.accordion-section-title' ).first(),
                 expand;
 
@@ -607 +601 @@
                         scroll = container.scrollTop();
                         content.css( 'margin-top', ( 45 - position - scroll ) );
+                        content.css( 'height', ( window.innerHeight - 90 ) );
+                        sectionTitle.attr( 'tabindex', '-1' );
+                        backBtn.attr( 'tabindex', '0' );
+                        backBtn.focus();
                         if ( args.completeCallback ) {
                             args.completeCallback();
@@ -635 +633 @@
                 content.css( 'margin-top', 'inherit' );
                 container.scrollTop( 0 );
-                section.container.find( '.accordion-section-title' ).focus();
+                backBtn.attr( 'tabindex', '-1' );
+                sectionTitle.attr( 'tabindex', '0' );
+                sectionTitle.focus();
                 if ( args.completeCallback ) {
                     args.completeCallback();