WordPress.org

Make WordPress Core

Changeset 36406


Ignore:
Timestamp:
01/26/2016 10:37:41 PM (4 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/credits.php

    r36171 r36406  
    8181            foreach ( $group_data['data'] as $person_data ) {
    8282                echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
    83                 echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '">';
     83                echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
    8484                $size = 'compact' == $group_data['type'] ? 30 : 60;
    8585                $data = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    8686                $size *= 2;
    8787                $data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    88                 echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="' . esc_attr( $person_data[0] ) . '" /></a>' . "\n\t";
    89                 echo '<a class="web" href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '">' . esc_html( $person_data[0] ) . "</a>\n\t";
     88                echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
     89                echo esc_html( $person_data[0] ) . "</a>\n\t";
    9090                if ( ! $compact )
    9191                    echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
  • trunk/src/wp-admin/css/about.css

    r36396 r36406  
    333333.about-wrap h3.wp-people-group {
    334334    margin: 2.6em 0 1.33em;
     335    padding: 0;
    335336    font-size: 16px;
    336337    line-height: inherit;
    337338}
    338339
    339 .about-wrap ul.wp-people-group {
    340     overflow: hidden;
     340.about-wrap .wp-people-group {
    341341    padding: 0 5px;
    342342    margin: 0 -15px 0 -5px;
    343343}
    344344
    345 .about-wrap ul.compact {
     345.about-wrap .compact {
    346346    margin-bottom: 0
    347347}
    348348
    349 .about-wrap li.wp-person {
     349.about-wrap .wp-person {
    350350    display: inline-block;
    351351    vertical-align: top;
     
    356356}
    357357
    358 .about-wrap ul.compact li.wp-person {
     358.about-wrap .compact .wp-person {
    359359    height: auto;
    360360    width: 180px;
     
    363363}
    364364
    365 .about-wrap li.wp-person img.gravatar {
     365.about-wrap .wp-person .gravatar {
    366366    float: left;
    367367    margin: 0 10px 10px 0;
    368     padding: 2px;
     368    padding: 1px;
    369369    width: 60px;
    370370    height: 60px;
    371371}
    372372
    373 .about-wrap ul.compact li.wp-person img.gravatar {
     373.about-wrap .compact .wp-person .gravatar {
    374374    width: 30px;
    375375    height: 30px;
    376376}
    377377
    378 .about-wrap li.wp-person a.web {
    379     display: block;
     378.about-wrap .wp-person .web {
    380379    margin: 6px 0 2px;
    381380    font-size: 16px;
    382381    font-weight: normal;
    383     line-height: 1.6em;
     382    line-height: 2em;
    384383    text-decoration: none;
     384}
     385
     386.about-wrap .wp-person .title {
     387    display: block;
    385388}
    386389
  • trunk/src/wp-admin/css/common.css

    r36396 r36406  
    273273
    274274a:focus,
    275 a:focus .media-icon img {
     275a:focus .media-icon img,
     276.wp-person a:focus .gravatar {
    276277    color: #124964;
    277278    -webkit-box-shadow:
Note: See TracChangeset for help on using the changeset viewer.