Changeset 33069

Timestamp:

07/03/2015 08:18:17 PM (11 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();