Accessibility: Bundled Theme: Make the TwentyEleven skip link the fir…

…st focusable element within the body.

Props poena, williampatton.
Fixes #47891.


git-svn-id: https://develop.svn.wordpress.org/trunk@46195 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -912,3 +912,16 @@ function wp_body_open() {
 		do_action( 'wp_body_open' );
 	}
 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 );

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

@@ -145,11 +145,6 @@
 
 			<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' ) ); ?>
 			</nav><!-- #access -->

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

@@ -108,9 +108,9 @@ input#s {
 }
 
 /* Assistive text */
-#access a.assistive-text:focus {
+a.assistive-text:focus {
 	left: auto;
-	right: 7.6%;
+	right: 6px;
 }
 
 /* =Header
@@ -391,7 +391,7 @@ section.recent-posts .other-recent-posts .comments-link > span {
 .commentlist .children li.comment {
 	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;
 }
 .commentlist .children li.comment .comment-meta {
@@ -547,8 +547,8 @@ section.recent-posts .other-recent-posts .comments-link > span {
 	/* Use the available space in the smaller comment form */
 	#respond .comment-form-author .required,
 	#respond .comment-form-email .required {
-	    left: auto;
-	    right: 95%;
+		left: auto;
+		right: 95%;
 	}
 	#content .gallery-columns-3 .gallery-item {
 		padding-right: 0;
@@ -567,16 +567,16 @@ section.recent-posts .other-recent-posts .comments-link > span {
 
 @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;
 	}
 }
 

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

@@ -502,24 +502,30 @@ a:hover {
 	height: 1px;
 	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
 ----------------------------------------------- */