Index: src/wp-admin/css/customize-controls.css =================================================================== --- src/wp-admin/css/customize-controls.css (revision 35241) +++ src/wp-admin/css/customize-controls.css (working copy) @@ -615,9 +615,10 @@ /* Style for custom settings */ -/* +/** * Dropdowns */ + .accordion-section .dropdown { float: left; display: block; @@ -698,6 +699,7 @@ * 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 @@ -webkit-overflow-scrolling: touch; } -/** Media controls **/ +/* Media controls */ .customize-control-media .current, .customize-control-upload .current, @@ -995,6 +997,7 @@ /** * Themes */ + @-webkit-keyframes customize-reload { 0% { opacity: 0; } 100% { opacity: 1; } @@ -1228,6 +1231,82 @@ 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; Index: src/wp-admin/css/customize-nav-menus.css =================================================================== --- src/wp-admin/css/customize-nav-menus.css (revision 35241) +++ src/wp-admin/css/customize-nav-menus.css (working copy) @@ -90,18 +90,10 @@ 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; -} +/** + * Menu items reordering styles + */ -.customize-control-nav_menu .reorder, -.reordering .customize-control-nav_menu .reorder-done { - display: inline-block; - padding: 5px 8px; -} - .menu-item-reorder-nav { display: none; background-color: #fff; @@ -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, Index: src/wp-admin/css/customize-widgets.css =================================================================== --- src/wp-admin/css/customize-widgets.css (revision 35241) +++ src/wp-admin/css/customize-widgets.css (working copy) @@ -117,45 +117,9 @@ } /** -* Widget reordering styles -**/ + * 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; -} - #customize-theme-controls .widget-reorder-nav { display: none; float: right; @@ -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 @@ * Widget Icon styling * No plurals in naming. * Ordered from lowest to highest specificity. - **/ + */ + #available-widgets .widget-title { position: relative; } Index: src/wp-admin/js/customize-widgets.js =================================================================== --- src/wp-admin/js/customize-widgets.js (revision 35241) +++ src/wp-admin/js/customize-widgets.js (working copy) @@ -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,10 +1800,8 @@ _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; @@ -1814,8 +1808,10 @@ } 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' ); } }, Index: src/wp-includes/class-wp-customize-control.php =================================================================== --- src/wp-includes/class-wp-customize-control.php (revision 35241) +++ src/wp-includes/class-wp-customize-control.php (working copy) @@ -344,7 +344,7 @@ * @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; ?>
  • @@ -1305,7 +1305,7 @@
    -
    +
    @@ -1458,15 +1458,16 @@ * @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,