From 94211aeb0537b7f83999e2f790cb68859279d321 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 23 Sep 2019 14:42:36 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@46241 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/colors/_admin.scss | 31 ++++++++ src/wp-admin/css/colors/_mixins.scss | 34 +++------ src/wp-admin/css/common.css | 45 ++++-------- src/wp-admin/css/forms.css | 4 +- src/wp-admin/css/themes.css | 3 +- src/wp-includes/css/buttons.css | 101 +++++++++++---------------- 6 files changed, 100 insertions(+), 118 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 4827ed6cc2..4ed668738b 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -43,10 +43,41 @@ input[type=radio]:checked:before { color: $link-focus; } +input[type="text"]:focus, +input[type="password"]:focus, +input[type="color"]:focus, +input[type="date"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="email"]:focus, +input[type="month"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="text"]:focus, +input[type="time"]:focus, +input[type="url"]:focus, +input[type="week"]:focus, +input[type="checkbox"]:focus, +input[type="radio"]:focus, +select:focus, +textarea:focus { + border-color: $highlight-color; + box-shadow: 0 0 0 1px $highlight-color; +} + /* Core UI */ .wp-core-ui { + .button.focus, + .button:focus, + .button-secondary:focus { + border-color: $button-color; + color: darken( $button-color, 5% ); + box-shadow: 0 0 0 1px $button-color; + } + .button-primary { @include button( $button-color ); } diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss index 7a764ab008..f0f3b31821 100644 --- a/src/wp-admin/css/colors/_mixins.scss +++ b/src/wp-admin/css/colors/_mixins.scss @@ -1,37 +1,31 @@ /* - * Button mixin- creates 3d-ish button effect with correct + * Button mixin- creates a button effect with correct * highlights/shadows, based on a base color. */ @mixin button( $button-color, $text-color: #fff ) { background: $button-color; - border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% ); + border-color: $button-color; color: $text-color; - box-shadow: 0 1px 0 darken( $button-color, 15% ); - text-shadow: 0 -1px 1px darken( $button-color, 15% ), - 1px 0 1px darken( $button-color, 15% ), - 0 1px 1px darken( $button-color, 15% ), - -1px 0 1px darken( $button-color, 15% ); &:hover, &:focus { background: lighten( $button-color, 3% ); - border-color: darken( $button-color, 15% ); + border-color: darken( $button-color, 3% ); color: $text-color; - box-shadow: 0 1px 0 darken( $button-color, 15% ); } &:focus { - box-shadow: inset 0 1px 0 darken( $button-color, 10% ), - 0 0 2px 1px #33b3db; + box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px $button-color; } &:active, &.active, &.active:focus, &.active:hover { - background: darken( $button-color, 10% ); - border-color: darken( $button-color, 15% ); - box-shadow: inset 0 2px 0 darken( $button-color, 15% ); + background: darken( $button-color, 5% ); + border-color: darken( $button-color, 5% ); } &[disabled], @@ -39,16 +33,8 @@ &.button-primary-disabled, &.disabled { color: hsl( hue( $button-color ), 10%, 80% ) !important; - background: darken( $button-color, 8% ) !important; - border-color: darken( $button-color, 15% ) !important; + background: lighten( $button-color, 15% ) !important; + border-color: lighten( $button-color, 15% ) !important; text-shadow: none !important; } - - &.button-hero { - box-shadow: 0 2px 0 darken( $button-color, 15% ) !important; - &:active { - box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important; - } - } - } diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 977102e891..6c389315da 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -272,11 +272,7 @@ a:focus, a:focus .media-icon img, .wp-person a:focus .gravatar { color: #124964; - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 1px dotted #555d66; } .ie8 a:focus { @@ -284,9 +280,7 @@ a:focus .media-icon img, } #adminmenu a:focus { - box-shadow: none; - /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 1px dotted #555d66; outline-offset: -1px; } @@ -623,15 +617,13 @@ code { position: relative; top: -3px; text-decoration: none; - border: none; - border: 1px solid #ccc; + border: 1px solid #7e8993; border-radius: 2px; - background: #f7f7f7; text-shadow: none; font-weight: 600; font-size: 13px; line-height: normal; /* IE8-IE11 need this for buttons */ - color: #0073aa; /* some of these controls are button elements and don't inherit from links */ + color: #555; /* use the standard color used for buttons */ cursor: pointer; } @@ -641,14 +633,14 @@ code { .wrap .add-new-h2:hover, /* deprecated */ .wrap .page-title-action:hover { - border-color: #008EC2; - background: #00a0d2; - color: #fff; + background: #f3f5f6; + border-color: #7e8993; + color: #007cba; } /* lower specificity: color needs to be overridden by :hover and :active */ .page-title-action:focus { - color: #124964; + color: #016087; } /* Dashicon for language options on General Settings and Profile screens */ @@ -658,8 +650,8 @@ code { } .wrap .page-title-action:focus { - border-color: #5b9dd9; - box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + border-color: #007cba; + box-shadow: 0 0 0 1px #007cba; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -841,9 +833,7 @@ img.emoji { } .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); + outline: 1px dotted #555d66; } .key-labels label { @@ -1441,8 +1431,7 @@ div.error p, } .notice-dismiss:focus { - outline: none; - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); + outline: 1px dotted #555d66; } .ie8 .notice-dismiss:focus { @@ -3070,9 +3059,7 @@ img { } .js .postbox .handlediv:focus .toggle-indicator:before { - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); + outline: 1px dotted #555d66; } /* @todo: appears to be Press This only and overridden */ @@ -3166,7 +3153,7 @@ img { } [role="treeitem"] .folder-label.focus { color: #124964; - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); + outline: 1px dotted #555d66; } [role="treeitem"].hover, [role="treeitem"] .folder-label.hover { @@ -3393,9 +3380,7 @@ img { } .widget-top .widget-action:focus .toggle-indicator:before { - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); + outline: 1px dotted #555d66; } .control-section .accordion-section-title:after, diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index b264994a4e..f5385c1822 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -50,8 +50,8 @@ input[type="checkbox"]:focus, input[type="radio"]:focus, select:focus, textarea:focus { - border-color: #5b9dd9; - box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + border-color: #007cba; + box-shadow: 0 0 0 1px #007cba; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 4fd28c2f3b..06f8d37e4f 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -178,8 +178,7 @@ body.js .theme-browser.search-loading { } .theme-browser .theme:focus { - border-color: #5b9dd9; - box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + outline: 1px dotted #555d66; } .theme-browser .theme:focus .more-details { diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 35de508fc3..ae07221ea0 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -124,9 +124,8 @@ TABLE OF CONTENTS: .wp-core-ui .button, .wp-core-ui .button-secondary { color: #555; - border-color: #cccccc; - background: #f7f7f7; - box-shadow: 0 1px 0 #cccccc; + border-color: #7e8993; + background: #f1f1f1; vertical-align: top; } @@ -140,16 +139,18 @@ TABLE OF CONTENTS: .wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { - background: #fafafa; - border-color: #999; - color: #23282d; + background: #f3f5f6; + border-color: #7e8993; + color: #007cba; } .wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { - border-color: #5b9dd9; - box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + background: #f3f5f6; + border-color: #007cba; + color: #016087; + box-shadow: 0 0 0 1px #007cba; } .wp-core-ui .button.active, @@ -158,15 +159,13 @@ TABLE OF CONTENTS: .wp-core-ui .button-secondary:active { background: #eee; border-color: #999; - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); transform: translateY(1px); + box-shadow: none; } .wp-core-ui .button.active:focus { - border-color: #5b9dd9; - box-shadow: - inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), - 0 0 3px rgba(0, 115, 170, 0.8); + border-color: #999; + box-shadow: 0 0 0 1px #999; } .wp-core-ui .button[disabled], @@ -210,11 +209,7 @@ TABLE OF CONTENTS: .wp-core-ui .button-link:focus { color: #124964; - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 1px dotted #555d66; } .wp-core-ui .button-link-delete { @@ -241,39 +236,37 @@ TABLE OF CONTENTS: ---------------------------------------------------------------------------- */ .wp-core-ui .button-primary { - background: #0085ba; - border-color: #0073aa #006799 #006799; - box-shadow: 0 1px 0 #006799; + background: #007cba; + border-color: #007cba; color: #fff; text-decoration: none; - text-shadow: 0 -1px 1px #006799, - 1px 0 1px #006799, - 0 1px 1px #006799, - -1px 0 1px #006799; + text-shadow: none; } .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { - background: #008ec2; - border-color: #006799; + background: #0071a1; + border-color: #0071a1; color: #fff; } .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { - box-shadow: 0 1px 0 #0073aa, - 0 0 2px 1px #33b3db; + box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px #007cba; } .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active { - background: #0073aa; - border-color: #006799; - box-shadow: inset 0 2px 0 #006799; + background: #00669b; + border-color: #00669b; + transform: translateY(1px); + box-shadow: none; } .wp-core-ui .button-primary[disabled], @@ -282,30 +275,12 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary.disabled { color: #66c6e4 !important; background: #008ec2 !important; - border-color: #007cb2 !important; + border-color: #008ec2 !important; box-shadow: none !important; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important; + text-shadow: none !important; cursor: default; } -.wp-core-ui .button.button-primary.button-hero { - box-shadow: 0 2px 0 #006799; -} - -.wp-core-ui .button.button-primary.button-hero:focus { - box-shadow: - 0 2px 0 #006799, - 0 1px 0 #0073aa, - 0 0 2px 1px #33b3db; -} - -.wp-core-ui .button.button-primary.button-hero.active, -.wp-core-ui .button.button-primary.button-hero.active:hover, -.wp-core-ui .button.button-primary.button-hero.active:focus, -.wp-core-ui .button.button-primary.button-hero:active { - box-shadow: inset 0 3px 0 #006799; -} - /* ---------------------------------------------------------------------------- 4.0 - Button Groups ---------------------------------------------------------------------------- */ @@ -324,14 +299,6 @@ TABLE OF CONTENTS: margin-right: -1px; } -.wp-core-ui .button-group > .button-primary { - z-index: 100; -} - -.wp-core-ui .button-group > .button:hover { - z-index: 20; -} - .wp-core-ui .button-group > .button:first-child { border-radius: 3px 0 0 3px; } @@ -340,11 +307,25 @@ TABLE OF CONTENTS: border-radius: 0 3px 3px 0; } +.wp-core-ui .button-group > .button-primary + .button { + border-left: 0; +} + .wp-core-ui .button-group > .button:focus { position: relative; z-index: 1; } +.wp-core-ui .button-group > .button.active { + background-color: #e2e4e7; + box-shadow: inset 0 1px 0 0 #999; +} + +.wp-core-ui .button-group > .button:active, +.wp-core-ui .button-group > .button.active { + transform: translateY(0); +} + /* ---------------------------------------------------------------------------- 5.0 - Responsive Button Styles ---------------------------------------------------------------------------- */