diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 3fd284bdeaee..a8dd687fb67d 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -44,10 +44,10 @@ body, input, button { a { @include transition(color $tmg-f2 ease-in-out 0s); text-decoration: none; - color: $blue; + color: $uxpl-blue-base; &:hover { - color: $orange-d1; + color: $uxpl-blue-hover-active; } } @@ -84,7 +84,7 @@ h1 { position: relative; top: ($baseline/4); display: block; - color: $gray-l2; + color: $gray-d2; } } @@ -293,14 +293,6 @@ p, ul, ol, dl { .button { padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2); } - - .new-button { - - } - - .view-button { - - } } } @@ -452,11 +444,11 @@ p, ul, ol, dl { .tip { @extend %t-copy-sub2; + @include text-align(right); + @include float(right); width: flex-grid(7, 12); - float: right; margin-top: ($baseline/2); - text-align: right; - color: $gray-l2; + color: $gray-d1; } } } @@ -705,9 +697,10 @@ hr.divider { color: $white; } - &:hover { + &:hover, + &:active { top: 0; - background: $blue; + background: $uxpl-blue-base; } } diff --git a/cms/static/sass/_build-v1.scss b/cms/static/sass/_build-v1.scss index f6770f4b9b2f..36c86d4d3406 100644 --- a/cms/static/sass/_build-v1.scss +++ b/cms/static/sass/_build-v1.scss @@ -81,3 +81,7 @@ @import 'developer'; // used for any developer-created scss that needs further polish/refactoring @import 'shame'; // used for any bad-form/orphaned scss + +// +CodeMirror Overrides +// ==================== +@import 'elements/codemirror-overrides'; diff --git a/cms/static/sass/elements/_codemirror-overrides.scss b/cms/static/sass/elements/_codemirror-overrides.scss new file mode 100644 index 000000000000..1d09f2301973 --- /dev/null +++ b/cms/static/sass/elements/_codemirror-overrides.scss @@ -0,0 +1,11 @@ +/* + * CodeMirror color contrast overrides + * (so we don't change the vendor file) + */ + +.CodeMirror { + + .CodeMirror-linenumber.CodeMirror-gutter-elt { + color: $gray-d3 !important; + } +} diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 57ce75625e19..6cc33dd6898c 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -62,22 +62,22 @@ // blue primary button %btn-primary-blue { @extend %ui-btn-primary; - background: $blue; - border-color: $blue-s1; + background: $uxpl-blue-base; + border-color: $uxpl-blue-base; color: $white; &:hover, &:active { - background: $blue-l1; - border-color: $blue-l1; + background: $uxpl-blue-hover-active; + border-color: $uxpl-blue-hover-active; } &.current, &.active { - background: $blue-d1; + background: $uxpl-blue-hover-active; + border-color: $uxpl-blue-hover-active; color: $blue-l4; - border-color: $blue-d2; &:hover, &:active { - background: $blue-d1; + background: $uxpl-blue-hover-active; } } } @@ -85,22 +85,22 @@ // green primary button %btn-primary-green { @extend %ui-btn-primary; - background: $green; - border-color: $green; + background: $uxpl-green-base; + border-color: $uxpl-green-base; color: $white; &:hover, &:active { - background: $green-s1; - border-color: $green-s1; + background: $uxpl-green-hover-active; + border-color: $uxpl-green-hover-active; } &.current, &.active { - background: $green-d1; - color: $green-l4; - border-color: $green-d2; + background: $uxpl-green-hover-active; + color: $white; + border-color: $uxpl-green-hover-active; &:hover, &:active { - background: $green-d1; + background: $uxpl-green-hover-active; } } } @@ -132,21 +132,17 @@ %btn-secondary-blue { @extend %ui-btn-secondary; border-color: $blue-l3; - color: $blue; + color: $uxpl-blue-base; &:hover, &:active { background: $blue-l4; - color: $blue-s2; + color: $uxpl-blue-hover-active; } &.current, &.active { border-color: $blue-l3; background: $blue-l3; - color: $blue-d1; - - &:hover, &:active { - - } + color: $uxpl-blue-base; } } @@ -235,7 +231,7 @@ &:hover, &:active { background: $white; - color: $blue-s1; + color: $uxpl-blue-hover-active; } &.current, &.active { @@ -243,7 +239,7 @@ color: $gray-d4; &:hover, &:active { - color: $blue-s1; + color: $uxpl-blue-hover-active; } } } @@ -268,7 +264,7 @@ color: $gray-l1; &:hover { - background-color: $blue; + background-color: $uxpl-blue-base; color: $gray-l6; } @@ -320,7 +316,7 @@ vertical-align: top; &:hover { - color: $blue; + color: $uxpl-blue-base; } .ui-toggle-expansion { @@ -358,7 +354,7 @@ // STATE: hover/active &:hover, &:active { @extend %ui-fake-link; - color: $ui-link-color-focus; + color: $uxpl-blue-base; } } @@ -404,7 +400,7 @@ position: absolute; top: -12px; left: -($baseline/4); - color: $blue-s1; + color: $blue-d1; } } diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index a95aed30aefb..76af72920ddb 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -27,10 +27,10 @@ } a { - color: $ui-link-color; + color: $uxpl-blue-base; &:hover, &:active { - color: $ui-link-color-focus; + color: $uxpl-blue-hover-active; } } diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 7bec93b1adb9..5a9538660492 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -249,7 +249,7 @@ form { &:focus { + .tip { - color: $gray; + color: $gray-d1; } } } diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 386e30ee1482..146766c3934c 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -76,7 +76,7 @@ color: $gray-d1; &:hover { - color: $blue-s1; + color: $uxpl-blue-hover-active; } } } @@ -151,7 +151,8 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - opacity: 0.75; + opacity: 1.0; + color: $gray-d3; } .course-org { @@ -172,10 +173,10 @@ .course-link { @include transition(color $tmg-f2 ease-in-out 0s); display: block; - color: $gray-d1; + color: $gray-d3; &:hover { - color: $blue-s1; + color: $uxpl-blue-hover-active; } } } @@ -398,10 +399,10 @@ body.course.view-team .nav-library-settings .title, body.course.view-team .nav-library-settings-team, { - color: $blue; + color: $uxpl-blue-base; a { - color: $blue; + color: $uxpl-blue-base; pointer-events: none; } } diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index 095eec39bc85..f0cfdeaf928c 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -261,7 +261,7 @@ float: right; margin-top: ($baseline/2); text-align: right; - color: $gray-l2; + color: $gray-d1; } } } diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index 06bb1fe45dcd..33805dec34a0 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -26,13 +26,13 @@ @extend %t-title8; @extend %t-strong; margin-bottom: ($baseline/4); - color: $gray-l2; + color: $gray-d2; text-transform: uppercase; } .meta { @extend %t-copy-sub2; - color: $gray-l1; + color: $gray-d2; } } } @@ -110,7 +110,7 @@ @extend %t-title5; @extend %t-strong; margin-bottom: ($baseline*0.75); - color: $green-d1; + color: $uxpl-green-base; } // add component - list of green buttons @@ -131,16 +131,10 @@ height: ($baseline*5); margin-bottom: ($baseline/2); box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset; - border: 1px solid $green-d2; border-radius: ($baseline/4); padding: 0; - background-color: $green-l1; text-align: center; - color: $white; - - &:hover { - background: $green-s1; - } + @extend %btn-primary-green; .name { @include box-sizing(border-box); diff --git a/cms/static/sass/elements/_pagination.scss b/cms/static/sass/elements/_pagination.scss index 902f7c410a93..c7e7e67cc72e 100644 --- a/cms/static/sass/elements/_pagination.scss +++ b/cms/static/sass/elements/_pagination.scss @@ -69,7 +69,7 @@ margin: 0 ($baseline*0.75); padding: ($baseline/4); text-align: center; - color: $gray; + color: $gray-d2; } .current-page { @@ -82,7 +82,7 @@ @extend %t-title4; @extend %t-regular; vertical-align: middle; - color: $gray-l2; + color: $gray; } .pagination-form { diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss index 4ed0e06f6973..3c96fa328a09 100644 --- a/cms/static/sass/elements/_sock.scss +++ b/cms/static/sass/elements/_sock.scss @@ -31,7 +31,7 @@ @extend %t-action4; background: $gray-l5; padding: ($baseline/2) $baseline; - color: $gray; + color: $gray-d2; .icon { @extend %t-icon6; @@ -39,7 +39,7 @@ } &:hover { - background: $blue; + background: $uxpl-blue-base; color: $white; } } diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss index 1bb350f4fe83..5fc64575cad2 100644 --- a/cms/static/sass/elements/_system-help.scss +++ b/cms/static/sass/elements/_system-help.scss @@ -220,7 +220,7 @@ margin: 0 0 $baseline 0; border-bottom: 1px solid $gray-l4; padding: 0 0 $baseline 0; - color: $gray-l1; + color: $gray-d1; &:last-child { margin-bottom: 0; diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss index bcea673d8a65..61940d0b71c8 100644 --- a/cms/static/sass/elements/_xblocks.scss +++ b/cms/static/sass/elements/_xblocks.scss @@ -167,7 +167,7 @@ display: inline-block; vertical-align: top; width: flex-grid(9, 12); - color: $gray-l1; + color: $gray-d1; .count-current-shown, .count-total, diff --git a/cms/static/sass/partials/_variables.scss b/cms/static/sass/partials/_variables.scss index fa9c3159d03d..4e9f1dac9db7 100644 --- a/cms/static/sass/partials/_variables.scss +++ b/cms/static/sass/partials/_variables.scss @@ -87,6 +87,12 @@ $blue-t1: rgba($blue, 0.25); $blue-t2: rgba($blue, 0.50); $blue-t3: rgba($blue, 0.75); +$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant +$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant + +$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant +$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant + $pink: rgb(183, 37, 103); // #b72567; $pink-l1: tint($pink,20%); $pink-l2: tint($pink,40%); diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index 2c5da78093aa..48e2ea798640 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -148,7 +148,7 @@ &:focus { + .tip { - color: $gray; + color: $gray-d1; } } } @@ -173,7 +173,7 @@ @include transition(color $tmg-f3 ease-in-out 0s); display: block; margin-top: ($baseline/4); - color: $gray-l3; + color: $gray-d1; } } @@ -214,7 +214,7 @@ margin: 0 0 $baseline 0; border-bottom: 1px solid $gray-l4; padding: 0 0 $baseline 0; - color: $gray-l1; + color: $gray-d1; &:last-child { margin-bottom: 0; diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss index d7f709ab5f96..5349aa472566 100644 --- a/cms/static/sass/views/_certificates.scss +++ b/cms/static/sass/views/_certificates.scss @@ -242,11 +242,11 @@ @include transition(color, 0.15s, ease-in-out); display: block; margin-top: ($baseline/2); - color: $gray-l2; + color: $gray-d1; } .is-focused .tip { - color: $gray; + color: $gray-d2; } @@ -325,7 +325,7 @@ &:focus { + .tip { - color: $gray; + color: $gray-d2; } } } @@ -588,7 +588,7 @@ @include transition(color, 0.15s, ease-in-out); display: block; margin-top: ($baseline/4); - color: $gray-l3; + color: $gray-d1; } .field { @@ -661,7 +661,7 @@ &:focus { + .tip { - color: $gray; + color: $gray-d1; } } } diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index 999a19ccaa86..3c26cf1a0b50 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -277,7 +277,7 @@ @extend %t-copy-sub2; display: inline-block; margin: ($baseline/4) 0; - color: $gray-l2; + color: $gray-d1; } } diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 42de626249c6..a1614a9dc3a4 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -300,7 +300,7 @@ margin: 0 10px; &.active { - border-bottom: 4px solid $blue; + border-bottom: 4px solid $uxpl-blue-base; } &.active, &:hover { @@ -310,7 +310,7 @@ } a { - color: $blue; + color: $uxpl-blue-base; cursor: pointer; display: inline-block; } @@ -492,7 +492,6 @@ @extend %t-copy-sub1; @include transition(opacity $tmg-f1 ease-in-out 0); color: $gray; - opacity: 0.75; .metadata-item { display: inline-block; diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss index 897860a7c646..ae31c8c56e3e 100644 --- a/cms/static/sass/views/_group-configuration.scss +++ b/cms/static/sass/views/_group-configuration.scss @@ -269,11 +269,11 @@ @include transition(color, 0.15s, ease-in-out); display: block; margin-top: ($baseline/4); - color: $gray-l3; + color: $gray-d1; } .is-focused .tip { - color: $gray; + color: $gray-d2; } @@ -352,7 +352,7 @@ &:focus { + .tip { - color: $gray; + color: $gray-d1; } } } diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index ae46150d30f4..fe063fe1f6ed 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -104,7 +104,7 @@ @include float(right); margin-top: ($baseline/2); @include text-align(right); - color: $gray-l2; + color: $gray-d1; } } @@ -219,7 +219,7 @@ margin: 0 0 ($baseline/4) 0; &.is-focused { - color: $blue; + color: $uxpl-blue-base; } } @@ -242,7 +242,7 @@ &:focus { + .tip { - color: $gray; + color: $gray-d1; } } } @@ -398,9 +398,10 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + color: $uxpl-blue-base; &:hover { - + color: $uxpl-blue-hover-active; } } } @@ -546,7 +547,7 @@ @extend %t-copy-sub2; display: block; margin-top: ($baseline/2); - color: $gray-l3; + color: $gray-d3; } } @@ -562,7 +563,7 @@ .action-upload-image { @extend %ui-btn-flat-outline; - float: right; + @include float(right); width: flex-grid(2,9); margin-top: ($baseline/4); padding: ($baseline/2) $baseline; @@ -1039,7 +1040,7 @@ } .tip { - color: $gray-l1; + color: $gray-d1; } input.error { diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 1e8ca56c7cc2..b8d177d62075 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -44,10 +44,10 @@ @extend %ui-fake-link; &:hover { - color: $blue; + color: $uxpl-blue-base; .ui-toggle-expansion { - color: $blue; + color: $uxpl-blue-base; } } } @@ -212,7 +212,7 @@ margin: 0 0 ($baseline/4) 0; &.is-focused { - color: $blue; + color: $uxpl-blue-base; } } @@ -256,7 +256,7 @@ &:focus { + .tip { - color: $gray; + color: $gray-d1; } } } @@ -281,7 +281,7 @@ @include transition(color, 0.15s, ease-in-out); display: block; margin-top: ($baseline/4); - color: $gray-l3; + color: $gray-d1; } &.error { diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss index b26def49e22b..538110dac595 100644 --- a/common/static/sass/_mixins-inherited.scss +++ b/common/static/sass/_mixins-inherited.scss @@ -147,13 +147,13 @@ @include button; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; - border: 1px solid $green-d1; + border: 1px solid $uxpl-green-base; border-radius: 3px; - background-color: $green; + background-color: $uxpl-green-base; color: $white; &:hover, &:focus { - background-color: $green-s1; + background-color: $uxpl-green-hover-active; color: $white; } @@ -168,13 +168,13 @@ @mixin blue-button { @include button; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - border: 1px solid $blue-d1; + border: 1px solid $uxpl-blue-base; border-radius: 3px; - background-color: $blue; + background-color: $uxpl-blue-base; color: $white; &:hover, &:focus, &:active { - background-color: $blue-s2; + background-color: $uxpl-blue-hover-active; color: $white; } diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index ef8a09897463..89dca29d3f76 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -261,14 +261,6 @@ background: transparent; line-height: 1.5em; text-align: center; - - &:hover, &:active, &:focus { - - } - - &.current, &.active { - - } } %ui-btn-flat-outline { @@ -277,14 +269,14 @@ @extend %t-action4; text-align: center; border-radius: ($baseline/4); - border: 1px solid $blue-l2; + border: 1px solid $uxpl-blue-base; padding: 1px ($baseline/2) 2px ($baseline/2); - background-color: transparent; - color: $blue-l2; + background-color: $white; + color: $uxpl-blue-base; &:hover, &:focus { - border: 1px solid $blue; - background-color: $blue; + border: 1px solid $uxpl-blue-hover-active; + background-color: $uxpl-blue-hover-active; color: $white; } @@ -320,7 +312,7 @@ @extend %ui-btn-non; &:hover, &:focus { - background-color: $blue; + background-color: $uxpl-blue-base; color: $white; } } diff --git a/common/test/acceptance/tests/lms/test_lms.py b/common/test/acceptance/tests/lms/test_lms.py index fa62036db90c..6d27e03506df 100644 --- a/common/test/acceptance/tests/lms/test_lms.py +++ b/common/test/acceptance/tests/lms/test_lms.py @@ -169,7 +169,7 @@ def test_third_party_login(self): # Navigate to the login page self.login_page.visit() # Baseline screen-shots are different for chrome and firefox. - self.assertScreenshot('#login .login-providers', 'login-providers-{}'.format(self.browser.name)) + self.assertScreenshot('#login .login-providers', 'login-providers-{}'.format(self.browser.name), .25) # Try to log in using "Dummy" provider self.login_page.click_third_party_dummy_provider() @@ -217,7 +217,7 @@ def test_hinted_login(self): ) # Baseline screen-shots are different for chrome and firefox. - self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name)) + self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name), .25) self.login_page.click_third_party_dummy_provider() # We should now be redirected to the course page @@ -354,7 +354,7 @@ def test_third_party_register(self): # Navigate to the register page self.register_page.visit() # Baseline screen-shots are different for chrome and firefox. - self.assertScreenshot('#register .login-providers', 'register-providers-{}'.format(self.browser.name)) + self.assertScreenshot('#register .login-providers', 'register-providers-{}'.format(self.browser.name), .25) # Try to authenticate using the "Dummy" provider self.register_page.click_third_party_dummy_provider() diff --git a/common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py b/common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py index adaad82053e2..80ba3813279c 100644 --- a/common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py +++ b/common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py @@ -95,8 +95,7 @@ def test_bulk_email_a11y(self): ]) self.send_email_page.a11y_audit.config.set_rules({ "ignore": [ - 'button-name', # TinyMCE button is missing accessible text - 'color-contrast', # TODO: AC-491 + 'button-name', # TODO: AC-491 ] }) self.send_email_page.a11y_audit.check_for_accessibility_errors() @@ -1053,7 +1052,6 @@ def test_certificates_a11y(self): "ignore": [ 'aria-valid-attr-value', # TODO: AC-491 'checkboxgroup', # TODO: AC-491 - 'color-contrast', # TODO: AC-491 'duplicate-id', # TODO: AC-491 'label', # TODO: AC-491 'radiogroup', # TODO: AC-491 @@ -1272,7 +1270,6 @@ def test_invalidate_certificates_a11y(self): "ignore": [ 'aria-valid-attr-value', # TODO: AC-491 'checkboxgroup', # TODO: AC-491 - 'color-contrast', # TODO: AC-491 'duplicate-id', # TODO: AC-491 'label', # TODO: AC-491 'radiogroup', # TODO: AC-491 diff --git a/common/test/acceptance/tests/lms/test_problem_types.py b/common/test/acceptance/tests/lms/test_problem_types.py index 44cc05c6ff92..0654d3e5d69d 100644 --- a/common/test/acceptance/tests/lms/test_problem_types.py +++ b/common/test/acceptance/tests/lms/test_problem_types.py @@ -252,7 +252,6 @@ def test_problem_type_a11y(self): 'aria-roles', # TODO: AC-491 'checkboxgroup', # TODO: AC-491 'radiogroup', # TODO: AC-491 - 'color-contrast', # TODO: AC-491 'section', # TODO: AC-491 'label', # TODO: AC-491 ] @@ -694,7 +693,6 @@ def setUp(self, *args, **kwargs): self.problem_page.a11y_audit.config.set_rules({ 'ignore': [ 'section', # TODO: AC-491 - 'color-contrast', # TODO: AC-286 'label', # TODO: AC-286 ] }) diff --git a/common/test/acceptance/tests/studio/test_studio_library.py b/common/test/acceptance/tests/studio/test_studio_library.py index 8dd0394c14e7..95462473ca50 100644 --- a/common/test/acceptance/tests/studio/test_studio_library.py +++ b/common/test/acceptance/tests/studio/test_studio_library.py @@ -656,7 +656,6 @@ def test_lib_edit_page_a11y(self): # we will ignore this error in the test until we fix them. lib_page.a11y_audit.config.set_rules({ "ignore": [ - 'color-contrast', # TODO: AC-225 'link-href', # TODO: AC-226 'nav-aria-label', # TODO: AC-227 'icon-aria-hidden', # TODO: AC-229 diff --git a/common/test/acceptance/tests/studio/test_studio_settings.py b/common/test/acceptance/tests/studio/test_studio_settings.py index 795408dccfa4..d5df239a4537 100644 --- a/common/test/acceptance/tests/studio/test_studio_settings.py +++ b/common/test/acceptance/tests/studio/test_studio_settings.py @@ -503,7 +503,6 @@ def test_studio_settings_page_a11y(self): # we will ignore this error in the test until we fix them. self.settings_page.a11y_audit.config.set_rules({ "ignore": [ - 'color-contrast', # TODO: AC-225 'link-href', # TODO: AC-226 'nav-aria-label', # TODO: AC-227 'icon-aria-hidden', # TODO: AC-229 diff --git a/common/test/acceptance/tests/studio/test_studio_textbooks.py b/common/test/acceptance/tests/studio/test_studio_textbooks.py index 87c9cb3d60d4..9c902002820c 100644 --- a/common/test/acceptance/tests/studio/test_studio_textbooks.py +++ b/common/test/acceptance/tests/studio/test_studio_textbooks.py @@ -60,7 +60,6 @@ def test_textbook_page_a11y(self): self.textbook_view_page.a11y_audit.config.set_rules({ 'ignore': [ - 'color-contrast', # AC-500 'skip-link', # AC-501 'link-href', # AC-502 'section' # AC-503 diff --git a/common/test/test-theme/cms/static/sass/partials/_variables.scss b/common/test/test-theme/cms/static/sass/partials/_variables.scss index 4265a16fec0a..33769e704a36 100644 --- a/common/test/test-theme/cms/static/sass/partials/_variables.scss +++ b/common/test/test-theme/cms/static/sass/partials/_variables.scss @@ -87,6 +87,12 @@ $blue-t1: rgba($blue, 0.25); $blue-t2: rgba($blue, 0.50); $blue-t3: rgba($blue, 0.75); +$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant +$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant + +$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant +$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant + $pink: rgb(183, 37, 103); // #b72567; $pink-l1: tint($pink,20%); $pink-l2: tint($pink,40%); diff --git a/lms/static/js/certificates/views/certificate_bulk_whitelist.js b/lms/static/js/certificates/views/certificate_bulk_whitelist.js index 9b71832ba38f..31f22753c9b4 100644 --- a/lms/static/js/certificates/views/certificate_bulk_whitelist.js +++ b/lms/static/js/certificates/views/certificate_bulk_whitelist.js @@ -206,7 +206,7 @@ chooseFile: function(event) { if (event && event.preventDefault) { event.preventDefault(); } if (event.currentTarget.files.length === 1) { - this.$el.find(DOM_SELECTORS.upload_csv_button).removeClass('disabled'); + this.$el.find(DOM_SELECTORS.upload_csv_button).attr('disabled', 'false'); this.$el.find(DOM_SELECTORS.browse_file).val( event.currentTarget.value.substring(event.currentTarget.value.lastIndexOf("\\") + 1)); } diff --git a/lms/static/js/certificates/views/certificate_whitelist.js b/lms/static/js/certificates/views/certificate_whitelist.js index 101196994e93..66594c87b472 100644 --- a/lms/static/js/certificates/views/certificate_whitelist.js +++ b/lms/static/js/certificates/views/certificate_whitelist.js @@ -34,10 +34,10 @@ var template = this.loadTemplate('certificate-white-list'); this.$el.html(template({certificates: this.collection.models})); if (!this.active_certificate || this.collection.isEmpty()){ - this.$("#generate-exception-certificates").addClass("is-disabled"); + this.$("#generate-exception-certificates").attr("disabled", "disabled"); } else { - this.$("#generate-exception-certificates").removeClass("is-disabled"); + this.$("#generate-exception-certificates").removeAttr("disabled"); } }, @@ -107,4 +107,4 @@ }); } ); -}).call(this, define || RequireJS.define); \ No newline at end of file +}).call(this, define || RequireJS.define); diff --git a/lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js b/lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js index 2611b7cf0e88..a6e961d7f3f3 100644 --- a/lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js +++ b/lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js @@ -204,7 +204,7 @@ define([ it("verifies that Generate Exception Certificate button is disabled", function() { expect(view.$el.find('table tbody tr').length).toBe(2); - expect(view.$el.find('#generate-exception-certificates').first()).not.toHaveClass('is-disabled'); + expect(view.$el.find('#generate-exception-certificates').first()).not.toHaveAttr('disabled'); // Render the view with active_certificate set to false. view = new CertificateWhiteListView({ @@ -214,7 +214,7 @@ define([ view.render(); // Verify that `Generate Exception Certificate` is disabled even when Collection is not empty. - expect(view.$el.find('#generate-exception-certificates').first()).toHaveClass('is-disabled'); + expect(view.$el.find('#generate-exception-certificates').first()).toHaveAttr('disabled', 'disabled'); expect(view.$el.find('table tbody tr').length).toBe(2); }); diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index b624f8d67820..d4eb81ddcd38 100755 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -53,11 +53,11 @@ div.book-wrapper { a { @include clearfix(); padding: 0; - color: $link-color; + color: $uxpl-blue-base; &:hover, &:focus { background-color: transparent; - color: $link-hover; + color: $uxpl-blue-hover-active; .page-number { opacity: 1.0; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 220aa301fa45..7cf7a43a9421 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -75,7 +75,7 @@ html.video-fullscreen { color: $gray; } a:active, a:hover { - color: $link-hover; + color: $uxpl-blue-base; } .license-label, @@ -151,7 +151,7 @@ html.video-fullscreen { } button.gated-sequence { background: $transparent; - color: $blue-d1; + color: $uxpl-blue-base; border: none; box-shadow: none; @include text-align(left); @@ -160,7 +160,7 @@ html.video-fullscreen { &:hover { background-color: transparent; - color: $link-hover; + color: $uxpl-blue-hover-active; } } @@ -169,12 +169,12 @@ html.video-fullscreen { font-size: 1.3em; } .gated-sequence { - color: #147ABA; + color: $uxpl-blue-base; font-weight: 600; padding: ($baseline / 1.5) ($baseline / 4); a.start-timed-exam { cursor: pointer; - color: #147ABA; + color: $uxpl-blue-base; font-weight: 600; position: relative; top: ($baseline/10); @@ -306,7 +306,7 @@ html.video-fullscreen { } &:last-child { > .practice-exam { - color: #147ABA; + color: $uxpl-blue-base; } border-bottom: none; } @@ -663,3 +663,14 @@ section.self-assessment { } +/* + * CodeMirror color contrast overrides + * (so we don't change the vendor file) + */ + +.CodeMirror { + + .CodeMirror-linenumber.CodeMirror-gutter-elt { + color: $gray-d3 !important; + } +} diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 5260176c79c6..ab6550caabd8 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -33,7 +33,7 @@ .file-download-link a { font-size: 15px; - color: $link-color; + color: $uxpl-blue-base; text-decoration: underline; padding: ($baseline/4); } @@ -674,7 +674,7 @@ // .add-field input[type="button"].add { - @include idashbutton($blue); + @include idashbutton($uxpl-blue-base); position: absolute; @include right($baseline); } @@ -756,7 +756,7 @@ } } .form-submit { - @include idashbutton($blue); + @include idashbutton($uxpl-blue-base); @include font-size(14); @include line-height(14); margin-right: ($baseline/2); @@ -778,7 +778,7 @@ } .action-create { - @include idashbutton($blue); + @include idashbutton($uxpl-blue-base); @extend %t-weight4; @include float(right); @include text-align(right); @@ -803,7 +803,7 @@ // specific message actions .message .action-create { - @include idashbutton($blue); + @include idashbutton($uxpl-blue-base); } } @@ -979,7 +979,7 @@ } .action-submit { - @include idashbutton($blue); + @include idashbutton($uxpl-blue-base); // needed to override very poor specificity and base rules for blue button @include font-size(14); margin-bottom: 0; @@ -1126,7 +1126,7 @@ } .cohorted-text { - color: $link-color; + color: $uxpl-blue-base; } .discussions-wrapper { @@ -1427,7 +1427,7 @@ input[name="subject"] { color: #3c3c3c; line-height: 30px; .add{ - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @extend .button-reset; font-size: em(13); @include float(right); @@ -1632,7 +1632,7 @@ input[name="subject"] { border-radius: 2px; input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button, input[type="button"]#set_course_button, input[type="button"]#lookup_regcode { - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @extend .button-reset; display: block; height: auto; @@ -1641,7 +1641,7 @@ input[name="subject"] { white-space: normal; } input[name="generate-registration-codes-csv"]{ - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @extend .button-reset; } .modal-form-error { @@ -1782,7 +1782,7 @@ input[name="subject"] { h2 { font-size: 24px; font-weight: 100; - color: #1580b0; + color: $uxpl-blue-base; @include text-align(left); } } @@ -1906,7 +1906,7 @@ input[name="subject"] { color: #3c3c3c; line-height: 30px; .add{ - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @extend .button-reset; font-size: em(13); @include float(right); @@ -1925,7 +1925,7 @@ input[name="subject"] { color: #3C3C3C; line-height: 30px; .add{ - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @extend .button-reset; font-size: em(13); } @@ -1948,7 +1948,7 @@ input[name="subject"] { color: #3C3C3C; line-height: 30px; .add{ - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @extend .button-reset; font-size: em(13); } @@ -2135,8 +2135,8 @@ input[name="subject"] { &:focus { z-index: 2; color: #fff; - background-color: darken(#428bca, 6.5%); - border-color: darken(#428bca, 6.5%); + background-color: $uxpl-blue-base; + border-color: $uxpl-blue-base; cursor: default; } } @@ -2302,7 +2302,7 @@ input[name="subject"] { color: $gray-d1; &:hover { - color: $blue; + color: $uxpl-blue-hover-active; } } @@ -2361,21 +2361,20 @@ input[name="subject"] { display: inline; @include margin-left(-5px); span.browse { - @include button(simple, $blue); + @include button(simple, $uxpl-blue-base); @include margin-right($baseline); padding: 6px ($baseline/2); font-size: 12px; border-radius: 0 3px 3px 0; } input.file_field { + @extend %cont-text-sr; position: absolute; @include right(0); top: 0; margin: 0; padding: 0; cursor: pointer; - opacity: 0; - filter: alpha(opacity=0); } } & > span, & input[disabled] { diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index b2fbd68c197d..cd7d02c58370 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -44,18 +44,18 @@ &:hover, &:focus { - color: $blue; - border-bottom: 4px solid $blue; + color: $uxpl-blue-hover-active; + border-bottom: 4px solid $uxpl-blue-hover-active; } &.active { - border-bottom: 4px solid $blue; + border-bottom: 4px solid $uxpl-blue-base; background-color: transparent; - color: $blue; + color: $uxpl-blue-base; &:hover, &:focus { - color: $blue; + color: $uxpl-blue-base; } } } @@ -97,7 +97,7 @@ display: block; @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%)); border: 1px solid transparent; - border-color: darken($link-color, 10%); + border-color: $uxpl-blue-base; border-radius: 3px; @include box-sizing(border-box); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); @@ -117,7 +117,7 @@ vertical-align: middle; &:hover, &:active, &:focus { - @include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%)); + @include background-image(linear-gradient(-90deg, $uxpl-blue-base, $uxpl-blue-base 50%, $uxpl-blue-base 50%, $uxpl-blue-base 100%)); } } } diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss index 36ff69b2f4fc..35eed076ccaf 100644 --- a/lms/static/sass/partials/base/_variables.scss +++ b/lms/static/sass/partials/base/_variables.scss @@ -159,6 +159,12 @@ $blue-t1: rgba($blue, 0.25); $blue-t2: rgba($blue, 0.50); $blue-t3: rgba($blue, 0.75); +$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant +$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant + +$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant +$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant + $orange: rgb(237, 189, 60); $orange-l1: tint($orange,20%); $orange-l2: tint($orange,40%); @@ -423,11 +429,11 @@ $action-secondary-disabled-bg: $m-gray-d3 !default; $action-secondary-disabled-fg: $white !default; // actions - misc -$link-color: $blue !default; -$link-color-d1: $blue !default; -$link-hover: $blue-l1 !default; // from our Pattern Library http://ux.edx.org/elements/colors/ +$link-color: $uxpl-blue-base !default; +$link-color-d1: $link-color !default; +$link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/ $site-status-color: $pink !default; -$button-color: $blue !default; +$button-color: $uxpl-blue-base !default; $button-archive-color: rgb(238,238,238) !default; // #eeeeee // larger, random elements @@ -462,7 +468,7 @@ $courseware-footer-margin: 0px !default; $courseware-border-bottom-color: rgb(68,162,222) !default; $courseware-button-border-color: rgb(230,230,230) !default; $courseware-hover-color: rgb(51,52,53) !default; -$courseware-navigation-color: $blue !default; +$courseware-navigation-color: $uxpl-blue-base !default; // homepage, onboarding, and course discovery $homepage__header--gradient__color--alpha: lighten($gray, 15%) !default; diff --git a/lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore b/lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore index 6283cf652713..462f7a05017b 100644 --- a/lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore +++ b/lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore @@ -11,7 +11,7 @@ -
+
diff --git a/screenshots/baseline/hinted-login-firefox.png b/screenshots/baseline/hinted-login-firefox.png index dad617e3be05..82be26134c7e 100644 Binary files a/screenshots/baseline/hinted-login-firefox.png and b/screenshots/baseline/hinted-login-firefox.png differ