vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-30 23:30:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Improve the focus style on the Credits screen.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/wp-admin/credits.php
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";

25
src/wp-admin/css/about.css
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;
}

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