From 8a7dd1e31ca871a8631e20bf669311f395a52834 Mon Sep 17 00:00:00 2001
From: iandstewart <iandstewart@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Thu, 2 Jun 2011 19:30:07 +0000
Subject: [PATCH] Twenty Eleven: accessibility improvements and minor style
 fixes for galleries; See #17524 * Improved color contrast for light and dark
 color schemes * Skip link for skipping directly to sidebar content * Skip
 links visible on :focus * Using a more semantic, general class name of
 .assistive-text instead of .section-heading and .screen-reader-text * Focus
 styles for password inputs (and a minor style fix)

git-svn-id: http://svn.automattic.com/wordpress/trunk@18117 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../themes/twentyeleven/colors/dark.css       | 38 ++++----
 wp-content/themes/twentyeleven/comments.php   |  4 +-
 wp-content/themes/twentyeleven/functions.php  |  2 +-
 wp-content/themes/twentyeleven/header.php     |  5 +-
 .../themes/twentyeleven/inc/theme-options.php |  6 +-
 wp-content/themes/twentyeleven/single.php     |  2 +-
 wp-content/themes/twentyeleven/style.css      | 91 +++++++++++--------
 7 files changed, 87 insertions(+), 61 deletions(-)

diff --git a/wp-content/themes/twentyeleven/colors/dark.css b/wp-content/themes/twentyeleven/colors/dark.css
index 8bb86d0536..54699522b1 100644
--- a/wp-content/themes/twentyeleven/colors/dark.css
+++ b/wp-content/themes/twentyeleven/colors/dark.css
@@ -35,6 +35,7 @@ ins {
 	background: #00063f;
 }
 input[type=text],
+.post-password-required input[type=password],
 textarea {
 	border: 1px solid #222;
 }
@@ -124,26 +125,32 @@ a {
 	border-color: #222;
 }
 .page-link {
-	background: #0e0e0e;
-	border-color: #222;
-	color: #777;
 }
 .page-link a {
-	background: #272727;
+	background: #242424;
 	color: #bbb;
 }
 .page-link a:hover {
-	background: #888;
+	background: #999;
 	color: #000;
 }
 .entry-meta .edit-link a {
-	background: #555;
-	color: #000;
+	background: #242424;
+	color: #bbb;
 }
 .entry-meta .edit-link a:hover,
 .entry-meta .edit-link a:focus,
 .entry-meta .edit-link a:active {
-	background: #888;
+	background: #999;
+	color: #000;
+}
+
+/* Password Protected Posts */
+.post-password-required input[type=password] {
+	background: #ddd;
+}
+.post-password-required input[type=password]:focus {
+	background: #fff;
 }
 
 /* Author Info */
@@ -166,7 +173,7 @@ a {
 
 /* Comments link */
 .entry-header .comments-link a {
-	background: #1a1a1a;
+	background: #242424;
 	border-color: #222;
 	color: #888;
 }
@@ -178,9 +185,6 @@ a {
 .singular .entry-title {
 	color: #fff;
 }
-.singular .entry-meta .edit-link a {
-	color: #000;
-}
 
 
 /* =Status
@@ -317,7 +321,7 @@ section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
 }
 section.recent-posts .other-recent-posts .comments-link a,
 section.recent-posts .other-recent-posts .comments-link > span {
-	border-color: #666;
+	border-color: #959595;
 	color: #bbb;
 }
 section.recent-posts .other-recent-posts .comments-link > span {
@@ -438,12 +442,14 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
 	background: #222;
 	border-color: #2c2c2c;
 }
+.commentlist > li.bypostauthor .comment-meta {
+	color: #a8a8a8;
+}
 
 /* Comment Form */
 #respond {
 	background: #222;
 	border-color: #2c2c2c;
-	color: #bbb;
 }
 #respond input[type="text"],
 #respond textarea {
@@ -538,7 +544,7 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
 		color: #333;
 	}
 	.commentlist > li.bypostauthor .comment-meta {
-		color: #666;
+		color: #959595;
 	}
 	.commentlist > li:before {
 		content: none !important;
@@ -551,6 +557,6 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
 	}
 	.commentlist .children > li.bypostauthor > article,
 	.commentlist .children > li.bypostauthor > article .comment-meta {
-		color: #666;
+		color: #959595;
 	}
 }
\ No newline at end of file
diff --git a/wp-content/themes/twentyeleven/comments.php b/wp-content/themes/twentyeleven/comments.php
index b764b0347c..314905488d 100644
--- a/wp-content/themes/twentyeleven/comments.php
+++ b/wp-content/themes/twentyeleven/comments.php
@@ -37,7 +37,7 @@
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
 		<nav id="comment-nav-above">
-			<h1 class="section-heading"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
+			<h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
 			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
 			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
 		</nav>
@@ -57,7 +57,7 @@
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
 		<nav id="comment-nav-below">
-			<h1 class="section-heading"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
+			<h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
 			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
 			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
 		</nav>
diff --git a/wp-content/themes/twentyeleven/functions.php b/wp-content/themes/twentyeleven/functions.php
index 0c764d0a77..9b485f65ab 100644
--- a/wp-content/themes/twentyeleven/functions.php
+++ b/wp-content/themes/twentyeleven/functions.php
@@ -441,7 +441,7 @@ function twentyeleven_content_nav( $nav_id ) {
 
 	if ( $wp_query->max_num_pages > 1 ) : ?>
 		<nav id="<?php echo $nav_id; ?>">
-			<h1 class="section-heading"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h1>
+			<h1 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h1>
 			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
 			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></div>
 		</nav><!-- #nav-above -->
diff --git a/wp-content/themes/twentyeleven/header.php b/wp-content/themes/twentyeleven/header.php
index eb48d817eb..6e8a0863c8 100644
--- a/wp-content/themes/twentyeleven/header.php
+++ b/wp-content/themes/twentyeleven/header.php
@@ -110,9 +110,10 @@
 			<?php endif; ?>
 
 			<nav id="access" role="navigation">
-				<h1 class="section-heading"><?php _e( 'Main menu', 'twentyeleven' ); ?></h1>
+				<h1 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h1>
 				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
-				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyeleven' ); ?>"><?php _e( 'Skip to content', 'twentyeleven' ); ?></a></div>
+				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
+				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
 				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
 				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
 			</nav><!-- #access -->
diff --git a/wp-content/themes/twentyeleven/inc/theme-options.php b/wp-content/themes/twentyeleven/inc/theme-options.php
index 213841e1a8..28f363a296 100644
--- a/wp-content/themes/twentyeleven/inc/theme-options.php
+++ b/wp-content/themes/twentyeleven/inc/theme-options.php
@@ -199,7 +199,7 @@ function theme_options_render_page() {
 
 				<tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
 					<td>
-						<fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
+						<fieldset><legend class="assistive-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
 						<?php
 							foreach ( twentyeleven_color_schemes() as $color ) {
 								?>
@@ -221,7 +221,7 @@ function theme_options_render_page() {
 
 				<tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
 					<td>
-						<fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
+						<fieldset><legend class="assistive-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
 							<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
 							<a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
 							<input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
@@ -234,7 +234,7 @@ function theme_options_render_page() {
 
 				<tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th>
 					<td>
-						<fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
+						<fieldset><legend class="assistive-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
 						<?php
 							foreach ( twentyeleven_layouts() as $layout ) {
 								?>
diff --git a/wp-content/themes/twentyeleven/single.php b/wp-content/themes/twentyeleven/single.php
index 7b3ea14b77..46c81fc74f 100644
--- a/wp-content/themes/twentyeleven/single.php
+++ b/wp-content/themes/twentyeleven/single.php
@@ -15,7 +15,7 @@ get_header(); ?>
 				<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
 					<nav id="nav-single">
-						<h1 class="section-heading"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
+						<h1 class="assistive-text"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
 						<span class="nav-previous"><?php previous_post_link( '%link', __( '&larr; Previous', 'twentyeleven' ) ); ?></span>
 						<span class="nav-next"><?php next_post_link( '%link', __( 'Next &rarr;', 'twentyeleven' ) ); ?></span>
 					</nav><!-- #nav-single -->
diff --git a/wp-content/themes/twentyeleven/style.css b/wp-content/themes/twentyeleven/style.css
index cedc20dd0b..bb50732ff1 100644
--- a/wp-content/themes/twentyeleven/style.css
+++ b/wp-content/themes/twentyeleven/style.css
@@ -309,7 +309,7 @@ body {
 ----------------------------------------------- */
 
 body, input, textarea {
-	color: #333;
+	color: #373737;
 	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-weight: 300;
 	line-height: 1.625;
@@ -428,6 +428,7 @@ sub {
 
 /* Forms */
 input[type=text],
+input[type=password],
 textarea {
 	background: #fafafa;
 	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
@@ -438,7 +439,7 @@ textarea {
 }
 input[type=text]:focus,
 textarea:focus {
-	color: #333;
+	color: #373737;
 }
 textarea {
 	padding-left: 3px;
@@ -462,7 +463,7 @@ input#searchsubmit {
 
 /* Links */
 a {
-	color: #1b8be0;
+	color: #1982d1;
 	text-decoration: none;
 }
 a:focus,
@@ -471,13 +472,24 @@ a:hover {
 	text-decoration: underline;
 }
 
-/* Assitive text */
-.section-heading,
-.screen-reader-text {
+/* Assistive text */
+.assistive-text {
 	position: absolute !important;
 	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 	clip: rect(1px, 1px, 1px, 1px);
 }
+#access a.assistive-text:active,
+#access a.assistive-text:focus {
+	background: #eee;
+	border-bottom: 1px solid #ddd;
+	color: #1982d1;
+	clip: auto !important;
+	font-size: 12px;
+	position: absolute;
+	text-decoration: underline;
+	top: 0;
+	left: 7.6%;
+}
 
 
 /* =Header
@@ -503,7 +515,7 @@ a:hover {
 #site-title a:hover,
 #site-title a:focus,
 #site-title a:active {
-	color: #1b8be0;
+	color: #1982d1;
 }
 #site-description {
 	color: #7a7a7a;
@@ -590,7 +602,7 @@ a:hover {
 	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
 	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
-	color: #333;
+	color: #373737;
 }
 #access ul li:hover > ul {
 	display: block;
@@ -710,7 +722,7 @@ a:hover {
 .entry-title a:hover,
 .entry-title a:focus,
 .entry-title a:active {
-	color: #1b8be0;
+	color: #1982d1;
 }
 .entry-meta {
 	color: #666;
@@ -777,25 +789,19 @@ dl.gallery-item {
 	margin: 0;
 }
 .page-link {
-	background: #f1f1f1;
-	border-top: 1px solid #ddd;
 	clear: both;
-	color: #888;
 	display: block;
-	font-size: 13px;
-	margin: 1.625em -30px;
-	padding: 4px 30px;
-	text-decoration: none;
+	margin: 0 0 1.625em;
 }
 .page-link a {
-	background: #d8d8d8;
-	color: #444;
+	background: #eee;
+	color: #373737;
 	margin: 0;
 	padding: 2px 3px;
 	text-decoration: none;
 }
 .page-link a:hover {
-	background: #777;
+	background: #888;
 	color: #fff;
 	font-weight: bold;
 }
@@ -803,10 +809,10 @@ dl.gallery-item {
 	margin-right: 6px;
 }
 .entry-meta .edit-link a {
-	background: #aaa;
+	background: #eee;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
-	color: #fff;
+	color: #666;
 	float: right;
 	font-size: 12px;
 	font-weight: 300;
@@ -814,13 +820,25 @@ dl.gallery-item {
 	padding: 0px 8px;
 }
 .entry-meta .edit-link a:hover {
-	background: #777;
+	background: #888;
+	color: #fff;
 }
 .entry-content .edit-link {
 	clear: both;
 	display: block;
 }
 
+/* Password Protected Posts */
+.post-password-required .entry-header .comments-link {
+	margin: 1.625em 0 0;
+}
+.post-password-required input[type=password] {
+	margin: 0.8125em 0;
+}
+.post-password-required input[type=password]:focus {
+	background: #f7f7f7;
+}
+
 /* Author Info */
 #author-info {
 	font-size: 12px;
@@ -884,7 +902,7 @@ dl.gallery-item {
 .entry-header .comments-link a:hover,
 .entry-header .comments-link a:focus,
 .entry-header .comments-link a:active {
-	background: #1b8be0;
+	background: #1982d1;
 	border-color: #1573bb;
 	border-color: rgba(0,0,0,0.2);
 	color: #fff;
@@ -992,7 +1010,6 @@ blockquote.pull {
 }
 .singular .entry-meta .edit-link a {
 	bottom: auto;
-	color: #fff;
 	left: 50px;	
 	position: absolute;
 	right: auto;
@@ -1042,7 +1059,7 @@ blockquote.pull {
 .format-gallery .gallery-thumb {
 	float: left;
 	display: block;
-	margin-right: 1.625em;
+	margin: .375em 1.625em 0 0;
 }
 
 
@@ -1277,7 +1294,7 @@ article.feature-image.small .entry-summary p a {
 	width: 180px;
 }
 article.feature-image.small .entry-summary p a:hover {
-	background: #1b8be0;
+	background: #1982d1;
 	color: #eee;
 	color: rgba(255,255,255,0.8);
 }
@@ -1423,7 +1440,7 @@ section.recent-posts .other-recent-posts .entry-title {
 	font-size: 17px;
 }
 section.recent-posts .other-recent-posts a[rel="bookmark"] {
-	color: #333;
+	color: #373737;
 	float: left;
 	max-width: 84%;
 }
@@ -1455,8 +1472,8 @@ section.recent-posts .other-recent-posts .comments-link > span {
 	color: #888;
 }
 section.recent-posts .other-recent-posts .comments-link a:hover {
-	color: #1b8be0;
-	border-color: #1b8be0;
+	color: #1982d1;
+	border-color: #1982d1;
 }
 section.recent-posts .other-recent-posts li:after {
 	clear: both;
@@ -1546,6 +1563,9 @@ p img,
 .gallery {
 	margin: 0 auto 1.625em !important;
 }
+#content .gallery a img {
+    border: none;
+}
 .gallery-caption {
 }
 img#wpstats {
@@ -1662,7 +1682,7 @@ img#wpstats {
 	top: -2px;
 }
 .widget_search #searchsubmit:active {
-	background: #1b8be0;
+	background: #1982d1;
 	border-color: #0861a5;
 	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
@@ -1860,6 +1880,9 @@ a.comment-reply-link {
 	background: #ddd;
 	border-color: #d3d3d3;
 }
+.commentlist > li.bypostauthor .comment-meta {
+	color: #575757;
+}
 .commentlist > li.bypostauthor .comment-meta a:focus,
 .commentlist > li.bypostauthor .comment-meta a:active,
 .commentlist > li.bypostauthor .comment-meta a:hover {
@@ -1892,7 +1915,6 @@ a.comment-reply-link {
 	border: 1px solid #d3d3d3;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
-	color: #444;
 	margin: 0 auto 1.625em;
 	padding: 1.625em;
 	position: relative;
@@ -1990,7 +2012,7 @@ a.comment-reply-link {
 	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 }
 #respond input#submit:active {
-	background: #1b8be0;
+	background: #1982d1;
 	color: #bfddf3;
 }
 #respond #cancel-comment-reply-link {
@@ -2007,7 +2029,7 @@ a.comment-reply-link {
 	width: auto;
 }
 #reply-title {
-	color: #333;
+	color: #373737;
 	font-size: 24px;
 	font-weight: bold;
 	line-height: 30px;
@@ -2195,9 +2217,6 @@ p.comment-form-comment {
 		margin: 2.2em -8.8% 0px;
 		padding: 20px 8.8%;
 	}
-	.page-link {
-		margin: 1.625em 0;
-	}
 	/* Make sure we have room for our comment avatars */
 	.commentlist > li.comment,
 	.commentlist .pingback {