WordPress.org

Make WordPress Core

Changeset 48293


Ignore:
Timestamp:
07/04/2020 10:42:41 AM (3 months ago)
Author:
afercia
Message:

Accessibility: Improve the focus style for Windows High Contrast mode in various parts of the admin interface.

Continues the introduction in core of new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline.
This change covers some parts of the interface for the meta boxes, Widgets, and the Customizer.

Props joedolson, kjellr, antpb, mikeschroder, Hareesh Pillai.
See #41286, #45910.
Fixes #47117.

Location:
trunk/src/wp-admin/css
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r48281 r48293  
    30583058.js .postbox .handlediv:focus {
    30593059    box-shadow: none;
    3060     outline: none;
     3060    /* Only visible in Windows High Contrast mode */
     3061    outline: 1px solid transparent;
    30613062}
    30623063
     
    30653066        0 0 0 1px #5b9dd9,
    30663067        0 0 2px 1px rgba(30, 140, 190, 0.8);
     3068    /* Only visible in Windows High Contrast mode */
     3069    outline: 1px solid transparent;
    30673070}
    30683071
     
    33853388.accordion-section-title:hover:after {
    33863389    color: #23282d;
     3390    /* Only visible in Windows High Contrast mode */
     3391    outline: 1px solid transparent;
    33873392}
    33883393
     
    34673472
    34683473.accordion-section-title:focus {
    3469     outline: none;
     3474    /* Only visible in Windows High Contrast mode */
     3475    outline: 1px solid transparent;
    34703476}
    34713477
     
    34733479.accordion-section-title:focus:after {
    34743480    border-color: #a0a5aa transparent;
     3481    /* Only visible in Windows High Contrast mode */
     3482    outline: 1px solid transparent;
    34753483}
    34763484
  • trunk/src/wp-admin/css/customize-controls.css

    r47293 r48293  
    843843    color: #0073aa;
    844844    border-top-color: #0073aa;
    845     outline: none;
    846845    box-shadow: none;
    847 }
    848 
     846    /* Only visible in Windows High Contrast mode */
     847    outline: 1px solid transparent;
     848}
     849
     850#customize-theme-controls .accordion-section-title:focus .customize-action {
     851    /* Only visible in Windows High Contrast mode */
     852    outline: 1px solid transparent;
     853    outline-offset: 1px;
     854}
    849855
    850856.customize-panel-back:hover,
     
    855861    background: #f3f3f5;
    856862    border-left-color: #0073aa;
    857     outline: none;
    858863    box-shadow: none;
     864    /* Only visible in Windows High Contrast mode */
     865    outline: 2px solid transparent;
     866    outline-offset: -2px;
    859867}
    860868
     
    13961404    border-style: solid;
    13971405    box-shadow: 0 0 0 1px #007cba;
     1406    /* Only visible in Windows High Contrast mode */
    13981407    outline: 2px solid transparent;
    13991408}
     
    22132222        background: #f3f3f5;
    22142223        border-left-color: #0073aa;
    2215         outline: none;
    22162224        box-shadow: none;
     2225        /* Only visible in Windows High Contrast mode */
     2226        outline: 2px solid transparent;
     2227        outline-offset: -2px;
    22172228    }
    22182229
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r47771 r48293  
    270270.customize-screen-options-toggle:focus,
    271271#customize-controls .customize-info .customize-help-toggle:focus {
    272     outline: none;
     272    /* Only visible in Windows High Contrast mode */
     273    outline: 1px solid transparent;
    273274}
    274275
  • trunk/src/wp-admin/css/widgets.css

    r47598 r48293  
    2626    background: none;
    2727    cursor: pointer;
    28     outline: none;
    2928}
    3029
     
    325324.sidebar-name .handlediv:focus {
    326325    box-shadow: none;
    327     outline: none;
     326    /* Only visible in Windows High Contrast mode */
     327    outline: 1px solid transparent;
    328328}
    329329
Note: See TracChangeset for help on using the changeset viewer.