Keyboard accessibility for the theme customizer. props lessbloat, jorbin, JustinSainton. fixes #21283.
git-svn-id: https://develop.svn.wordpress.org/trunk@22400 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Nacin
parent
452976110d
commit
67ac51fe73
@ -67,7 +67,8 @@ body {
|
||||
|
||||
.control-section:hover .customize-section-title,
|
||||
.control-section .customize-section-title:hover,
|
||||
.control-section.open .customize-section-title {
|
||||
.control-section.open .customize-section-title,
|
||||
.customize-section-title:focus {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 #333;
|
||||
background: #808080;
|
||||
@ -126,6 +127,11 @@ body {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#customize-info .customize-section-title:focus .preview-notice {
|
||||
color: #ccc;
|
||||
text-shadow: 0 -1px 0 #333;
|
||||
}
|
||||
|
||||
#customize-info .theme-name {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
@ -135,6 +141,11 @@ body {
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
#customize-info .customize-section-title:focus .theme-name {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 #333;
|
||||
}
|
||||
|
||||
#customize-info .theme-screenshot {
|
||||
width: 258px;
|
||||
border: 1px solid #ccc;
|
||||
@ -155,16 +166,19 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#customize-footer-actions .button-primary,
|
||||
#customize-header-actions .button-primary {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#customize-footer-actions .spinner,
|
||||
#customize-header-actions .spinner {
|
||||
margin-top: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.saving #customize-footer-actions .spinner,
|
||||
.saving #customize-header-actions .spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -5571,8 +5571,7 @@ body.full-overlay-active {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wp-full-overlay-sidebar .wp-full-overlay-header,
|
||||
.wp-full-overlay-sidebar .wp-full-overlay-footer {
|
||||
.wp-full-overlay-sidebar .wp-full-overlay-header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -5583,13 +5582,6 @@ body.full-overlay-active {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-full-overlay-sidebar .wp-full-overlay-header {
|
||||
top: 0;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #fff;
|
||||
box-shadow: inset 0 -1px 0 0px #dfdfdf;
|
||||
}
|
||||
|
||||
.wp-full-overlay-sidebar .wp-full-overlay-footer {
|
||||
bottom: 0;
|
||||
border-bottom: 0;
|
||||
@ -5638,11 +5630,11 @@ body.full-overlay-active {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: transparent url('../images/arrows.png') no-repeat 0 -72px;
|
||||
background: transparent url('../images/arrows.png') no-repeat -1px -73px;
|
||||
}
|
||||
|
||||
.wp-full-overlay.collapsed .collapse-sidebar-arrow {
|
||||
background-position: 0 -108px;
|
||||
background-position: -1px -109px;
|
||||
}
|
||||
|
||||
.wp-full-overlay .collapse-sidebar-label {
|
||||
|
||||
@ -67,25 +67,26 @@ do_action( 'customize_controls_print_scripts' );
|
||||
<body class="<?php echo esc_attr( $body_class ); ?>">
|
||||
<div class="wp-full-overlay expanded">
|
||||
<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
|
||||
|
||||
<div id="customize-header-actions" class="wp-full-overlay-header">
|
||||
<?php
|
||||
$save_text = $wp_customize->is_theme_active() ? __( 'Save & Publish' ) : __( 'Save & Activate' );
|
||||
submit_button( $save_text, 'primary', 'save', false );
|
||||
submit_button( $save_text, 'primary save', 'save', false );
|
||||
?>
|
||||
<span class="spinner"></span>
|
||||
<a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
|
||||
<?php _e( 'Cancel' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<?php
|
||||
$screenshot = $wp_customize->theme()->get_screenshot();
|
||||
$cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
|
||||
?>
|
||||
|
||||
<div class="wp-full-overlay-sidebar-content">
|
||||
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
|
||||
<div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
|
||||
<div class="customize-section-title">
|
||||
<div class="customize-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
|
||||
<span class="preview-notice"><?php
|
||||
/* translators: %s is the theme name in the Customize/Live Preview pane */
|
||||
echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
|
||||
|
||||
@ -94,11 +94,21 @@
|
||||
else
|
||||
statuses.hide();
|
||||
};
|
||||
|
||||
|
||||
var toggleFreeze = false;
|
||||
|
||||
// Support the .dropdown class to open/close complex elements
|
||||
this.container.on( 'click', '.dropdown', function( event ) {
|
||||
this.container.on( 'click focus', '.dropdown', function( event ) {
|
||||
event.preventDefault();
|
||||
control.container.toggleClass('open');
|
||||
|
||||
if (!toggleFreeze)
|
||||
control.container.toggleClass('open');
|
||||
|
||||
// Don't want to fire focus and click at same time
|
||||
toggleFreeze = true;
|
||||
setTimeout(function () {
|
||||
toggleFreeze = false;
|
||||
}, 400);
|
||||
});
|
||||
|
||||
this.setting.bind( update );
|
||||
@ -210,7 +220,11 @@
|
||||
});
|
||||
|
||||
// Bind tab switch events
|
||||
this.library.children('ul').on( 'click', 'li', function( event ) {
|
||||
this.library.children('ul').on( 'click keydown', 'li', function( event ) {
|
||||
|
||||
if ( event.type === 'keydown' && 13 !== event.which )
|
||||
return;
|
||||
|
||||
var id = $(this).data('customizeTab'),
|
||||
tab = control.tabs[ id ];
|
||||
|
||||
@ -225,7 +239,10 @@
|
||||
});
|
||||
|
||||
// Bind events to switch image urls.
|
||||
this.library.on( 'click', 'a', function( event ) {
|
||||
this.library.on( 'click keydown', 'a', function( event ) {
|
||||
if ( event.type === 'keydown' && 13 !== event.which ) // enter
|
||||
return;
|
||||
|
||||
var value = $(this).data('customizeImageValue');
|
||||
|
||||
if ( value ) {
|
||||
@ -814,11 +831,26 @@
|
||||
}());
|
||||
|
||||
// Temporary accordion code.
|
||||
$('.customize-section-title').click( function( event ) {
|
||||
var accordionFrozen = false;
|
||||
$('.customize-section-title').bind('click keydown', function( event ) {
|
||||
|
||||
if ( event.type === 'keydown' && 13 !== event.which ) // enter
|
||||
return;
|
||||
|
||||
var clicked = $( this ).parents( '.customize-section' );
|
||||
|
||||
if ( clicked.hasClass('cannot-expand') )
|
||||
if ( clicked.hasClass('cannot-expand') || accordionFrozen )
|
||||
return;
|
||||
|
||||
// Don't want to fire focus and click at same time
|
||||
accordionFrozen = true;
|
||||
setTimeout(function () {
|
||||
accordionFrozen = false;
|
||||
}, 400);
|
||||
|
||||
// Scroll up if on #customize-section-title_tagline
|
||||
if ('customize-section-title_tagline' === clicked.attr('id'))
|
||||
$('.wp-full-overlay-sidebar-content').scrollTop(0);
|
||||
|
||||
$( '.customize-section' ).not( clicked ).removeClass( 'open' );
|
||||
clicked.toggleClass( 'open' );
|
||||
@ -829,6 +861,21 @@
|
||||
$('#save').click( function( event ) {
|
||||
previewer.save();
|
||||
event.preventDefault();
|
||||
}).keydown( function( event ) {
|
||||
if ( 9 === event.which ) // tab
|
||||
return;
|
||||
if ( 13 === event.which ) // enter
|
||||
previewer.save();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('.back').keydown( function( event ) {
|
||||
if ( 9 === event.which ) // tab
|
||||
return;
|
||||
var thisHref = $(this).attr('href');
|
||||
if ( 13 === event.which ) // enter
|
||||
window.location = thisHref;
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('.collapse-sidebar').click( function( event ) {
|
||||
@ -948,6 +995,14 @@
|
||||
});
|
||||
|
||||
api.trigger( 'ready' );
|
||||
|
||||
// Make sure left column gets focus
|
||||
var topFocus = $('.back');
|
||||
topFocus.focus();
|
||||
setTimeout(function () {
|
||||
topFocus.focus();
|
||||
}, 200);
|
||||
|
||||
});
|
||||
|
||||
})( wp, jQuery );
|
||||
})( wp, jQuery );
|
||||
|
||||
@ -521,7 +521,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
|
||||
<div class="customize-control-content">
|
||||
<div class="dropdown preview-thumbnail">
|
||||
<div class="dropdown preview-thumbnail" tabindex="0">
|
||||
<div class="dropdown-content">
|
||||
<?php if ( empty( $src ) ): ?>
|
||||
<img style="display:none;" />
|
||||
@ -537,7 +537,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
|
||||
<div class="library">
|
||||
<ul>
|
||||
<?php foreach ( $this->tabs as $id => $tab ): ?>
|
||||
<li data-customize-tab='<?php echo esc_attr( $id ); ?>'>
|
||||
<li data-customize-tab='<?php echo esc_attr( $id ); ?>' tabindex='0'>
|
||||
<?php echo esc_html( $tab['label'] ); ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@ -80,7 +80,7 @@ class WP_Customize_Section {
|
||||
protected function render() {
|
||||
?>
|
||||
<li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
|
||||
<h3 class="customize-section-title" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
|
||||
<h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
|
||||
<ul class="customize-section-content">
|
||||
<?php
|
||||
foreach ( $this->controls as $control )
|
||||
|
||||
Loading…
Reference in New Issue
Block a user