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
This commit is contained in:
Andrea Fercia 2016-01-26 22:37:41 +00:00
parent 01f88b1ae4
commit 78bde761bb
3 changed files with 19 additions and 15 deletions

View File

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

View File

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

View File

@ -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,