Ticket #33260: 33260.6.diff

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

@@ -1644 +1644 @@
                         /**
                          * 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 );
                         } );
                 },
@@ -1659 +1655 @@
                 _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() {
                                 if ( self.$sectionContent.hasClass( 'reordering' ) ) {
                                         return;
                                 }
 
                                 if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
+                                        $( this ).attr( 'aria-expanded', 'true' );
                                         api.Widgets.availableWidgetsPanel.open( self );
                                 } else {
+                                        $( this ).attr( 'aria-expanded', 'false' );
                                         api.Widgets.availableWidgetsPanel.close();
                                 }
                         } );
@@ -1724 +1718 @@
                  * @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' );
+
                         showOrHide = Boolean( showOrHide );
 
                         if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
@@ -1738 +1735 @@
                                         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 );
                         } 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 );
                         }
                 },
 

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

@@ -1456 +1456 @@
          * @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-label="<?php esc_attr_e( 'Add or remove widgets' ); ?>" 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' ); ?>" 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,