Ticket #33327: 33327.2.diff

src/wp-admin/css/customize-controls.css

@@ -611 +611 @@
 
 /* Style for custom settings */
 
-/*
+/**
  * Dropdowns
  */
+
 .accordion-section .dropdown {
         float: left;
         display: block;
@@ -694 +695 @@
  * iOS can't scroll iframes,
  * instead it expands the iframe size to match the size of the content
  */
+
 .ios .wp-full-overlay {
         position: relative;
 }
@@ -706 +708 @@
         -webkit-overflow-scrolling: touch;
 }
 
-/** Media controls **/
+/* Media controls */
 
 .customize-control-media .current,
 .customize-control-upload .current,
@@ -991 +993 @@
 /**
  * Themes
  */
+
 @-webkit-keyframes customize-reload {
         0%   { opacity: 0; }
         100% { opacity: 1; }
@@ -1224 +1227 @@
         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;

src/wp-admin/css/customize-nav-menus.css

@@ -90 +90 @@
         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 +102 @@
         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 +347 @@
 
 .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 +465 @@
         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 +483 @@
         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,

src/wp-admin/css/customize-widgets.css

@@ -117 +117 @@
 }
 
 /**
-* 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 +177 @@
         cursor: default;
 }
 
-#customize-theme-controls  .move-widget-area {
+#customize-theme-controls .move-widget-area {
         display: none;
         background: #fff;
         border: 1px solid #dedede;
@@ -288 +252 @@
         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 +393 @@
  * Widget Icon styling
  * No plurals in naming.
  * Ordered from lowest to highest specificity.
- **/
+ */
+
 #available-widgets .widget-title {
         position: relative;
 }

src/wp-admin/js/customize-widgets.js

@@ -1718 +1718 @@
                         /**
                          * 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 );
                         } );
                 },
@@ -1733 +1729 @@
                 _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;
@@ -1743 +1737 @@
                                 }
 
                                 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();
                                 }
                         } );
@@ -1798 +1794 @@
                  * @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' ) ) {
@@ -1812 +1812 @@
                                         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' );
                         }
                 },
 

src/wp-includes/class-wp-customize-control.php

@@ -1305 +1305 @@
                                         </span>
                                 </label>
                                 <div class="container">
-                                </div>                          
+                                </div>
                         </div>
                         <div class="actions">
                                 <?php if ( current_user_can( 'upload_files' ) ): ?>
@@ -1458 +1458 @@
          * @access public
          */
         public function render_content() {
+                $id = 'reorder-widgets-desc-' . str_replace( '[', '-', str_replace( ']', '', $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
         }
 

src/wp-includes/class-wp-customize-widgets.php

@@ -655 +655 @@
                                 'error'            => __( 'An error has occurred. Please reload the page and try again.' ),
                                 'widgetMovedUp'    => __( 'Widget moved up' ),
                                 'widgetMovedDown'  => __( 'Widget moved down' ),
+                                'reorderModeOn'    => __( 'Reorder mode enabled' ),
+                                'reorderModeOff'   => __( 'Reorder mode closed' ),
+                                'reorderLabelOn'   => esc_attr__( 'Reorder' ),
+                                'reorderLabelOff'  => esc_attr__( 'Close reorder mode' ),
                         ),
                         'tpl' => array(
                                 'widgetReorderNav' => $widget_reorder_nav_tpl,