mirror of
git://develop.git.wordpress.org/
synced 2025-02-24 08:33:35 +01:00
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:
parent
01f88b1ae4
commit
78bde761bb
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user