From f326f7ebfb50352ea77c28dcf75b3a080b2f56d8 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Fri, 20 Sep 2019 11:40:06 +0000
Subject: [PATCH] Accessibility: Bundled Theme: Make the TwentyEleven skip link
 the first 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
---
 .../themes/twentyeleven/functions.php         | 13 ++++++++++
 src/wp-content/themes/twentyeleven/header.php |  5 ----
 src/wp-content/themes/twentyeleven/rtl.css    | 20 +++++++-------
 src/wp-content/themes/twentyeleven/style.css  | 26 ++++++++++++-------
 4 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/wp-content/themes/twentyeleven/functions.php b/src/wp-content/themes/twentyeleven/functions.php
index 540c806c78..d1d7d69bde 100644
--- a/src/wp-content/themes/twentyeleven/functions.php
+++ b/src/wp-content/themes/twentyeleven/functions.php
@@ -912,3 +912,16 @@ if ( ! function_exists( '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 );
diff --git a/src/wp-content/themes/twentyeleven/header.php b/src/wp-content/themes/twentyeleven/header.php
index a6c5a37ad8..852017e29b 100644
--- a/src/wp-content/themes/twentyeleven/header.php
+++ b/src/wp-content/themes/twentyeleven/header.php
@@ -145,11 +145,6 @@ if ( is_singular() && get_option( 'thread_comments' ) ) {
 
 			<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 -->
diff --git a/src/wp-content/themes/twentyeleven/rtl.css b/src/wp-content/themes/twentyeleven/rtl.css
index 7aac910533..2354d691c5 100644
--- a/src/wp-content/themes/twentyeleven/rtl.css
+++ b/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;
 	}
 }
 
diff --git a/src/wp-content/themes/twentyeleven/style.css b/src/wp-content/themes/twentyeleven/style.css
index bda46c7df9..811eb16b0b 100644
--- a/src/wp-content/themes/twentyeleven/style.css
+++ b/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
 ----------------------------------------------- */