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.

git-svn-id: https://develop.svn.wordpress.org/trunk@35947 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2015-12-15 13:24:13 +00:00
parent 9249f66609
commit 8da5918fbc
2 changed files with 12 additions and 2 deletions

View File

@ -430,10 +430,10 @@ class WP_Terms_List_Table extends WP_List_Table {
$actions = array();
if ( current_user_can( $tax->cap->edit_terms ) ) {
$actions['edit'] = '<a href="' . esc_url( $edit_link ) . '">' . __( 'Edit' ) . '</a>';
$actions['inline hide-if-no-js'] = '<a href="#" class="editinline">' . __( 'Quick&nbsp;Edit' ) . '</a>';
$actions['inline hide-if-no-js'] = '<a href="#" class="editinline aria-button-if-js">' . __( 'Quick&nbsp;Edit' ) . '</a>';
}
if ( current_user_can( $tax->cap->delete_terms ) && $tag->term_id != $default_term )
$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>";
$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>";
if ( $tax->public )
$actions['view'] = '<a href="' . get_term_link( $tag ) . '">' . __( 'View' ) . '</a>';

View File

@ -897,10 +897,20 @@ $document.ready( function() {
}
};
// Add an ARIA role `button` to elements that behave like UI controls when JavaScript is on.
function aria_button_if_js() {
$( '.aria-button-if-js' ).attr( 'role', 'button' );
}
$( document ).ajaxComplete( function() {
aria_button_if_js();
});
window.wpResponsive.init();
setPinMenu();
currentMenuItemHasPopup();
makeNoticesDismissible();
aria_button_if_js();
$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 );
});