Accessibility: List Tables: use `aria-current` for the views current link.

The `aria-current` attribute is a simple, effective way to help assistive
technologies users orientate themselves within a list of items. Continues the 
introduction in core of the `aria-current` attribute after [41359] and [41371].

Props joedolson, flixos90, afercia.
Fixes #32399.

Built from https://develop.svn.wordpress.org/trunk@41683


git-svn-id: http://core.svn.wordpress.org/trunk@41517 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2017-10-02 19:44:47 +00:00
parent c56dbad284
commit 6a6795382a
11 changed files with 58 additions and 33 deletions

View File

@ -246,7 +246,11 @@ class WP_Comments_List_Table extends WP_List_Table {
$link = add_query_arg( 'comment_type', $comment_type, $link ); $link = add_query_arg( 'comment_type', $comment_type, $link );
foreach ( $stati as $status => $label ) { foreach ( $stati as $status => $label ) {
$class = ( $status === $comment_status ) ? ' class="current"' : ''; $current_link_attributes = '';
if ( $status === $comment_status ) {
$current_link_attributes = ' class="current" aria-current="page"';
}
if ( !isset( $num_comments->$status ) ) if ( !isset( $num_comments->$status ) )
$num_comments->$status = 10; $num_comments->$status = 10;
@ -258,7 +262,7 @@ class WP_Comments_List_Table extends WP_List_Table {
if ( !empty( $_REQUEST['s'] ) ) if ( !empty( $_REQUEST['s'] ) )
$link = add_query_arg( 's', esc_attr( wp_unslash( $_REQUEST['s'] ) ), $link ); $link = add_query_arg( 's', esc_attr( wp_unslash( $_REQUEST['s'] ) ), $link );
*/ */
$status_links[ $status ] = "<a href='$link'$class>" . sprintf( $status_links[ $status ] = "<a href='$link'$current_link_attributes>" . sprintf(
translate_nooped_plural( $label, $num_comments->$status ), translate_nooped_plural( $label, $num_comments->$status ),
sprintf( '<span class="%s-count">%s</span>', sprintf( '<span class="%s-count">%s</span>',
( 'moderated' === $status ) ? 'pending' : $status, ( 'moderated' === $status ) ? 'pending' : $status,

View File

@ -308,7 +308,7 @@ class WP_MS_Themes_List_Table extends WP_List_Table {
if ( 'search' != $type ) { if ( 'search' != $type ) {
$status_links[$type] = sprintf( "<a href='%s'%s>%s</a>", $status_links[$type] = sprintf( "<a href='%s'%s>%s</a>",
esc_url( add_query_arg('theme_status', $type, $url) ), esc_url( add_query_arg('theme_status', $type, $url) ),
( $type === $status ) ? ' class="current"' : '', ( $type === $status ) ? ' class="current" aria-current="page"' : '',
sprintf( $text, number_format_i18n( $count ) ) sprintf( $text, number_format_i18n( $count ) )
); );
} }

View File

@ -134,11 +134,11 @@ class WP_MS_Users_List_Table extends WP_List_Table {
$super_admins = get_super_admins(); $super_admins = get_super_admins();
$total_admins = count( $super_admins ); $total_admins = count( $super_admins );
$class = $role != 'super' ? ' class="current"' : ''; $current_link_attributes = $role !== 'super' ? ' class="current" aria-current="page"' : '';
$role_links = array(); $role_links = array();
$role_links['all'] = "<a href='" . network_admin_url('users.php') . "'$class>" . sprintf( _nx( 'All <span class="count">(%s)</span>', 'All <span class="count">(%s)</span>', $total_users, 'users' ), number_format_i18n( $total_users ) ) . '</a>'; $role_links['all'] = "<a href='" . network_admin_url( 'users.php' ) . "'$current_link_attributes>" . sprintf( _nx( 'All <span class="count">(%s)</span>', 'All <span class="count">(%s)</span>', $total_users, 'users' ), number_format_i18n( $total_users ) ) . '</a>';
$class = $role === 'super' ? ' class="current"' : ''; $current_link_attributes = $role === 'super' ? ' class="current" aria-current="page"' : '';
$role_links['super'] = "<a href='" . network_admin_url('users.php?role=super') . "'$class>" . sprintf( _n( 'Super Admin <span class="count">(%s)</span>', 'Super Admins <span class="count">(%s)</span>', $total_admins ), number_format_i18n( $total_admins ) ) . '</a>'; $role_links['super'] = "<a href='" . network_admin_url( 'users.php?role=super' ) . "'$current_link_attributes>" . sprintf( _n( 'Super Admin <span class="count">(%s)</span>', 'Super Admins <span class="count">(%s)</span>', $total_admins ), number_format_i18n( $total_admins ) ) . '</a>';
return $role_links; return $role_links;
} }

View File

@ -286,9 +286,9 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
$display_tabs = array(); $display_tabs = array();
foreach ( (array) $tabs as $action => $text ) { foreach ( (array) $tabs as $action => $text ) {
$class = ( $action === $tab ) ? ' current' : ''; $current_link_attributes = ( $action === $tab ) ? ' class="current" aria-current="page"' : '';
$href = self_admin_url('plugin-install.php?tab=' . $action); $href = self_admin_url('plugin-install.php?tab=' . $action);
$display_tabs['plugin-install-'.$action] = "<a href='$href' class='$class'>$text</a>"; $display_tabs['plugin-install-'.$action] = "<a href='$href'$current_link_attributes>$text</a>";
} }
// No longer a real tab. // No longer a real tab.
unset( $display_tabs['plugin-install-upload'] ); unset( $display_tabs['plugin-install-upload'] );

View File

@ -434,7 +434,7 @@ class WP_Plugins_List_Table extends WP_List_Table {
if ( 'search' !== $type ) { if ( 'search' !== $type ) {
$status_links[$type] = sprintf( "<a href='%s'%s>%s</a>", $status_links[$type] = sprintf( "<a href='%s'%s>%s</a>",
add_query_arg('plugin_status', $type, 'plugins.php'), add_query_arg('plugin_status', $type, 'plugins.php'),
( $type === $status ) ? ' class="current"' : '', ( $type === $status ) ? ' class="current" aria-current="page"' : '',
sprintf( $text, number_format_i18n( $count ) ) sprintf( $text, number_format_i18n( $count ) )
); );
} }

View File

@ -231,18 +231,23 @@ class WP_Posts_List_Table extends WP_List_Table {
protected function get_edit_link( $args, $label, $class = '' ) { protected function get_edit_link( $args, $label, $class = '' ) {
$url = add_query_arg( $args, 'edit.php' ); $url = add_query_arg( $args, 'edit.php' );
$class_html = ''; $class_html = $aria_current = '';
if ( ! empty( $class ) ) { if ( ! empty( $class ) ) {
$class_html = sprintf( $class_html = sprintf(
' class="%s"', ' class="%s"',
esc_attr( $class ) esc_attr( $class )
); );
if ( 'current' === $class ) {
$aria_current = ' aria-current="page"';
}
} }
return sprintf( return sprintf(
'<a href="%s"%s>%s</a>', '<a href="%s"%s%s>%s</a>',
esc_url( $url ), esc_url( $url ),
$class_html, $class_html,
$aria_current,
$label $label
); );
} }

View File

@ -170,9 +170,9 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
$display_tabs = array(); $display_tabs = array();
foreach ( (array) $tabs as $action => $text ) { foreach ( (array) $tabs as $action => $text ) {
$class = ( $action === $tab ) ? ' class="current"' : ''; $current_link_attributes = ( $action === $tab ) ? ' class="current" aria-current="page"' : '';
$href = self_admin_url('theme-install.php?tab=' . $action); $href = self_admin_url('theme-install.php?tab=' . $action);
$display_tabs['theme-install-'.$action] = "<a href='$href'$class>$text</a>"; $display_tabs['theme-install-'.$action] = "<a href='$href'$current_link_attributes>$text</a>";
} }
return $display_tabs; return $display_tabs;

View File

@ -196,23 +196,24 @@ class WP_Users_List_Table extends WP_List_Table {
$avail_roles = array(); $avail_roles = array();
} }
$class = empty($role) ? ' class="current"' : ''; $current_link_attributes = empty( $role ) ? ' class="current" aria-current="page"' : '';
$role_links = array(); $role_links = array();
if ( $count_users ) { if ( $count_users ) {
$role_links['all'] = "<a href='$url'$class>" . sprintf( _nx( 'All <span class="count">(%s)</span>', 'All <span class="count">(%s)</span>', $total_users, 'users' ), number_format_i18n( $total_users ) ) . '</a>'; $role_links['all'] = "<a href='$url'$current_link_attributes>" . sprintf( _nx( 'All <span class="count">(%s)</span>', 'All <span class="count">(%s)</span>', $total_users, 'users' ), number_format_i18n( $total_users ) ) . '</a>';
} else { } else {
$role_links['all'] = "<a href='$url'$class>" . _x( 'All', 'users' ) . '</a>'; $role_links['all'] = "<a href='$url'$current_link_attributes>" . _x( 'All', 'users' ) . '</a>';
} }
foreach ( $wp_roles->get_names() as $this_role => $name ) { foreach ( $wp_roles->get_names() as $this_role => $name ) {
if ( $count_users && !isset($avail_roles[$this_role]) ) { if ( $count_users && !isset($avail_roles[$this_role]) ) {
continue; continue;
} }
$class = ''; $current_link_attributes = '';
if ( $this_role === $role ) { if ( $this_role === $role ) {
$class = ' class="current"'; $current_link_attributes = ' class="current" aria-current="page"';
} }
$name = translate_user_role( $name ); $name = translate_user_role( $name );
@ -220,15 +221,15 @@ class WP_Users_List_Table extends WP_List_Table {
/* translators: User role name with count */ /* translators: User role name with count */
$name = sprintf( __('%1$s <span class="count">(%2$s)</span>'), $name, number_format_i18n( $avail_roles[$this_role] ) ); $name = sprintf( __('%1$s <span class="count">(%2$s)</span>'), $name, number_format_i18n( $avail_roles[$this_role] ) );
} }
$role_links[$this_role] = "<a href='" . esc_url( add_query_arg( 'role', $this_role, $url ) ) . "'$class>$name</a>"; $role_links[$this_role] = "<a href='" . esc_url( add_query_arg( 'role', $this_role, $url ) ) . "'$current_link_attributes>$name</a>";
} }
if ( ! $count_users || ! empty( $avail_roles['none' ] ) ) { if ( ! $count_users || ! empty( $avail_roles['none' ] ) ) {
$class = ''; $current_link_attributes = '';
if ( 'none' === $role ) { if ( 'none' === $role ) {
$class = ' class="current"'; $current_link_attributes = ' class="current" aria-current="page"';
} }
$name = __( 'No role' ); $name = __( 'No role' );
@ -236,7 +237,7 @@ class WP_Users_List_Table extends WP_List_Table {
/* translators: User role name with count */ /* translators: User role name with count */
$name = sprintf( __('%1$s <span class="count">(%2$s)</span>'), $name, number_format_i18n( $avail_roles['none' ] ) ); $name = sprintf( __('%1$s <span class="count">(%2$s)</span>'), $name, number_format_i18n( $avail_roles['none' ] ) );
} }
$role_links['none'] = "<a href='" . esc_url( add_query_arg( 'role', 'none', $url ) ) . "'$class>$name</a>"; $role_links['none'] = "<a href='" . esc_url( add_query_arg( 'role', 'none', $url ) ) . "'$current_link_attributes>$name</a>";
} }

View File

@ -1539,7 +1539,10 @@ themes.view.InstallerSearch = themes.view.Search.extend({
request.tag = [ value.slice( 4 ) ]; request.tag = [ value.slice( 4 ) ];
} }
$( '.filter-links li > a.current' ).removeClass( 'current' ); $( '.filter-links li > a.current' )
.removeClass( 'current' )
.removeAttr( 'aria-current' );
$( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' ); $( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' ); $( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
@ -1663,8 +1666,13 @@ themes.view.Installer = themes.view.Appearance.extend({
// Track sorting so we can restore the correct tab when closing preview. // Track sorting so we can restore the correct tab when closing preview.
themes.router.selectedTab = sort; themes.router.selectedTab = sort;
$( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass ); $( '.filter-links li > a, .theme-filter' )
$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass ); .removeClass( this.activeClass )
.removeAttr( 'aria-current' );
$( '[data-sort="' + sort + '"]' )
.addClass( this.activeClass )
.attr( 'aria-current', 'page' );
if ( 'favorites' === sort ) { if ( 'favorites' === sort ) {
$( 'body' ).addClass( 'show-favorites-form' ); $( 'body' ).addClass( 'show-favorites-form' );
@ -1686,8 +1694,12 @@ themes.view.Installer = themes.view.Appearance.extend({
return; return;
} }
$( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass ); $( '.filter-links li > a, .theme-section' )
$el.addClass( this.activeClass ); .removeClass( this.activeClass )
.removeAttr( 'aria-current' );
$el
.addClass( this.activeClass )
.attr( 'aria-current', 'page' );
if ( ! filter ) { if ( ! filter ) {
return; return;
@ -1725,7 +1737,10 @@ themes.view.Installer = themes.view.Appearance.extend({
} }
$( 'body' ).addClass( 'filters-applied' ); $( 'body' ).addClass( 'filters-applied' );
$( '.filter-links li > a.current' ).removeClass( 'current' ); $( '.filter-links li > a.current' )
.removeClass( 'current' )
.removeAttr( 'aria-current' );
filteringBy.empty(); filteringBy.empty();
_.each( tags, function( tag ) { _.each( tags, function( tag ) {

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.9-alpha-41682'; $wp_version = '4.9-alpha-41683';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.