WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/23/2019 02:42:36 PM (2 months 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.

File:
1 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 );
Note: See TracChangeset for help on using the changeset viewer.