Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.
For accessibility, UI controls should preferably be native controls. Adds ARIA attributes and labels to improve accessibility and pair these buttons with the ones in the Menu Customizer. Props obenland, TomHarrigan, sanket.parmar, metodiew, afercia. Fixes #33327. git-svn-id: https://develop.svn.wordpress.org/trunk@35304 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
parent
11f4d7bb68
commit
8774b40dc8
|
|
@ -615,9 +615,10 @@ p.customize-section-description {
|
|||
|
||||
/* Style for custom settings */
|
||||
|
||||
/*
|
||||
/**
|
||||
* Dropdowns
|
||||
*/
|
||||
|
||||
.accordion-section .dropdown {
|
||||
float: left;
|
||||
display: block;
|
||||
|
|
@ -698,6 +699,7 @@ p.customize-section-description {
|
|||
* iOS can't scroll iframes,
|
||||
* instead it expands the iframe size to match the size of the content
|
||||
*/
|
||||
|
||||
.ios .wp-full-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -710,7 +712,7 @@ p.customize-section-description {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/** Media controls **/
|
||||
/* Media controls */
|
||||
|
||||
.customize-control-media .current,
|
||||
.customize-control-upload .current,
|
||||
|
|
@ -995,6 +997,7 @@ p.customize-section-description {
|
|||
/**
|
||||
* Themes
|
||||
*/
|
||||
|
||||
@-webkit-keyframes customize-reload {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
|
|
@ -1228,6 +1231,82 @@ body.cheatin p {
|
|||
margin: 25px 0 20px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Widgets and Menus common styles
|
||||
*/
|
||||
|
||||
/* higher specificity than .wp-core-ui .button-secondary */
|
||||
#customize-theme-controls .add-new-widget,
|
||||
#customize-theme-controls .add-new-menu-item {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reordering .add-new-widget,
|
||||
.reordering .add-new-menu-item {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
|
||||
}
|
||||
|
||||
.add-new-widget:before,
|
||||
.add-new-menu-item:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Reordering */
|
||||
.reorder-toggle {
|
||||
float: right;
|
||||
padding: 5px 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.reorder-toggle:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.reorder,
|
||||
.reordering .reorder-done {
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.reorder-done,
|
||||
.reordering .reorder {
|
||||
display: none;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.reorder-toggle:hover .reorder-done,
|
||||
.reorder-toggle:active .reorder-done,
|
||||
.reorder-toggle:focus .reorder-done {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
.customize-controls-preview-toggle {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -90,17 +90,9 @@
|
|||
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
/* Menu-item reordering nav. */
|
||||
.reordering .customize-control-nav_menu .reorder,
|
||||
.customize-control-nav_menu .reorder-done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-control-nav_menu .reorder,
|
||||
.reordering .customize-control-nav_menu .reorder-done {
|
||||
display: inline-block;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
/**
|
||||
* Menu items reordering styles
|
||||
*/
|
||||
|
||||
.menu-item-reorder-nav {
|
||||
display: none;
|
||||
|
|
@ -110,12 +102,6 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls .reordering .add-new-menu-item {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.menu-item-reorder-nav button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -361,10 +347,10 @@
|
|||
|
||||
.wp-customizer button:focus .toggle-indicator:after {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
@ -479,9 +465,10 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add-menu-items mode.
|
||||
/**
|
||||
* Add-menu-items mode
|
||||
*/
|
||||
|
||||
.wp-full-overlay-main {
|
||||
right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
|
||||
width: 100%;
|
||||
|
|
@ -496,34 +483,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Add-new button. */
|
||||
#customize-theme-controls .add-new-menu-item {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-new-menu-item:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.adding-menu-items .add-new-menu-item,
|
||||
.adding-menu-items .add-new-menu-item:hover,
|
||||
.add-menu-toggle.open,
|
||||
|
|
|
|||
|
|
@ -117,44 +117,8 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* Widget reordering styles
|
||||
**/
|
||||
|
||||
.reorder-toggle {
|
||||
float: right;
|
||||
padding: 5px 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.reorder-toggle:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.reorder-done,
|
||||
.reordering .reorder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reordering .reorder-done {
|
||||
display: block;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.reordering .reorder-done:hover,
|
||||
.reordering .reorder-done:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
#customize-theme-controls .reordering .add-new-widget {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
* Widget reordering styles
|
||||
*/
|
||||
|
||||
#customize-theme-controls .widget-reorder-nav {
|
||||
display: none;
|
||||
|
|
@ -213,7 +177,7 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
#customize-theme-controls .move-widget-area {
|
||||
#customize-theme-controls .move-widget-area {
|
||||
display: none;
|
||||
background: #fff;
|
||||
border: 1px solid #dedede;
|
||||
|
|
@ -288,42 +252,15 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Styles for new widget addition panel
|
||||
*/
|
||||
|
||||
.wp-full-overlay-main {
|
||||
right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#customize-theme-controls .add-new-widget {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-new-widget:before {
|
||||
content: "\f132";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
font: normal 20px/1 dashicons;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body.adding-widget .add-new-widget,
|
||||
body.adding-widget .add-new-widget:hover {
|
||||
background: #eee;
|
||||
|
|
@ -456,7 +393,8 @@ body.adding-widget #customize-preview {
|
|||
* Widget Icon styling
|
||||
* No plurals in naming.
|
||||
* Ordered from lowest to highest specificity.
|
||||
**/
|
||||
*/
|
||||
|
||||
#available-widgets .widget-title {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1789,11 +1789,7 @@
|
|||
/**
|
||||
* Keyboard-accessible reordering
|
||||
*/
|
||||
this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
|
||||
if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
|
||||
return;
|
||||
}
|
||||
|
||||
this.container.find( '.reorder-toggle' ).on( 'click', function() {
|
||||
self.toggleReordering( ! self.isReordering );
|
||||
} );
|
||||
},
|
||||
|
|
@ -1804,18 +1800,18 @@
|
|||
_setupAddition: function() {
|
||||
var self = this;
|
||||
|
||||
this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
|
||||
if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
|
||||
return;
|
||||
}
|
||||
this.container.find( '.add-new-widget' ).on( 'click', function() {
|
||||
var addNewWidgetBtn = $( this );
|
||||
|
||||
if ( self.$sectionContent.hasClass( 'reordering' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
|
||||
addNewWidgetBtn.attr( 'aria-expanded', 'true' );
|
||||
api.Widgets.availableWidgetsPanel.open( self );
|
||||
} else {
|
||||
addNewWidgetBtn.attr( 'aria-expanded', 'false' );
|
||||
api.Widgets.availableWidgetsPanel.close();
|
||||
}
|
||||
} );
|
||||
|
|
@ -1869,6 +1865,10 @@
|
|||
* @todo We should have a reordering state instead and rename this to onChangeReordering
|
||||
*/
|
||||
toggleReordering: function( showOrHide ) {
|
||||
var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
|
||||
reorderBtn = this.container.find( '.reorder-toggle' ),
|
||||
widgetsTitle = this.$sectionContent.find( '.widget-title' );
|
||||
|
||||
showOrHide = Boolean( showOrHide );
|
||||
|
||||
if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
|
||||
|
|
@ -1883,10 +1883,16 @@
|
|||
formControl.collapse();
|
||||
} );
|
||||
|
||||
this.$sectionContent.find( '.first-widget .move-widget' ).focus();
|
||||
this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
|
||||
addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
|
||||
reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
|
||||
wp.a11y.speak( l10n.reorderModeOn );
|
||||
// Hide widget titles while reordering: title is already in the reorder controls.
|
||||
widgetsTitle.attr( 'aria-hidden', 'true' );
|
||||
} else {
|
||||
this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
|
||||
addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
|
||||
reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
|
||||
wp.a11y.speak( l10n.reorderModeOff );
|
||||
widgetsTitle.attr( 'aria-hidden', 'false' );
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -344,7 +344,7 @@ class WP_Customize_Control {
|
|||
* @since 3.4.0
|
||||
*/
|
||||
protected function render() {
|
||||
$id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
|
||||
$id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
$class = 'customize-control customize-control-' . $this->type;
|
||||
|
||||
?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
|
||||
|
|
@ -1312,7 +1312,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
|
|||
</span>
|
||||
</label>
|
||||
<div class="container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<?php if ( current_user_can( 'upload_files' ) ): ?>
|
||||
|
|
@ -1465,15 +1465,16 @@ class WP_Widget_Area_Customize_Control extends WP_Customize_Control {
|
|||
* @access public
|
||||
*/
|
||||
public function render_content() {
|
||||
$id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
?>
|
||||
<span class="button-secondary add-new-widget" tabindex="0">
|
||||
<button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
|
||||
<?php _e( 'Add a Widget' ); ?>
|
||||
</span>
|
||||
|
||||
<span class="reorder-toggle" tabindex="0">
|
||||
</button>
|
||||
<button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
|
||||
<span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
|
||||
<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -674,6 +674,10 @@ final class WP_Customize_Widgets {
|
|||
'widgetMovedUp' => __( 'Widget moved up' ),
|
||||
'widgetMovedDown' => __( 'Widget moved down' ),
|
||||
'noAreasRendered' => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
|
||||
'reorderModeOn' => __( 'Reorder mode enabled' ),
|
||||
'reorderModeOff' => __( 'Reorder mode closed' ),
|
||||
'reorderLabelOn' => esc_attr__( 'Reorder widgets' ),
|
||||
'reorderLabelOff' => esc_attr__( 'Close reorder mode' ),
|
||||
),
|
||||
'tpl' => array(
|
||||
'widgetReorderNav' => $widget_reorder_nav_tpl,
|
||||
|
|
|
|||
Loading…
Reference in New Issue