Changeset 30316

Timestamp:

11/12/2014 11:25:51 PM (11 years ago)

Author:

iandstewart

Message:

Twenty Fifteen: adding context to pagination links for screenreaders.

Props afercia, iamtakashi, fixes #30152

Location:

trunk/src/wp-content/themes/twentyfifteen

Files:

• archive.php (modified) (1 diff)
• index.php (modified) (1 diff)
• rtl.css (modified) (1 diff)
• search.php (modified) (1 diff)
• single.php (modified) (1 diff)
• style.css (modified) (3 diffs)

trunk/src/wp-content/themes/twentyfifteen/archive.php

@@ -47 +47 @@
             <?php
                 the_pagination( array(
-                    'before_page_number' => '<span class="meta-nav">' . __( 'Page', 'twentyfifteen' ) . '</span>',
+                    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
+                    'next_text'          => __( 'Next page', 'twentyfifteen' ),
+                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
                 ) );
             ?>

trunk/src/wp-content/themes/twentyfifteen/index.php

@@ -43 +43 @@
             <?php
                 the_pagination( array(
-                    'before_page_number' => '<span class="meta-nav">' . __( 'Page', 'twentyfifteen' ) . '</span>',
+                    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
+                    'next_text'          => __( 'Next page', 'twentyfifteen' ),
+                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
                 ) );
             ?>

trunk/src/wp-content/themes/twentyfifteen/rtl.css

@@ -152 +152 @@
 }
 
-.pagination .meta-nav {
-    margin-right: auto;
-    margin-left: 0.3333em;
-}
-
 .pagination .prev {
     right: 0;

trunk/src/wp-content/themes/twentyfifteen/search.php

@@ -35 +35 @@
             <?php
                 the_pagination( array(
-                    'before_page_number' => '<span class="meta-nav">' . __( 'Page', 'twentyfifteen' ) . '</span>',
+                    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
+                    'next_text'          => __( 'Next page', 'twentyfifteen' ),
+                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
                 ) );
             ?>

trunk/src/wp-content/themes/twentyfifteen/single.php

@@ -26 +26 @@
             <?php
                 the_post_navigation( array(
-                    'next_text' => _x( '<span class="meta-nav">Next</span><span class="post-title">%title</span>', 'Next post link', 'twentyfifteen' ),
-                    'prev_text' => _x( '<span class="meta-nav">Previous</span><span class="post-title">%title</span>', 'Previous post link', 'twentyfifteen' ),
+                    'next_text' => _x( '<span class="meta-nav">Next <span class="screen-reader-text">post:</span></span><span class="post-title">%title</span>', 'Next post link', 'twentyfifteen' ),
+                    'prev_text' => _x( '<span class="meta-nav">Previous <span class="screen-reader-text">post:</span></span><span class="post-title">%title</span>', 'Previous post link', 'twentyfifteen' )
                 ) );
             ?>

trunk/src/wp-content/themes/twentyfifteen/style.css

@@ -1026 +1026 @@
 }
 
-.pagination .meta-nav {
-    margin-right: 0.3333em;
+/* reset screen-reader-text */
+.pagination .current .screen-reader-text {
+    position: static !important;
 }
 
@@ -1034 +1035 @@
     line-height: 3.2em;
     padding: 0 0.6667em;
+}
+
+.pagination .page-numbers.current {
     text-transform: uppercase;
 }
@@ -2755 +2759 @@
     }
 
+    /* restore screen-reader-text */
+    .pagination .current .screen-reader-text {
+        position: absolute !important;
+    }
+
     .pagination .page-numbers {
         display: inline-block;
-    }
-
-    .pagination .meta-nav {
-        display: none;
     }