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.
Built from https://develop.svn.wordpress.org/trunk@33069


git-svn-id: http://core.svn.wordpress.org/trunk@33040 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling 2015-07-03 20:19:25 +00:00
parent 492853a64e
commit 2ce8d2eea2
7 changed files with 41 additions and 15 deletions

View File

@ -489,6 +489,19 @@ h3.customize-section-title {
transition: right 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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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();
}

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-beta1-33068';
$wp_version = '4.3-beta1-33069';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.