From 75ca3d63860b3b2ef45184e2c81e0b6da6b2f1fc Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sun, 29 Apr 2018 16:24:41 +0000 Subject: [PATCH] Accessibility: Better color contrast for the tables pagination links. 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 --- src/wp-admin/css/colors/_admin.scss | 4 +- src/wp-admin/css/list-tables.css | 96 ++++--------------- src/wp-admin/includes/class-wp-list-table.php | 16 ++-- src/wp-admin/network/sites.php | 2 +- 4 files changed, 30 insertions(+), 88 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 928670d2b1..6e064a04a1 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -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; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 4c88a141b3..1f463e6e54 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -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 */ diff --git a/src/wp-admin/includes/class-wp-list-table.php b/src/wp-admin/includes/class-wp-list-table.php index f31f4eaed6..90d254a777 100644 --- a/src/wp-admin/includes/class-wp-list-table.php +++ b/src/wp-admin/includes/class-wp-list-table.php @@ -817,10 +817,10 @@ foreach ( $this->modes as $mode => $title ) { } if ( $disable_first ) { - $page_links[] = ''; + $page_links[] = ''; } else { $page_links[] = sprintf( - "%s", + "%s", esc_url( remove_query_arg( 'paged', $current_url ) ), __( 'First page' ), '«' @@ -828,10 +828,10 @@ foreach ( $this->modes as $mode => $title ) { } if ( $disable_prev ) { - $page_links[] = ''; + $page_links[] = ''; } else { $page_links[] = sprintf( - "%s", + "%s", esc_url( add_query_arg( 'paged', max( 1, $current - 1 ), $current_url ) ), __( 'Previous page' ), '‹' @@ -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[] = ''; + $page_links[] = ''; } else { $page_links[] = sprintf( - "%s", + "%s", esc_url( add_query_arg( 'paged', min( $total_pages, $current + 1 ), $current_url ) ), __( 'Next page' ), '›' @@ -864,10 +864,10 @@ foreach ( $this->modes as $mode => $title ) { } if ( $disable_last ) { - $page_links[] = ''; + $page_links[] = ''; } else { $page_links[] = sprintf( - "%s", + "%s", esc_url( add_query_arg( 'paged', $total_pages, $current_url ) ), __( 'Last page' ), '»' diff --git a/src/wp-admin/network/sites.php b/src/wp-admin/network/sites.php index b5b55bded5..6c2de15866 100644 --- a/src/wp-admin/network/sites.php +++ b/src/wp-admin/network/sites.php @@ -357,7 +357,7 @@ if ( isset( $_REQUEST['s'] ) && strlen( $_REQUEST['s'] ) ) { -