Changeset 46195

Timestamp:

09/20/2019 11:40:06 AM (6 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