Changeset 32693

Timestamp:

06/05/2015 05:00:23 AM (10 years ago)

Author:

obenland

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (3 diffs)
• includes/class-wp-list-table.php (modified) (3 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -545 +545 @@
     height: 30px;
     color: #555;
-    line-height: 30px;
+    line-height: 2.5;
     font-size: 12px;
 }
@@ -564 +564 @@
     background: #eee;
     background: rgba( 0, 0, 0, 0.05 );
+    display: inline-block;
     font-size: 16px;
     font-weight: normal;
+    line-height: 1.3333;
 }
 
@@ -1615 +1617 @@
     .tablenav-pages .pagination-links a {
         padding: 8px 20px 11px;
+        display: inline;
         font-size: 18px;
         background: rgba(0, 0, 0, 0.05);

trunk/src/wp-admin/includes/class-wp-list-table.php

@@ -702 +702 @@
         $page_links = array();
 
+        $total_pages_before = '<span class="paging-input">';
+        $total_pages_after  = '</span>';
+
         $disable_first = $disable_last = '';
         if ( $current == 1 ) {
@@ -709 +712 @@
             $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 )
@@ -734 +737 @@
         }
         $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[] = sprintf( "<a class='%s' title='%s' href='%s'>%s</a>",
+        $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' 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;'
         );