From 78bde761bb7719060605909333c748828a83f804 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 26 Jan 2016 22:37:41 +0000
Subject: [PATCH] Accessibility: Improve the focus style on the Credits screen.

Leads and contributing developers will now look nicer when focused.
Also, combines adjacent image and text links for the same resource thus
simplifying markup and reducing noise for screen reader users.

Props walbo, afercia.
Fixes #34953.

git-svn-id: https://develop.svn.wordpress.org/trunk@36406 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/credits.php    |  6 +++---
 src/wp-admin/css/about.css  | 25 ++++++++++++++-----------
 src/wp-admin/css/common.css |  3 ++-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php
index 4ce86412db..bc66046eac 100644
--- a/src/wp-admin/credits.php
+++ b/src/wp-admin/credits.php
@@ -80,13 +80,13 @@ foreach ( $credits['groups'] as $group_slug => $group_data ) {
 			echo '<ul class="' . $classes . '" id="wp-people-group-' . $group_slug . '">' . "\n";
 			foreach ( $group_data['data'] as $person_data ) {
 				echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
-				echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '">';
+				echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
 				$size = 'compact' == $group_data['type'] ? 30 : 60;
 				$data = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
 				$size *= 2;
 				$data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
-				echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="' . esc_attr( $person_data[0] ) . '" /></a>' . "\n\t";
-				echo '<a class="web" href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '">' . esc_html( $person_data[0] ) . "</a>\n\t";
+				echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
+				echo esc_html( $person_data[0] ) . "</a>\n\t";
 				if ( ! $compact )
 					echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
 				echo "</li>\n";
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 8a73928f90..b783a67aef 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -332,21 +332,21 @@
 
 .about-wrap h3.wp-people-group {
 	margin: 2.6em 0 1.33em;
+	padding: 0;
 	font-size: 16px;
 	line-height: inherit;
 }
 
-.about-wrap ul.wp-people-group {
-	overflow: hidden;
+.about-wrap .wp-people-group {
 	padding: 0 5px;
 	margin: 0 -15px 0 -5px;
 }
 
-.about-wrap ul.compact {
+.about-wrap .compact {
 	margin-bottom: 0
 }
 
-.about-wrap li.wp-person {
+.about-wrap .wp-person {
 	display: inline-block;
 	vertical-align: top;
 	margin-right: 10px;
@@ -355,35 +355,38 @@
 	width: 280px;
 }
 
-.about-wrap ul.compact li.wp-person {
+.about-wrap .compact .wp-person {
 	height: auto;
 	width: 180px;
 	padding-bottom: 0;
 	margin-bottom: 0;
 }
 
-.about-wrap li.wp-person img.gravatar {
+.about-wrap .wp-person .gravatar {
 	float: left;
 	margin: 0 10px 10px 0;
-	padding: 2px;
+	padding: 1px;
 	width: 60px;
 	height: 60px;
 }
 
-.about-wrap ul.compact li.wp-person img.gravatar {
+.about-wrap .compact .wp-person .gravatar {
 	width: 30px;
 	height: 30px;
 }
 
-.about-wrap li.wp-person a.web {
-	display: block;
+.about-wrap .wp-person .web {
 	margin: 6px 0 2px;
 	font-size: 16px;
 	font-weight: normal;
-	line-height: 1.6em;
+	line-height: 2em;
 	text-decoration: none;
 }
 
+.about-wrap .wp-person .title {
+	display: block;
+}
+
 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 	margin-top: 0;
 }
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 90436596a8..76583b12ef 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -272,7 +272,8 @@ a:active {
 }
 
 a:focus,
-a:focus .media-icon img {
+a:focus .media-icon img,
+.wp-person a:focus .gravatar {
 	color: #124964;
 	-webkit-box-shadow:
 		0 0 0 1px #5b9dd9,