Make WordPress Core


Ignore:
Timestamp:
10/20/2015 08:14:51 PM (9 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-control.php

    r35275 r35304  
    345345     */
    346346    protected function render() {
    347         $id    = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
     347        $id    = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
    348348        $class = 'customize-control customize-control-' . $this->type;
    349349
     
    13131313                </label>
    13141314                <div class="container">
    1315                 </div>             
     1315                </div>
    13161316            </div>
    13171317            <div class="actions">
     
    14661466     */
    14671467    public function render_content() {
     1468        $id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
    14681469        ?>
    1469         <span class="button-secondary add-new-widget" tabindex="0">
     1470        <button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
    14701471            <?php _e( 'Add a Widget' ); ?>
    1471         </span>
    1472 
    1473         <span class="reorder-toggle" tabindex="0">
     1472        </button>
     1473        <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
    14741474            <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
    14751475            <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
    1476         </span>
     1476        </button>
     1477        <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>
    14771478        <?php
    14781479    }
Note: See TracChangeset for help on using the changeset viewer.