Changeset 35304 for trunk/src/wp-includes/class-wp-customize-control.php

Timestamp:

10/20/2015 08:14:51 PM (10 years ago)

Author:

afercia

Message:

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.

File:

• trunk/src/wp-includes/class-wp-customize-control.php (modified) (3 diffs)

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

@@ -345 +345 @@
      */
     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;
 
@@ -1313 +1313 @@
                 </label>
                 <div class="container">
-                </div>              
+                </div>
             </div>
             <div class="actions">
@@ -1466 +1466 @@
      */
     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
     }