Changeset 36406

Timestamp:

01/26/2016 10:37:41 PM (7 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-admin

Files:

• credits.php (modified) (1 diff)
• css/about.css (modified) (3 diffs)
• css/common.css (modified) (1 diff)

trunk/src/wp-admin/credits.php

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

trunk/src/wp-admin/css/about.css

@@ -333 +333 @@
 .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;
@@ -356 +356 @@
 }
 
-.about-wrap ul.compact li.wp-person {
+.about-wrap .compact .wp-person {
     height: auto;
     width: 180px;
@@ -363 +363 @@
 }
 
-.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;
 }
 

trunk/src/wp-admin/css/common.css

@@ -273 +273 @@
 
 a:focus,
-a:focus .media-icon img {
+a:focus .media-icon img,
+.wp-person a:focus .gravatar {
     color: #124964;
     -webkit-box-shadow: