Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-27 06:42:56 +02:00
Code Issues Projects Releases Wiki Activity

Keyboard accessibility for the theme customizer. props lessbloat, jorbin, JustinSainton. fixes #21283.

Browse Source 
git-svn-id: http://core.svn.wordpress.org/trunk@22400 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2012-11-06 14:47:25 +00:00
parent ae96b842f9
commit abe7ee8ec8
6 changed files with 89 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wp-admin/css/customize-controls.css
View File

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

14
wp-admin/css/wp-admin.css
View File

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

9
wp-admin/customize.php
View File

@ -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 &amp; Publish' ) : __( 'Save &amp; 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>' );

71
wp-admin/js/customize-controls.js
View File

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

4
wp-includes/class-wp-customize-control.php
View File

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

2
wp-includes/class-wp-customize-section.php
View File

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