WordPress.org
Get WordPress

Make WordPress Core

Changeset 46241


Ignore:
Timestamp:
09/23/2019 02:42:36 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.

  • Introduces new styles for the buttons, with better contrast for borders and better focus style.
  • Introduces a new focus style for links.
  • The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).

Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/colors/_admin.scss

    r45276 r46241  
    4444}
    4545
     46input[type="text"]:focus,
     47input[type="password"]:focus,
     48input[type="color"]:focus,
     49input[type="date"]:focus,
     50input[type="datetime"]:focus,
     51input[type="datetime-local"]:focus,
     52input[type="email"]:focus,
     53input[type="month"]:focus,
     54input[type="number"]:focus,
     55input[type="search"]:focus,
     56input[type="tel"]:focus,
     57input[type="text"]:focus,
     58input[type="time"]:focus,
     59input[type="url"]:focus,
     60input[type="week"]:focus,
     61input[type="checkbox"]:focus,
     62input[type="radio"]:focus,
     63select:focus,
     64textarea:focus {
     65    border-color: $highlight-color;
     66    box-shadow: 0 0 0 1px $highlight-color;
     67}
     68
    4669
    4770/* Core UI */
    4871
    4972.wp-core-ui {
     73    .button.focus,
     74    .button:focus,
     75    .button-secondary:focus {
     76        border-color: $button-color;
     77        color: darken( $button-color, 5% );
     78        box-shadow: 0 0 0 1px $button-color;
     79    }
     80
    5081    .button-primary {
    5182        @include button( $button-color );

  • trunk/src/wp-admin/css/colors/_mixins.scss

    r41984 r46241  
    11/*
    2  * Button mixin- creates 3d-ish button effect with correct
     2 * Button mixin- creates a button effect with correct
    33 * highlights/shadows, based on a base color.
    44 */
    55@mixin button( $button-color, $text-color: #fff ) {
    66    background: $button-color;
    7     border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
     7    border-color: $button-color;
    88    color: $text-color;
    9     box-shadow: 0 1px 0 darken( $button-color, 15% );
    10     text-shadow: 0 -1px 1px darken( $button-color, 15% ),
    11         1px 0 1px darken( $button-color, 15% ),
    12         0 1px 1px darken( $button-color, 15% ),
    13         -1px 0 1px darken( $button-color, 15% );
    149
    1510    &:hover,
    1611    &:focus {
    1712        background: lighten( $button-color, 3% );
    18         border-color: darken( $button-color, 15% );
     13        border-color: darken( $button-color, 3% );
    1914        color: $text-color;
    20         box-shadow: 0 1px 0 darken( $button-color, 15% );
    2115    }
    2216
    2317    &:focus {
    24         box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
    25                     0 0 2px 1px #33b3db;
     18        box-shadow:
     19            0 0 0 1px #fff,
     20            0 0 0 3px $button-color;
    2621    }
    2722
    … …  
    3025    &.active:focus,
    3126    &.active:hover {
    32         background: darken( $button-color, 10% );
    33         border-color: darken( $button-color, 15% );
    34         box-shadow: inset 0 2px 0 darken( $button-color, 15% );
     27        background: darken( $button-color, 5% );
     28        border-color: darken( $button-color, 5% );
    3529    }
    3630
    … …  
    4034    &.disabled {
    4135        color: hsl( hue( $button-color ), 10%, 80% ) !important;
    42         background: darken( $button-color, 8% ) !important;
    43         border-color: darken( $button-color, 15% ) !important;
     36        background: lighten( $button-color, 15% ) !important;
     37        border-color: lighten( $button-color, 15% ) !important;
    4438        text-shadow: none !important;
    4539    }
    46 
    47     &.button-hero {
    48         box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
    49         &:active {
    50             box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
    51         }
    52     }
    53 
    5440}

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

    r46207 r46241  
    273273.wp-person a:focus .gravatar {
    274274    color: #124964;
    275     box-shadow:
    276         0 0 0 1px #5b9dd9,
    277         0 0 2px 1px rgba(30, 140, 190, 0.8);
    278     /* Only visible in Windows High Contrast mode */
    279     outline: 1px solid transparent;
     275    outline: 1px dotted #555d66;
    280276}
    281277
    … …  
    285281
    286282#adminmenu a:focus {
    287     box-shadow: none;
    288     /* Only visible in Windows High Contrast mode */
    289     outline: 1px solid transparent;
     283    outline: 1px dotted #555d66;
    290284    outline-offset: -1px;
    291285}
    … …  
    624618    top: -3px;
    625619    text-decoration: none;
    626     border: none;
    627     border: 1px solid #ccc;
     620    border: 1px solid #7e8993;
    628621    border-radius: 2px;
    629     background: #f7f7f7;
    630622    text-shadow: none;
    631623    font-weight: 600;
    632624    font-size: 13px;
    633625    line-height: normal; /* IE8-IE11 need this for buttons */
    634     color: #0073aa; /* some of these controls are button elements and don't inherit from links */
     626    color: #555; /* use the standard color used for buttons */
    635627    cursor: pointer;
    636628}
    … …  
    642634.wrap .add-new-h2:hover, /* deprecated */
    643635.wrap .page-title-action:hover {
    644     border-color: #008EC2;
    645     background: #00a0d2;
    646     color: #fff;
     636    background: #f3f5f6;
     637    border-color: #7e8993;
     638    color: #007cba;
    647639}
    648640
    649641/* lower specificity: color needs to be overridden by :hover and :active */
    650642.page-title-action:focus {
    651     color: #124964;
     643    color: #016087;
    652644}
    653645
    … …  
    659651
    660652.wrap .page-title-action:focus {
    661     border-color: #5b9dd9;
    662     box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
     653    border-color: #007cba;
     654    box-shadow: 0 0 0 1px #007cba;
    663655    /* Only visible in Windows High Contrast mode */
    664656    outline: 2px solid transparent;
    … …  
    842834
    843835.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
    844     box-shadow:
    845         0 0 0 1px #5b9dd9,
    846         0 0 2px 1px rgba(30, 140, 190, 0.8);
     836    outline: 1px dotted #555d66;
    847837}
    848838
    … …  
    14421432
    14431433.notice-dismiss:focus {
    1444     outline: none;
    1445     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
     1434    outline: 1px dotted #555d66;
    14461435}
    14471436
    … …  
    30713060
    30723061.js .postbox .handlediv:focus .toggle-indicator:before {
    3073     box-shadow:
    3074         0 0 0 1px #5b9dd9,
    3075         0 0 2px 1px rgba(30, 140, 190, 0.8);
     3062    outline: 1px dotted #555d66;
    30763063}
    30773064
    … …  
    31673154[role="treeitem"] .folder-label.focus {
    31683155    color: #124964;
    3169     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
     3156    outline: 1px dotted #555d66;
    31703157}
    31713158[role="treeitem"].hover,
    … …  
    33943381
    33953382.widget-top .widget-action:focus .toggle-indicator:before {
    3396     box-shadow:
    3397         0 0 0 1px #5b9dd9,
    3398         0 0 2px 1px rgba(30, 140, 190, 0.8);
     3383    outline: 1px dotted #555d66;
    33993384}
    34003385

  • trunk/src/wp-admin/css/forms.css

    r45693 r46241  
    5151select:focus,
    5252textarea:focus {
    53     border-color: #5b9dd9;
    54     box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
     53    border-color: #007cba;
     54    box-shadow: 0 0 0 1px #007cba;
    5555    /* Only visible in Windows High Contrast mode */
    5656    outline: 2px solid transparent;

  • trunk/src/wp-admin/css/themes.css

    r45188 r46241  
    179179
    180180.theme-browser .theme:focus {
    181     border-color: #5b9dd9;
    182     box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
     181    outline: 1px dotted #555d66;
    183182}
    184183

  • trunk/src/wp-includes/css/buttons.css

    r45701 r46241  
    125125.wp-core-ui .button-secondary {
    126126    color: #555;
    127     border-color: #cccccc;
    128     background: #f7f7f7;
    129     box-shadow: 0 1px 0 #cccccc;
     127    border-color: #7e8993;
     128    background: #f1f1f1;
    130129    vertical-align: top;
    131130}
    … …  
    141140.wp-core-ui .button:focus,
    142141.wp-core-ui .button-secondary:focus {
    143     background: #fafafa;
    144     border-color: #999;
    145     color: #23282d;
     142    background: #f3f5f6;
     143    border-color: #7e8993;
     144    color: #007cba;
    146145}
    147146
    … …  
    149148.wp-core-ui .button:focus,
    150149.wp-core-ui .button-secondary:focus {
    151     border-color: #5b9dd9;
    152     box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
     150    background: #f3f5f6;
     151    border-color: #007cba;
     152    color: #016087;
     153    box-shadow: 0 0 0 1px #007cba;
    153154}
    154155
    … …  
    159160    background: #eee;
    160161    border-color: #999;
    161     box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    162162    transform: translateY(1px);
     163    box-shadow: none;
    163164}
    164165
    165166.wp-core-ui .button.active:focus {
    166     border-color: #5b9dd9;
    167     box-shadow:
    168         inset 0 2px 5px -3px rgba(0, 0, 0, 0.5),
    169         0 0 3px rgba(0, 115, 170, 0.8);
     167    border-color: #999;
     168    box-shadow: 0 0 0 1px #999;
    170169}
    171170
    … …  
    211210.wp-core-ui .button-link:focus {
    212211    color: #124964;
    213     box-shadow:
    214         0 0 0 1px #5b9dd9,
    215         0 0 2px 1px rgba(30, 140, 190, 0.8);
    216     /* Only visible in Windows High Contrast mode */
    217     outline: 1px solid transparent;
     212    outline: 1px dotted #555d66;
    218213}
    219214
    … …  
    242237
    243238.wp-core-ui .button-primary {
    244     background: #0085ba;
    245     border-color: #0073aa #006799 #006799;
    246     box-shadow: 0 1px 0 #006799;
     239    background: #007cba;
     240    border-color: #007cba;
    247241    color: #fff;
    248242    text-decoration: none;
    249     text-shadow: 0 -1px 1px #006799,
    250         1px 0 1px #006799,
    251         0 1px 1px #006799,
    252         -1px 0 1px #006799;
     243    text-shadow: none;
    253244}
    254245
    … …  
    257248.wp-core-ui .button-primary.focus,
    258249.wp-core-ui .button-primary:focus {
    259     background: #008ec2;
    260     border-color: #006799;
     250    background: #0071a1;
     251    border-color: #0071a1;
    261252    color: #fff;
    262253}
    … …  
    264255.wp-core-ui .button-primary.focus,
    265256.wp-core-ui .button-primary:focus {
    266     box-shadow: 0 1px 0 #0073aa,
    267         0 0 2px 1px #33b3db;
     257    box-shadow:
     258        0 0 0 1px #fff,
     259        0 0 0 3px #007cba;
    268260}
    269261
    … …  
    272264.wp-core-ui .button-primary.active:focus,
    273265.wp-core-ui .button-primary:active {
    274     background: #0073aa;
    275     border-color: #006799;
    276     box-shadow: inset 0 2px 0 #006799;
     266    background: #00669b;
     267    border-color: #00669b;
     268    transform: translateY(1px);
     269    box-shadow: none;
    277270}
    278271
    … …  
    283276    color: #66c6e4 !important;
    284277    background: #008ec2 !important;
    285     border-color: #007cb2 !important;
     278    border-color: #008ec2 !important;
    286279    box-shadow: none !important;
    287     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
     280    text-shadow: none !important;
    288281    cursor: default;
    289 }
    290 
    291 .wp-core-ui .button.button-primary.button-hero {
    292     box-shadow: 0 2px 0 #006799;
    293 }
    294 
    295 .wp-core-ui .button.button-primary.button-hero:focus {
    296     box-shadow:
    297         0 2px 0 #006799,
    298         0 1px 0 #0073aa,
    299         0 0 2px 1px #33b3db;
    300 }
    301 
    302 .wp-core-ui .button.button-primary.button-hero.active,
    303 .wp-core-ui .button.button-primary.button-hero.active:hover,
    304 .wp-core-ui .button.button-primary.button-hero.active:focus,
    305 .wp-core-ui .button.button-primary.button-hero:active {
    306     box-shadow: inset 0 3px 0 #006799;
    307282}
    308283
    … …  
    325300}
    326301
    327 .wp-core-ui .button-group > .button-primary {
    328     z-index: 100;
    329 }
    330 
    331 .wp-core-ui .button-group > .button:hover {
    332     z-index: 20;
    333 }
    334 
    335302.wp-core-ui .button-group > .button:first-child {
    336303    border-radius: 3px 0 0 3px;
    … …  
    339306.wp-core-ui .button-group > .button:last-child {
    340307    border-radius: 0 3px 3px 0;
     308}
     309
     310.wp-core-ui .button-group > .button-primary + .button {
     311    border-left: 0;
    341312}
    342313
    … …  
    344315    position: relative;
    345316    z-index: 1;
     317}
     318
     319.wp-core-ui .button-group > .button.active {
     320    background-color: #e2e4e7;
     321    box-shadow: inset 0 1px 0 0 #999;
     322}
     323
     324.wp-core-ui .button-group > .button:active,
     325.wp-core-ui .button-group > .button.active {
     326    transform: translateY(0);
    346327}
    347328
Note: See TracChangeset for help on using the changeset viewer.