sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Better color contrast for the tables pagination links.

Browse Source 
By making the pagination links use the default style for buttons, color contrast
is improved and the CSS is simplified. Improves consistency with other UI controls.
Also, slightly increases the white space below the pagination links.

Props benoitchantre, afercia.
Fixes #41858.


git-svn-id: https://develop.svn.wordpress.org/trunk@43019 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2018-04-29 16:24:41 +00:00
parent b3836882ef
commit 75ca3d6386
4 changed files with 30 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-admin/css/colors/_admin.scss
View File

@ -84,9 +84,7 @@ input[type=radio]:checked:before {
/* List tables */
.wrap .add-new-h2:hover, /* deprecated */
.wrap .page-title-action:hover,
.tablenav .tablenav-pages a:hover,
.tablenav .tablenav-pages a:focus {
.wrap .page-title-action:hover {
color: $menu-text;
background-color: $menu-background;
}

96
src/wp-admin/css/list-tables.css
View File

@ -610,15 +610,9 @@ th.asc a:focus span.sorting-indicator {
visibility: visible;
}
/* Bulk Actions */
.tablenav-pages a,
.tablenav-pages-navspan {
font-weight: 600;
padding: 0 2px;
}
.tablenav-pages .current-page {
margin: 0 2px 0 0;
padding-top: 5px;
padding-bottom: 5px;
font-size: 13px;
text-align: center;
@ -632,12 +626,6 @@ th.asc a:focus span.sorting-indicator {
margin-left: 2px;
}
.tablenav a.button,
.tablenav a.button-secondary {
display: block;
margin: 3px 8px 0 0;
}
.tablenav {
clear: both;
height: 30px;
@ -651,10 +639,7 @@ th.asc a:focus span.sorting-indicator {
.tablenav .tablenav-pages {
float: right;
height: 28px;
margin-top: 3px;
cursor: default;
color: #555;
margin: 3px 0 9px;
}
.tablenav .no-pages,
@ -662,49 +647,26 @@ th.asc a:focus span.sorting-indicator {
display: none;
}
.tablenav .tablenav-pages a,
.tablenav-pages span.current {
text-decoration: none;
padding: 3px 6px;
}
.tablenav .tablenav-pages a,
.tablenav-pages-navspan {
.tablenav .tablenav-pages .button,
.tablenav .tablenav-pages .tablenav-pages-navspan {
display: inline-block;
min-width: 17px;
border: 1px solid #ccc; /* same color as buttons border */
padding: 3px 5px 7px;
background: #e5e5e5;
vertical-align: baseline;
min-width: 28px;
min-height: 28px;
margin: 0;
padding: 0 4px;
font-size: 16px;
line-height: 1;
font-weight: 400;
line-height: 1.5;
text-align: center;
}
.tablenav-pages-navspan {
height: 16px;
border-color: #ddd; /* same as disabled buttons */
background: #f7f7f7; /* same as disabled buttons */
color: #a0a5aa; /* same as disabled buttons */
}
.tablenav .tablenav-pages a:hover,
.tablenav .tablenav-pages a:focus {
border-color: #5b9dd9;
color: #fff;
background: #00a0d2;
box-shadow: none;
outline: none; /* IE8 */
}
.tablenav .displaying-num {
margin-right: 7px;
}
.tablenav .one-page .displaying-num {
display: inline-block;
margin-top: 5px;
margin-right: 0;
margin: 5px 0;
}
.tablenav .actions {
@ -721,24 +683,7 @@ th.asc a:focus span.sorting-indicator {
margin-right: 20px;
}
/* @todo: unclear if the following tablenav rules are actually used.
classes exist in paginate_links() but not seen in list table output. */
.tablenav .dots {
border-color: transparent;
}
.tablenav .next,
.tablenav .prev {
border-color: transparent;
color: #0073aa;
}
.tablenav .next:hover,
.tablenav .prev:hover {
border-color: transparent;
color: #00a0d2;
}
/* This view-switcher is still used on multisite. */
.tablenav .view-switch {
float: right;
margin: 0 5px;
@ -1717,7 +1662,6 @@ div.action-links,
.tablenav .tablenav-pages {
width: 100%;
height: auto;
text-align: center;
margin: 0 0 25px;
}
@ -1739,19 +1683,19 @@ div.action-links,
font-size: 16px;
}
.tablenav-pages .pagination-links a,
.tablenav-pages-navspan {
padding: 9px 11px 12px;
.tablenav .tablenav-pages .button,
.tablenav .tablenav-pages .tablenav-pages-navspan {
min-width: 44px;
padding: 12px 8px;
font-size: 18px;
}
.tablenav-pages-navspan {
height: 18px;
line-height: 1;
}
.tablenav-pages .pagination-links .current-page {
padding: 8px 9px 9px;
min-width: 44px;
padding: 12px 6px;
font-size: 16px;
line-height: 18px;
}
/* WP List Table Adjustments: General */

16
src/wp-admin/includes/class-wp-list-table.php
View File

@ -817,10 +817,10 @@ foreach ( $this->modes as $mode => $title ) {
}
if ( $disable_first ) {
$page_links[] = '<span class="tablenav-pages-navspan" aria-hidden="true">&laquo;</span>';
$page_links[] = '<span class="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>';
} else {
$page_links[] = sprintf(
"<a class='first-page' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
"<a class='first-page button' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
esc_url( remove_query_arg( 'paged', $current_url ) ),
__( 'First page' ),
'&laquo;'
@ -828,10 +828,10 @@ foreach ( $this->modes as $mode => $title ) {
}
if ( $disable_prev ) {
$page_links[] = '<span class="tablenav-pages-navspan" aria-hidden="true">&lsaquo;</span>';
$page_links[] = '<span class="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>';
} else {
$page_links[] = sprintf(
"<a class='prev-page' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
"<a class='prev-page button' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
esc_url( add_query_arg( 'paged', max( 1, $current - 1 ), $current_url ) ),
__( 'Previous page' ),
'&lsaquo;'
@ -853,10 +853,10 @@ foreach ( $this->modes as $mode => $title ) {
$page_links[] = $total_pages_before . sprintf( _x( '%1$s of %2$s', 'paging' ), $html_current_page, $html_total_pages ) . $total_pages_after;
if ( $disable_next ) {
$page_links[] = '<span class="tablenav-pages-navspan" aria-hidden="true">&rsaquo;</span>';
$page_links[] = '<span class="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>';
} else {
$page_links[] = sprintf(
"<a class='next-page' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
"<a class='next-page button' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
esc_url( add_query_arg( 'paged', min( $total_pages, $current + 1 ), $current_url ) ),
__( 'Next page' ),
'&rsaquo;'
@ -864,10 +864,10 @@ foreach ( $this->modes as $mode => $title ) {
}
if ( $disable_last ) {
$page_links[] = '<span class="tablenav-pages-navspan" aria-hidden="true">&raquo;</span>';
$page_links[] = '<span class="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>';
} else {
$page_links[] = sprintf(
"<a class='last-page' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
"<a class='last-page button' href='%s'><span class='screen-reader-text'>%s</span><span aria-hidden='true'>%s</span></a>",
esc_url( add_query_arg( 'paged', $total_pages, $current_url ) ),
__( 'Last page' ),
'&raquo;'

2
src/wp-admin/network/sites.php
View File

@ -357,7 +357,7 @@ if ( isset( $_REQUEST['s'] ) && strlen( $_REQUEST['s'] ) ) {
<?php echo $msg; ?>
<form method="get" id="ms-search">
<form method="get" id="ms-search" class="wp-clearfix">
<?php $wp_list_table->search_box( __( 'Search Sites' ), 'site' ); ?>
<input type="hidden" name="action" value="blogs" />
</form>