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.
Built from https://develop.svn.wordpress.org/trunk@36406


git-svn-id: http://core.svn.wordpress.org/trunk@36373 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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";

wp-admin/css/about-rtl.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 -5px 0 -15px;
 }
 
-.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-left: 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: right;
 	margin: 0 0 10px 10px;
-	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;
 }

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;
 }

wp-admin/css/common-rtl.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,

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,

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.5-alpha-36405';
+$wp_version = '4.5-alpha-36406';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.