From 8774b40dc873e31b442a6ced06f1403958476ebc Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 20 Oct 2015 20:14:51 +0000 Subject: [PATCH] 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 --- src/wp-admin/css/customize-controls.css | 83 ++++++++++++++++++- src/wp-admin/css/customize-nav-menus.css | 59 ++----------- src/wp-admin/css/customize-widgets.css | 74 ++--------------- src/wp-admin/js/customize-widgets.js | 30 ++++--- .../class-wp-customize-control.php | 15 ++-- .../class-wp-customize-widgets.php | 4 + 6 files changed, 126 insertions(+), 139 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 6b9d910f73..fe82af70b3 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -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; diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 2f986e6402..38716c6517 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -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, diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index c02fdd6c34..3f839cbd86 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -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; } diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js index aa84c6a5d0..5d2bedcbf8 100644 --- a/src/wp-admin/js/customize-widgets.js +++ b/src/wp-admin/js/customize-widgets.js @@ -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' ); } }, diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php index 3257b6c238..a0abfc574b 100644 --- a/src/wp-includes/class-wp-customize-control.php +++ b/src/wp-includes/class-wp-customize-control.php @@ -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; ?>
  • @@ -1312,7 +1312,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
    -
    +
    @@ -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 ); ?> - + + +

    __( '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,