Make WordPress Core

Changeset 35947


Ignore:
Timestamp:
12/15/2015 01:24:13 PM (9 years ago)
Author:
afercia
Message:

Accessibility: Add an ARIA role button to links that behave like buttons when JavaScript is on.

Introduces a simple way to give a proper semantics of button to links that behave
like UI controls when JavaScript is on and behave like actual links when JavaScript
is off. First implementation on the Terms list table.

Patch prepared during WordCamp US 2015 Contributor Day.

Props mcapybara, garusky, takayukister.

See #26504.
Fixes #34867.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-wp-terms-list-table.php

    r35605 r35947  
    431431        if ( current_user_can( $tax->cap->edit_terms ) ) {
    432432            $actions['edit'] = '<a href="' . esc_url( $edit_link ) . '">' . __( 'Edit' ) . '</a>';
    433             $actions['inline hide-if-no-js'] = '<a href="#" class="editinline">' . __( 'Quick&nbsp;Edit' ) . '</a>';
     433            $actions['inline hide-if-no-js'] = '<a href="#" class="editinline aria-button-if-js">' . __( 'Quick&nbsp;Edit' ) . '</a>';
    434434        }
    435435        if ( current_user_can( $tax->cap->delete_terms ) && $tag->term_id != $default_term )
    436             $actions['delete'] = "<a class='delete-tag' href='" . wp_nonce_url( "edit-tags.php?action=delete&amp;taxonomy=$taxonomy&amp;tag_ID=$tag->term_id", 'delete-tag_' . $tag->term_id ) . "'>" . __( 'Delete' ) . "</a>";
     436            $actions['delete'] = "<a class='delete-tag aria-button-if-js' href='" . wp_nonce_url( "edit-tags.php?action=delete&amp;taxonomy=$taxonomy&amp;tag_ID=$tag->term_id", 'delete-tag_' . $tag->term_id ) . "'>" . __( 'Delete' ) . "</a>";
    437437        if ( $tax->public )
    438438            $actions['view'] = '<a href="' . get_term_link( $tag ) . '">' . __( 'View' ) . '</a>';
  • trunk/src/wp-admin/js/common.js

    r35681 r35947  
    898898    };
    899899
     900    // Add an ARIA role `button` to elements that behave like UI controls when JavaScript is on.
     901    function aria_button_if_js() {
     902        $( '.aria-button-if-js' ).attr( 'role', 'button' );
     903    }
     904
     905    $( document ).ajaxComplete( function() {
     906        aria_button_if_js();
     907    });
     908
    900909    window.wpResponsive.init();
    901910    setPinMenu();
    902911    currentMenuItemHasPopup();
    903912    makeNoticesDismissible();
     913    aria_button_if_js();
    904914
    905915    $document.on( 'wp-pin-menu wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu wp-collapse-menu.pin-menu wp-scroll-start.pin-menu', setPinMenu );
Note: See TracChangeset for help on using the changeset viewer.