Skip to content

Commit

Permalink
Accessibility: Better color contrast for the tables pagination links.
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@afercia
afercia committed Apr 29, 2018
1 parent b383688 commit 75ca3d6
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 88 deletions.
4 changes: 1 addition & 3 deletions src/wp-admin/css/colors/_admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
96 changes: 20 additions & 76 deletions src/wp-admin/css/list-tables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -651,60 +639,34 @@ 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,
.tablenav .one-page .pagination-links {
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 {
Expand All @@ -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;
Expand Down Expand Up @@ -1717,7 +1662,6 @@ div.action-links,

.tablenav .tablenav-pages {
width: 100%;
height: auto;
text-align: center;
margin: 0 0 25px;
}
Expand All @@ -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 */
Expand Down
16 changes: 8 additions & 8 deletions src/wp-admin/includes/class-wp-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -817,21 +817,21 @@ protected function pagination( $which ) {
}

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;'
);
}

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;'
Expand All @@ -853,21 +853,21 @@ protected function pagination( $which ) {
$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;'
);
}

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;'
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/network/sites.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@

<?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>
Expand Down

0 comments on commit 75ca3d6

Please sign in to comment.