From e430245d0036c27a5470b4bdaeadd24226b4dcdf Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Fri, 3 Jul 2015 20:18:17 +0000
Subject: [PATCH] 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.
git-svn-id: https://develop.svn.wordpress.org/trunk@33069 602fd350-edb4-49c9-b593-d223f7449a82
---
src/wp-admin/css/customize-controls.css | 13 +++++++++++++
src/wp-admin/js/customize-controls.js | 20 ++++++++++----------
2 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index dd0ecb9119..d361766539 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -489,6 +489,19 @@ h3.customize-section-title {
transition: left 0s;
}
+.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;
margin-top: 22px;
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 5d3b635175..b6d1c62d06 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -524,9 +524,7 @@
* @since 4.1.0
*/
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.
section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
@@ -537,14 +535,8 @@
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();
}
});
},
@@ -592,6 +584,8 @@
container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
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;
if ( expanded && ! section.container.hasClass( 'open' ) ) {
@@ -606,6 +600,10 @@
position = content.offset().top;
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();
}
@@ -634,7 +632,9 @@
overlay.removeClass( 'section-open' );
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();
}