Make WordPress Core

Changeset 44544


Ignore:
Timestamp:
01/10/2019 04:46:44 PM (6 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.