WordPress.org
Get WordPress

Make WordPress Core

Changeset 57553


Ignore:
Timestamp:
02/07/2024 04:54:58 PM (13 months ago)
Author:
joedolson
Message:

Administration: Improve contrast and consistency of focus styles.

Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.

Props johnbillion, kebbet, joedolson, afercia.
Fixes #51870.

Location:
trunk/src
Files:
18 edited

Legend:

Unmodified
Added
Removed

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

    r57545 r57553  
    280280.wp-person a:focus .gravatar {
    281281    color: #043959;
    282     box-shadow:
    283         0 0 0 1px #4f94d4,
    284         0 0 2px 1px rgba(79, 148, 212, 0.8);
    285         /* Only visible in Windows High Contrast mode */
    286         outline: 1px solid transparent;
     282    box-shadow: 0 0 0 2px #2271b1;
     283    /* Only visible in Windows High Contrast mode */
     284    outline: 2px solid transparent;
    287285}
    288286
    … …  
    845843
    846844.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
    847     box-shadow:
    848         0 0 0 1px #4f94d4,
    849         0 0 2px 1px rgba(79, 148, 212, 0.8);
     845    box-shadow: 0 0 0 2px #2271b1;
     846    /* Only visible in Windows High Contrast mode */
     847    outline: 2px solid transparent;
    850848}
    851849
    … …  
    14611459
    14621460.notice-dismiss:focus {
    1463     outline: none;
    1464     box-shadow:
    1465         0 0 0 1px #4f94d4,
    1466         0 0 2px 1px rgba(79, 148, 212, 0.8);
     1461    box-shadow: 0 0 0 2px #2271b1;
     1462    /* Only visible in Windows High Contrast mode */
     1463    outline: 2px solid transparent;
    14671464}
    14681465
    … …  
    18051802
    18061803#screen-meta-links .show-settings:focus {
    1807     border-color: #4f94d4;
    1808     box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
     1804    border-color: #2271b1;
     1805    box-shadow: 0 0 0 1px #2271b1;
     1806    /* Only visible in Windows High Contrast mode */
     1807    outline: 2px solid transparent;
    18091808}
    18101809
    … …  
    21442143.postbox .handle-order-lower,
    21452144.postbox .handlediv {
    2146     width: 36px;
    2147     height: 36px;
     2145    width: 1.62rem;
     2146    height: 1.62rem;
    21482147    margin: 0;
    21492148    padding: 0;
    … …  
    31873186.postbox .handle-order-lower:focus,
    31883187.postbox .handlediv:focus {
    3189     box-shadow:
    3190         0 0 0 1px #4f94d4,
    3191         0 0 2px 1px rgba(79, 148, 212, 0.8);
     3188    box-shadow: inset 0 0 0 2px #2271b1;
     3189    border-radius: 50%;
    31923190    /* Only visible in Windows High Contrast mode */
    3193     outline: 1px solid transparent;
     3191    outline: 2px solid transparent;
    31943192}
    31953193
    … …  
    32903288    outline: 0;
    32913289}
     3290
     3291[role="treeitem"] a:focus,
    32923292[role="treeitem"] .folder-label.focus {
    32933293    color: #043959;
    3294     box-shadow:
    3295         0 0 0 1px #4f94d4,
    3296         0 0 2px 1px rgba(79, 148, 212, 0.8);
    3297 }
     3294    /* Reset default focus style. */
     3295    box-shadow: none;
     3296    /* Use an inset outline instead, so it's visible also over the current file item. */
     3297    outline: 2px solid #2271b1;
     3298    outline-offset: -2px;
     3299}
     3300
    32983301[role="treeitem"].hover,
    32993302[role="treeitem"] .folder-label.hover {
    … …  
    34353438    padding: 3px 0 3px 12px;
    34363439    text-decoration: none;
     3440}
     3441
     3442#templateside li.current-file > a {
     3443    padding-bottom: 0;
    34373444}
    34383445
    … …  
    35223529    color: #1d2327;
    35233530    /* Only visible in Windows High Contrast mode */
    3524     outline: 1px solid transparent;
     3531    outline: 2px solid transparent;
    35253532}
    35263533
    35273534.widget-top .widget-action:focus .toggle-indicator:before {
    3528     box-shadow:
    3529         0 0 0 1px #4f94d4,
    3530         0 0 2px 1px rgba(79, 148, 212, 0.8);
     3535    box-shadow: 0 0 0 2px #2271b1;
     3536    /* Only visible in Windows High Contrast mode */
     3537    outline: 2px solid transparent;
    35313538}
    35323539

  • trunk/src/wp-admin/css/customize-controls.css

    r57363 r57553  
    15671567
    15681568.customize-control-header .choice:focus {
    1569     outline: none;
    1570     box-shadow:
    1571         0 0 0 1px #4f94d4,
    1572         0 0 3px 1px rgba(79, 148, 212, 0.8);
     1569    box-shadow: 0 0 0 2px #2271b1;
     1570    /* Only visible in Windows High Contrast mode */
     1571    outline: 2px solid transparent;
    15731572}
    15741573
    … …  
    26802679#available-widgets-filter .clear-results:focus,
    26812680#available-menu-items-search .clear-results:focus {
    2682     box-shadow:
    2683         0 0 0 1px #4f94d4,
    2684         0 0 2px 1px rgba(79, 148, 212, 0.8);
     2681    box-shadow: 0 0 0 2px #2271b1;
     2682    /* Only visible in Windows High Contrast mode */
     2683    outline: 2px solid transparent;
    26852684}
    26862685

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r51727 r57553  
    272272#customize-controls .customize-info .customize-help-toggle:focus {
    273273    /* Only visible in Windows High Contrast mode */
    274     outline: 1px solid transparent;
     274    outline: 2px solid transparent;
    275275}
    276276
    … …  
    865865.menu-item-bar .item-delete:focus:before,
    866866#available-menu-items .item-add:focus:before {
    867     box-shadow:
    868         0 0 0 1px #4f94d4,
    869         0 0 2px 1px rgba(79, 148, 212, 0.8);
     867    box-shadow: 0 0 0 2px #2271b1;
     868    /* Only visible in Windows High Contrast mode */
     869    outline: 2px solid transparent;
    870870}
    871871

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

    r57363 r57553  
    12941294
    12951295div.tabs-panel-active:focus {
    1296     box-shadow: inset 0 0 0 1px #4f94d4, inset 0 0 2px 1px rgba(79, 148, 212, 0.8);
    1297     outline: 0 none;
     1296    box-shadow: inset 0 0 0 2px #2271b1;
     1297    /* Only visible in Windows High Contrast mode */
     1298    outline: 2px solid transparent;
    12981299}
    12991300

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

    r57520 r57553  
    680680}
    681681
     682#pass1:focus,
     683#pass1-text:focus {
     684    box-shadow: 0 0 0 2px #2271b1;
     685    /* Only visible in Windows High Contrast mode */
     686    outline: 2px solid transparent;
     687}
     688
    682689.pw-weak {
    683690    display: none;

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

    r57520 r57553  
    2727a:focus {
    2828    color: #043959;
    29     box-shadow:
    30         0 0 0 1px #4f94d4,
    31         0 0 2px 1px rgba(79, 148, 212, 0.8);
     29    box-shadow: 0 0 0 2px #2271b1;
     30    /* Only visible in Windows High Contrast mode */
     31    outline: 2px solid transparent;
    3232}
    3333

  • trunk/src/wp-admin/css/list-tables.css

    r57545 r57553  
    262262
    263263th .comment-grey-bubble {
    264     height: 16px;
    265264    width: 16px;
     265    /* Make sure the link clickable area fills the entire table header. */
     266    position: relative;
     267    top: 2px;
    266268}
    267269
    … …  
    344346.fixed .column-comments {
    345347    width: 5.5em;
    346     padding: 8px 0;
    347348    text-align: left;
    348349}
    … …  
    538539
    539540.wp-list-table .toggle-row:focus:before {
    540     box-shadow:
    541         0 0 0 1px #4f94d4,
    542         0 0 2px 1px rgba(79, 148, 212, 0.8);
     541    box-shadow: 0 0 0 2px #2271b1;
     542    /* Only visible in Windows High Contrast mode */
     543    outline: 2px solid transparent;
    543544}
    544545
    … …  
    650651}
    651652
    652 .fixed .column-comments.sortable a,
    653 .fixed .column-comments.sorted a {
    654     padding: 8px 0;
     653th.sortable a:focus,
     654th.sorted a:focus {
     655    box-shadow: inset 0 0 0 2px #2271b1;
     656    /* Only visible in Windows High Contrast mode */
     657    outline: 2px solid transparent;
    655658}
    656659

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

    r56956 r57553  
    3333a:focus {
    3434    color: #043959;
    35     box-shadow:
    36         0 0 0 1px #4f94d4,
    37         0 0 2px 1px rgba(79, 148, 212, 0.8);
     35    box-shadow: 0 0 0 2px #2271b1;
     36    /* Only visible in Windows High Contrast mode */
     37    outline: 2px solid transparent;
    3838}
    3939

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

    r57363 r57553  
    357357
    358358#find-posts-close:focus {
    359     box-shadow:
    360         0 0 0 1px #4f94d4,
    361         0 0 2px 1px rgba(79, 148, 212, 0.8);
     359    box-shadow: 0 0 0 2px #2271b1;
    362360    /* Only visible in Windows High Contrast mode */
    363361    outline: 2px solid transparent;
    … …  
    534532.media-frame.mode-grid .selected.attachment:focus,
    535533.media-frame.mode-grid .attachment.details:focus {
    536     box-shadow:
    537         inset 0 0 2px 3px #f0f0f1,
    538         inset 0 0 0 7px #4f94d4;
     534    box-shadow: inset 0 0 0 2px #2271b1;
    539535    /* Only visible in Windows High Contrast mode */
    540536    outline: 2px solid transparent;
    … …  
    11731169.image-editor .imgedit-settings .imgedit-help-toggle:focus {
    11741170    color: #2271b1;
    1175     border-color: #4f94d4;
    1176     box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
     1171    border-color: #2271b1;
     1172    box-shadow: 0 0 0 1px #2271b1;
    11771173    /* Only visible in Windows High Contrast mode */
    11781174    outline: 2px solid transparent;

  • trunk/src/wp-admin/css/nav-menus.css

    r56956 r57553  
    104104#nav-menu-bulk-actions-bottom {
    105105    margin: 1em 0;
    106     margin: calc( 1em + 9px ) 0 ;
     106    margin: calc( 1em + 9px ) 0;
    107107}
    108108
    … …  
    733733
    734734.nav-menus-php .item-edit:focus:before {
    735     box-shadow:
    736         0 0 0 1px #4f94d4,
    737         0 0 2px 1px rgba(79, 148, 212, 0.8);
     735    box-shadow: 0 0 0 2px #2271b1;
     736    /* Only visible in Windows High Contrast mode */
     737    outline: 2px solid transparent;
    738738}
    739739
    … …  
    992992@media only screen and (min-width: 783px) {
    993993    @supports (position: sticky) and (scroll-margin-bottom: 130px) {
    994        
     994
    995995        #nav-menu-footer {
    996996                position: sticky;

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

    r57363 r57553  
    177177
    178178.theme-browser .theme .more-details:focus {
    179     box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
     179    box-shadow: 0 0 0 2px #2271b1;
    180180}
    181181
    182182.theme-browser .theme.focus {
    183     border-color: #4f94d4;
    184     box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
     183    border-color: #2271b1;
     184    box-shadow: 0 0 0 1px #2271b1;
     185    /* Only visible in Windows High Contrast mode */
     186    outline: 2px solid transparent;
    185187}
    186188
    … …  
    15871589.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
    15881590.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
    1589     box-shadow:
    1590         0 0 0 1px #4f94d4,
    1591         0 0 2px 1px rgba(79, 148, 212, 0.8);
     1591    box-shadow: 0 0 0 2px #2271b1;
     1592    /* Only visible in Windows High Contrast mode */
     1593    outline: 2px solid transparent;
    15921594}
    15931595

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

    r52177 r57553  
    337337
    338338.sidebar-name .handlediv:focus .toggle-indicator:before {
    339     box-shadow:
    340         0 0 0 1px #4f94d4,
    341         0 0 2px 1px rgba(79, 148, 212, 0.8);
     339    box-shadow: 0 0 0 2px #2271b1;
     340    /* Only visible in Windows High Contrast mode */
     341    outline: 2px solid transparent;
    342342}
    343343

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

    r57520 r57553  
    216216.wp-core-ui .button-link:focus {
    217217    color: #043959;
    218     box-shadow:
    219         0 0 0 1px #4f94d4,
    220         0 0 2px 1px rgba(79, 148, 212, 0.8);
     218    box-shadow: 0 0 0 2px #2271b1;
    221219    /* Only visible in Windows High Contrast mode */
    222     outline: 1px solid transparent;
     220    outline: 2px solid transparent;
    223221}
    224222

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

    r57363 r57553  
    8888.mce-window-head .mce-close:focus .mce-i-remove,
    8989div.mce-tab:focus {
    90     box-shadow: 0 0 0 1px #4f94d4,
    91         0 0 2px 1px rgba(79, 148, 212, 0.8);
     90    box-shadow: 0 0 0 2px #2271b1;
     91    /* Only visible in Windows High Contrast mode */
     92    outline: 2px solid transparent;
    9293}
    9394
    … …  
    114115#wp-link .query-results:focus {
    115116    border-color: #4f94d4;
    116     box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
     117    box-shadow: 0 0 0 2px #2271b1;
     118    /* Only visible in Windows High Contrast mode */
     119    outline: 2px solid transparent;
    117120}
    118121
    … …  
    410413.qt-dfw:focus {
    411414    background: #f6f7f7;
    412     border-color: #50575e;
    413415    color: #1d2327;
    414     box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
    415     outline: none;
     416    box-shadow: 0 0 0 2px #2271b1;
     417    /* Only visible in Windows High Contrast mode */
     418    outline: 2px solid transparent;
    416419}
    417420
    … …  
    421424    background: #f0f0f1;
    422425    border-color: #50575e;
    423     box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.3);
    424426}
    425427
    … …  
    533535    background: #fff;
    534536    border: 1px solid #dcdcde;
    535     box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, 0.2);
    536537}
    537538
    538539.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover,
    539540.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus {
    540     border-color: #c3c4c7;
     541    box-shadow: 0 0 0 2px #2271b1;
     542    /* Only visible in Windows High Contrast mode */
     543    outline: 2px solid transparent;
    541544}
    542545
    … …  
    636639.mce-menubar .mce-menubtn:focus {
    637640    color: #043959;
    638     box-shadow:
    639         0 0 0 1px #4f94d4,
    640         0 0 2px 1px rgba(79, 148, 212, 0.8);
     641    box-shadow: 0 0 0 2px #2271b1;
     642    /* Only visible in Windows High Contrast mode */
     643    outline: 2px solid transparent;
    641644}
    642645
    … …  
    11321135
    11331136.wp-switch-editor:focus {
    1134     box-shadow:
    1135         0 0 0 1px #4f94d4,
    1136         0 0 2px 1px rgba(79, 148, 212, 0.8);
    1137     outline: none;
     1137    box-shadow: 0 0 0 2px #2271b1;
     1138    /* Only visible in Windows High Contrast mode */
     1139    outline: 2px solid transparent;
    11381140    color: #1d2327;
    11391141}
    … …  
    14461448
    14471449#wp-link-close:focus {
    1448     outline: none;
    1449     box-shadow:
    1450         0 0 0 1px #4f94d4,
    1451         0 0 2px 1px rgba(79, 148, 212, 0.8);
     1450    box-shadow: 0 0 0 2px #2271b1;
    14521451    /* Only visible in Windows High Contrast mode */
    14531452    outline: 2px solid transparent;

  • trunk/src/wp-includes/css/jquery-ui-dialog.css

    r50025 r57553  
    313313
    314314.ui-button.ui-dialog-titlebar-close:focus {
    315     box-shadow:
    316         0 0 0 1px #4f94d4,
    317         0 0 2px 1px rgba(79, 148, 212, 0.8);
     315    box-shadow: 0 0 0 2px #2271b1;
    318316    /* Only visible in Windows High Contrast mode */
    319317    outline: 2px solid transparent;

  • trunk/src/wp-includes/css/media-views.css

    r57363 r57553  
    4646
    4747.media-frame a:focus {
    48     box-shadow:
    49         0 0 0 1px #4f94d4,
    50         0 0 2px 1px rgba(79, 148, 212, 0.8);
     48    box-shadow: 0 0 0 2px #2271b1;
    5149    color: #043959;
    5250    /* Only visible in Windows High Contrast mode */
    53     outline: 1px solid transparent;
     51    outline: 2px solid transparent;
    5452}
    5553
    … …  
    650648
    651649.media-menu .media-menu-item:focus {
    652     box-shadow:
    653         0 0 0 1px #4f94d4,
    654         0 0 2px 1px rgba(79, 148, 212, 0.8);
     650    box-shadow: 0 0 0 2px #2271b1;
    655651    color: #043959;
    656652    /* Only visible in Windows High Contrast mode */
    657     outline: 1px solid transparent;
     653    outline: 2px solid transparent;
    658654}
    659655
    … …  
    705701
    706702.media-router .media-menu-item:focus {
    707     box-shadow:
    708         0 0 0 1px #4f94d4,
    709         0 0 2px 1px rgba(79, 148, 212, 0.8);
     703    box-shadow: 0 0 0 2px #2271b1;
    710704    color: #043959;
    711705    /* Only visible in Windows High Contrast mode */
    712     outline: 1px solid transparent;
     706    outline: 2px solid transparent;
    713707}
    714708
    … …  
    20182012.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
    20192013    color: #2271b1;
    2020     border-color: #4f94d4;
    2021     box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
     2014    border-color: #2271b1;
     2015    box-shadow: 0 0 0 1px #2271b1;
    20222016    /* Only visible in Windows High Contrast mode */
    20232017    outline: 2px solid transparent;
    … …  
    21352129
    21362130.mejs-container:focus {
    2137     outline: 1px solid #4f94d4;
    2138     box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8);
     2131    outline: 1px solid #2271b1;
     2132    box-shadow: 0 0 0 2px #2271b1;
    21392133}
    21402134

  • trunk/src/wp-includes/css/wp-embed-template.css

    r56956 r57553  
    217217.wp-embed-share-dialog-open:focus .dashicons,
    218218.wp-embed-share-dialog-close:focus .dashicons {
    219     box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
     219    box-shadow: 0 0 0 2px #2271b1;
     220    /* Only visible in Windows High Contrast mode */
     221    outline: 2px solid transparent;
    220222    border-radius: 100%;
    221223}

  • trunk/src/wp-includes/functions.php

    r57545 r57553  
    39063906        }
    39073907        a {
    3908             color: #0073aa;
     3908            color: #2271b1;
    39093909        }
    39103910        a:hover,
    39113911        a:active {
    3912             color: #006799;
     3912            color: #135e96;
    39133913        }
    39143914        a:focus {
    3915             color: #124964;
    3916             -webkit-box-shadow:
    3917                 0 0 0 1px #5b9dd9,
    3918                 0 0 2px 1px rgba(30, 140, 190, 0.8);
    3919             box-shadow:
    3920                 0 0 0 1px #5b9dd9,
    3921                 0 0 2px 1px rgba(30, 140, 190, 0.8);
    3922             outline: none;
     3915            color: #043959;
     3916            box-shadow: 0 0 0 2px #2271b1;
     3917            outline: 2px solid transparent;
    39233918        }
    39243919        .button {
Note: See TracChangeset for help on using the changeset viewer.