WordPress.org
Get WordPress

Make WordPress Core

Changeset 44544


Ignore:
Timestamp:
01/10/2019 04:46:44 PM (8 years ago)
Author:
afercia
Message:

Accessibility: Add focus styles for Windows High Contrast mode.

Introduces in core new focus styles dedicated to Windows High Contrast mode. The
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.

Fixes #41286.

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed

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

    r43309 r44544  
    331331        padding: 0;
    332332        margin: 0;
    333         overflow: hidden;
    334333}
    335334
    … …  
    548547        position: relative;
    549548        overflow: visible;
    550         line-height: 34px;
    551549        background: none;
    552550        color: #aaa;
    553551        cursor: pointer;
    554         outline: 0;
    555 }
    556 
    557 #collapse-button:hover,
     552}
     553
     554#collapse-button:hover {
     555        color: #00b9eb;
     556}
     557
    558558#collapse-button:focus {
    559559        color: #00b9eb;
     560        /* Only visible in Windows High Contrast mode */
     561        outline: 1px solid transparent;
     562        outline-offset: -1px;
    560563}
    561564
    … …  
    567570        top: 0;
    568571        left: 0;
    569         line-height: 34px;
     572}
     573
     574#collapse-button .collapse-button-label {
     575        top: 8px;
    570576}
    571577

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

    r44543 r44544  
    159159        box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    160160        text-decoration: none;
    161         outline: none;
     161        /* Only visible in Windows High Contrast mode */
     162        outline: 2px solid transparent;
     163        outline-offset: -2px;
    162164}
    163165
    … …  
    274276                0 0 0 1px #5b9dd9,
    275277                0 0 2px 1px rgba(30, 140, 190, .8);
     278        /* Only visible in Windows High Contrast mode */
     279        outline: 1px solid transparent;
    276280}
    277281
    … …  
    280284}
    281285
    282 #adminmenu a:focus,
     286#adminmenu a:focus {
     287        box-shadow: none;
     288        /* Only visible in Windows High Contrast mode */
     289        outline: 1px solid transparent;
     290        outline-offset: -1px;
     291}
     292
    283293.screen-reader-text:focus {
    284294        box-shadow: none;
    … …  
    618628        color: #0073aa; /* some of these controls are button elements and don't inherit from links */
    619629        cursor: pointer;
    620         outline: 0;
    621630}
    622631
    … …  
    640649        border-color: #5b9dd9;
    641650        box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     651        /* Only visible in Windows High Contrast mode */
     652        outline: 2px solid transparent;
    642653}
    643654

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

    r43309 r44544  
    5353        border-color: #5b9dd9;
    5454        box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     55        /* Only visible in Windows High Contrast mode */
     56        outline: 2px solid transparent;
    5557}
    5658
    … …  
    237239}
    238240
    239 .form-invalid input, .form-invalid input:focus,
    240 .form-invalid select, .form-invalid select:focus {
     241.form-invalid input,
     242.form-invalid input:focus,
     243.form-invalid select,
     244.form-invalid select:focus {
    241245        border-color: #dc3232 !important;
    242  box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
     246        box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
    243247}
    244248

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

    r43309 r44544  
    311311
    312312#find-posts-close:focus {
    313         outline: none;
    314313        box-shadow:
    315314                0 0 0 1px #5b9dd9,
    316315                0 0 2px 1px rgba(30, 140, 190, .8);
     316        /* Only visible in Windows High Contrast mode */
     317        outline: 2px solid transparent;
     318        outline-offset: -2px;
    317319}
    318320
    … …  
    529531                inset 0 0 2px 3px #f1f1f1,
    530532                inset 0 0 0 7px #5b9dd9;
    531         outline: none;
     533        /* Only visible in Windows High Contrast mode */
     534        outline: 2px solid transparent;
     535        outline-offset: -6px;
    532536}
    533537
    … …  
    682686}
    683687
     688.upload-php .media-modal-close:focus,
     689.edit-attachment-frame .edit-media-header .left:focus,
     690.edit-attachment-frame .edit-media-header .right:focus {
     691        /* Only visible in Windows High Contrast mode */
     692        outline: 2px solid transparent;
     693        outline-offset: -2px;
     694}
     695
    684696.upload-php .media-modal-close:focus .media-modal-icon:before,
    685697.upload-php .media-modal-close:hover .media-modal-icon:before {
    … …  
    10801092        color: #0074a2;
    10811093        border-color: #5b9dd9;
    1082         outline: none;
    10831094        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1095        /* Only visible in Windows High Contrast mode */
     1096        outline: 2px solid transparent;
    10841097}
    10851098

  • trunk/src/wp-includes/css/admin-bar.css

    r44349 r44544  
    5454#wpadminbar a img,
    5555#wpadminbar a img:hover {
    56         outline: none;
    5756        border: none;
    5857        text-decoration: none;
    … …  
    7271#wpadminbar div {
    7372        box-shadow: none;
    74         outline: none;
     73}
     74
     75#wpadminbar a:focus {
     76        /* Inherits transparent outline only visible in Windows High Contrast mode */
     77        outline-offset: -1px;
    7578}
    7679

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

    r43309 r44544  
    9393}
    9494
     95/* Only visible in Windows High Contrast mode */
    9596.wp-core-ui .button:active,
    9697.wp-core-ui .button:focus {
    97         outline: none;
     98        outline: 2px solid transparent;
     99        /* Reset inherited offset from Gutenberg */
     100        outline-offset: 0;
    98101}
    99102
    … …  
    191194        border-radius: 0;
    192195        background: none;
    193         outline: none;
    194196        cursor: pointer;
    195197        text-align: left;
    … …  
    212214                0 0 0 1px #5b9dd9,
    213215                0 0 2px 1px rgba(30, 140, 190, .8);
     216        /* Only visible in Windows High Contrast mode */
     217        outline: 1px solid transparent;
    214218}
    215219
    … …  
    281285
    282286.wp-core-ui .button.button-primary.button-hero {
    283  box-shadow: 0 2px 0 #006799;
     287        box-shadow: 0 2px 0 #006799;
    284288}
    285289
    … …  
    288292.wp-core-ui .button.button-primary.button-hero.active:focus,
    289293.wp-core-ui .button.button-primary.button-hero:active {
    290  box-shadow: inset 0 3px 0 #006799;
     294        box-shadow: inset 0 3px 0 #006799;
    291295}
    292296

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

    r44343 r44544  
    4949                0 0 0 1px #5b9dd9,
    5050                0 0 2px 1px rgba(30, 140, 190, .8);
    51         outline: none;
    5251        color: #124964;
     52        /* Only visible in Windows High Contrast mode */
     53        outline: 1px solid transparent;
    5354}
    5455
    … …  
    196197        border-color: #5b9dd9;
    197198        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     199        /* Only visible in Windows High Contrast mode */
     200        outline: 2px solid transparent;
     201        outline-offset: -2px;
    198202}
    199203
    … …  
    836840                inset 0 0 2px 3px #fff,
    837841                inset 0 0 0 7px #5b9dd9;
    838         outline: none;
     842        /* Only visible in Windows High Contrast mode */
     843        outline: 2px solid transparent;
     844        outline-offset: -6px;
    839845}
    840846
    … …  
    10101016                0 0 0 1px #fff,
    10111017                0 0 0 2px #0073aa;
     1018}
     1019
     1020.wp-core-ui .attachment.selected .check:focus {
     1021        /* Only visible in Windows High Contrast mode */
     1022        outline: 2px solid transparent;
    10121023}
    10131024
    … …  
    14861497                0 0 0 1px #fff,
    14871498                0 0 2px 3px #5b9dd9;
     1499        /* Only visible in Windows High Contrast mode */
     1500        outline: 2px solid transparent;
    14881501}
    14891502
    … …  
    17781791        color: #0074a2;
    17791792        border-color: #5b9dd9;
    1780         outline: none;
    17811793        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1794        /* Only visible in Windows High Contrast mode */
     1795        outline: 2px solid transparent;
    17821796}
    17831797
Note: See TracChangeset for help on using the changeset viewer.