Changeset 46195

Timestamp:

09/20/2019 11:40:06 AM (7 years ago)

Author:

afercia

Message:

Accessibility: Bundled Theme: Make the TwentyEleven skip link the first focusable element within the body.

Props poena, williampatton.
Fixes #47891.

Location:

trunk/src/wp-content/themes/twentyeleven

Files:

• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• rtl.css (modified) (4 diffs)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyeleven/functions.php

@@ -913 +913 @@
         }
 endif;
+
+/**
+ * Include a skip to content link at the top of the page so that users can bypass the menu.
+ *
+ * @since Twenty Eleven 3.4
+ */
+function twentyeleven_skip_link() {
+        echo '<div class="skip-link"><a class="assistive-text" href="#content">' . esc_html__( 'Skip to primary content', 'twentyeleven' ) . '</a></div>';
+        if ( ! is_singular() ) {
+                echo '<div class="skip-link"><a class="assistive-text" href="#secondary">' . esc_html__( 'Skip to secondary content', 'twentyeleven' ) . '</a></div>';
+        }
+}
+add_action( 'wp_body_open', 'twentyeleven_skip_link', 5 );

trunk/src/wp-content/themes/twentyeleven/header.php

@@ -146 +146 @@
                         <nav id="access" role="navigation">
                                 <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
-                                <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
-                                <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
-                                <?php if ( ! is_singular() ) : ?>
-                                        <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
-                                <?php endif; ?>
                                 <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
                                 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

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

@@ -109 +109 @@
 
 /* Assistive text */
-#access a.assistive-text:focus {
-        left: auto;
-        right: 7.6%;
+a.assistive-text:focus {
+        left: auto;
+        right: 6px;
 }
 
@@ -392 +392 @@
         border-left: none;
         border-right: 1px solid #ddd;
-        -moz-border-radius: 3px 0  0 3px;
+        -moz-border-radius: 3px 0 0 3px;
         border-radius: 3px 0 0 3px;
 }
@@ -548 +548 @@
         #respond .comment-form-author .required,
         #respond .comment-form-email .required {
-            left: auto;
-            right: 95%;
+                left: auto;
+                right: 95%;
         }
         #content .gallery-columns-3 .gallery-item {
@@ -568 +568 @@
 @media print {
         #primary {
-            float: right;
+                float: right;
         }
         /* Comments */
         .commentlist .avatar {
-            left: auto;
-            right: 2.2em;
+                left: auto;
+                right: 2.2em;
         }
         .commentlist li.comment .comment-meta {
-            margin-left: 0;
-            margin-right: 50px;
+                margin-left: 0;
+                margin-right: 50px;
         }
 }

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

@@ -503 +503 @@
         width: 1px;
 }
-#access a.assistive-text:focus,
+
+a.assistive-text:focus,
 .screen-reader-text:hover,
 .screen-reader-text:active,
 .screen-reader-text:focus {
-        background: #eee;
-        border-bottom: 1px solid #ddd;
-        color: #1982d1;
+        background-color: #f1f1f1;
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
         clip: auto !important;
-        font-size: 12px;
+        clip-path: none;
+        color: #21759b;
+        display: block;
+        font-size: 14px;
+        font-weight: bold;
         height: auto;
-        position: absolute;
-        text-decoration: underline;
-        top: 0;
-        left: 7.6%;
+        left: 6px;
+        line-height: normal;
+        padding: 17px 22px 15px;
+        text-decoration: none;
+        top: 7px;
         width: auto;
-}
-
+        z-index: 100000;
+        /* Above WP toolbar. */
+}
 
 /* =Header