Text improvements for screen readers in list table paginations.

Removes title attributes where reasonable and uses accessible hidden text.
Screen readers will now correctly read out all available information.

Props afercia, rianrietveld.
Fixes #32028.



git-svn-id: https://develop.svn.wordpress.org/trunk@32693 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Konstantin Obenland 2015-06-05 05:00:23 +00:00
parent 9747d9f611
commit 9dfbd00947
2 changed files with 20 additions and 14 deletions

View File

@ -544,7 +544,7 @@ th.asc a:focus span.sorting-indicator {
cursor: default;
height: 30px;
color: #555;
line-height: 30px;
line-height: 2.5;
font-size: 12px;
}
@ -563,8 +563,10 @@ th.asc a:focus span.sorting-indicator {
padding: 0 10px 3px;
background: #eee;
background: rgba( 0, 0, 0, 0.05 );
display: inline-block;
font-size: 16px;
font-weight: normal;
line-height: 1.3333;
}
.tablenav .tablenav-pages a:hover,
@ -1614,6 +1616,7 @@ div.action-links,
.tablenav-pages .pagination-links a {
padding: 8px 20px 11px;
display: inline;
font-size: 18px;
background: rgba(0, 0, 0, 0.05);
}

View File

@ -701,6 +701,9 @@ class WP_List_Table {
$page_links = array();
$total_pages_before = '<span class="paging-input">';
$total_pages_after = '</span>';
$disable_first = $disable_last = '';
if ( $current == 1 ) {
$disable_first = ' disabled';
@ -708,44 +711,44 @@ class WP_List_Table {
if ( $current == $total_pages ) {
$disable_last = ' disabled';
}
$page_links[] = sprintf( "<a class='%s' title='%s' href='%s'>%s</a>",
$page_links[] = sprintf( "<a class='%s' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
'first-page' . $disable_first,
esc_attr__( 'Go to the first page' ),
esc_url( remove_query_arg( 'paged', $current_url ) ),
__( 'First page' ),
'&laquo;'
);
$page_links[] = sprintf( "<a class='%s' title='%s' href='%s'>%s</a>",
$page_links[] = sprintf( "<a class='%s' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
'prev-page' . $disable_first,
esc_attr__( 'Go to the previous page' ),
esc_url( add_query_arg( 'paged', max( 1, $current-1 ), $current_url ) ),
__( 'Previous page' ),
'&lsaquo;'
);
if ( 'bottom' == $which ) {
$html_current_page = $current;
$html_current_page = $current;
$total_pages_before = '<span id="table-paging" class="paging-input">';
} else {
$html_current_page = sprintf( "%s<input class='current-page' id='current-page-selector' title='%s' type='text' name='paged' value='%s' size='%d' />",
'<label for="current-page-selector" class="screen-reader-text">' . __( 'Select Page' ) . '</label>',
esc_attr__( 'Current page' ),
$html_current_page = sprintf( "%s<input class='current-page' id='current-page-selector' type='text' name='paged' value='%s' size='%d' aria-describedby='table-paging' />",
'<label for="current-page-selector" class="screen-reader-text">' . __( 'Current Page' ) . '</label>',
$current,
strlen( $total_pages )
);
}
$html_total_pages = sprintf( "<span class='total-pages'>%s</span>", number_format_i18n( $total_pages ) );
$page_links[] = '<span class="paging-input">' . sprintf( _x( '%1$s of %2$s', 'paging' ), $html_current_page, $html_total_pages ) . '</span>';
$page_links[] = $total_pages_before . sprintf( _x( '%1$s of %2$s', 'paging' ), $html_current_page, $html_total_pages ) . $total_pages_after;
$page_links[] = sprintf( "<a class='%s' title='%s' href='%s'>%s</a>",
$page_links[] = sprintf( "<a class='%s' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
'next-page' . $disable_last,
esc_attr__( 'Go to the next page' ),
esc_url( add_query_arg( 'paged', min( $total_pages, $current+1 ), $current_url ) ),
__( 'Next page' ),
'&rsaquo;'
);
$page_links[] = sprintf( "<a class='%s' title='%s' href='%s'>%s</a>",
$page_links[] = sprintf( "<a class='%s' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
'last-page' . $disable_last,
esc_attr__( 'Go to the last page' ),
esc_url( add_query_arg( 'paged', $total_pages, $current_url ) ),
__( 'Last page' ),
'&raquo;'
);