From ca6c02ab917b3ac4ec5cbfba9d491a3b04ab734a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 15 Jun 2021 13:07:25 +0200 Subject: [PATCH 1/3] MOBILE-3320 login: Fix text wrap on forgot password buttons --- src/core/features/login/pages/credentials/credentials.html | 2 +- src/core/features/login/pages/reconnect/reconnect.html | 2 +- src/core/features/login/pages/site/site.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html index 73e6407e9..364f1fe3b 100644 --- a/src/core/features/login/pages/credentials/credentials.html +++ b/src/core/features/login/pages/credentials/credentials.html @@ -67,7 +67,7 @@ expand="block" fill="clear" color="dark" - class="core-login-forgotten-password core-button-as-link" + class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()" > {{ 'core.login.forgotten' | translate }} diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html index 96f21005a..23445a7ae 100644 --- a/src/core/features/login/pages/reconnect/reconnect.html +++ b/src/core/features/login/pages/reconnect/reconnect.html @@ -76,7 +76,7 @@ expand="block" fill="clear" color="dark" - class="core-login-forgotten-password core-button-as-link" + class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()" > {{ 'core.login.forgotten' | translate }} diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html index c9f8c432c..0ac83b5ea 100644 --- a/src/core/features/login/pages/site/site.html +++ b/src/core/features/login/pages/site/site.html @@ -109,7 +109,7 @@ Date: Tue, 15 Jun 2021 13:23:48 +0200 Subject: [PATCH 2/3] MOBILE-3320 a11y: Fix secondary text color contrast --- .../send-message-form/send-message-form.scss | 4 ++ .../rich-text-editor/rich-text-editor.scss | 3 +- src/theme/globals.variables.scss | 38 +++++++++++-------- src/theme/theme.base.scss | 7 ++++ src/theme/theme.dark.scss | 5 +++ src/theme/theme.light.scss | 6 +++ 6 files changed, 45 insertions(+), 18 deletions(-) diff --git a/src/core/components/send-message-form/send-message-form.scss b/src/core/components/send-message-form/send-message-form.scss index 2e4ef33ca..25a62dbdd 100644 --- a/src/core/components/send-message-form/send-message-form.scss +++ b/src/core/components/send-message-form/send-message-form.scss @@ -21,4 +21,8 @@ margin: 5px 10px; resize: vertical; } + + .core-send-message-input::placeholder { + color: var(--ion-placeholder-color); + } } diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index 294d029f3..395112a76 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -1,6 +1,6 @@ @import "~theme/globals"; :host { - --placeholder-color: var(--gray-light); + --placeholder-color: var(--ion-placeholder-color); --toobar-background: var(--white); --button-color: var(--ion-text-color); --button-active-color: var(--gray); @@ -12,7 +12,6 @@ --color: var(--white); --button-color: var(--gray-light); --button-active-color: var(--gray-dark); - --placeholder-color: var(--gray); --toobar-background: var(--black); } diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index e7303c9ac..ae2d7c558 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -46,21 +46,21 @@ $orange: #f98012 !default; // Accent (never text). $yellow: #fbad1a !default; // Accent (never text). $purple: #8e24aa !default; // Accent (never text). -$blue-light: mix($blue, white, 40%) !default; // Background. +$blue-light: mix($blue, white, 20%) !default; // Background. $blue-dark: darken($blue, 10%) !default; -$turquoise-light: mix($turquoise, white, 40%) !default; // Background. +$turquoise-light: mix($turquoise, white, 20%) !default; // Background. $turquoise-dark: darken($turquoise, 10%) !default; -$green-light: mix($green, white, 40%) !default; +$green-light: mix($green, white, 20%) !default; $green-dark: darken($green, 10%) !default; -$red-light: mix($red, white, 40%) !default; +$red-light: mix($red, white, 20%) !default; $red-dark: darken($red, 10%) !default; $orange-light: lighten($orange, 10%) !default; -$yellow-light: mix($yellow, white, 40%) !default; +$yellow-light: mix($yellow, white, 20%) !default; $yellow-dark: mix($yellow, black, 40%) !default; $brand-color: $orange !default; @@ -75,8 +75,8 @@ $link-color: $blue !default; $link-color-dark: $blue-light !default; $background-color: $gray-light !default; $background-color-dark: $shade-90 !default; -$subdued-text-color: $gray-darker !default; -$subdued-text-color-dark: $gray-lighter !default; +$subdued-text-color: #595959 !default; +$subdued-text-color-dark: #b4b4b4 !default; $ion-item-background: $white !default; $ion-item-background-dark: $shade-80 !default; @@ -87,6 +87,10 @@ $ion-item-divider-background-dark: $shade-75 !default; $ion-item-divider-color-dark: $text-color-dark !default; $core-spacer-background-dark: $shade-100 !default; +$ion-placeholder-color: $subdued-text-color; +$ion-placeholder-color-dark: $subdued-text-color-dark; +$color: #d0c9b9; +$color: #fcf5e3; $core-online-color: #5cb85c !default; $primary: $brand-color !default; @@ -164,12 +168,12 @@ $colors: ( ) !default; $primary-dark: $brand-color !default; -$secondary-dark: $blue-light !default; -$tertiary-dark: $turquoise-light !default; -$danger-dark: $red-light !default; -$warning-dark: $yellow-light !default; -$success-dark: $green-light !default; -$info-dark: $blue-light !default; +$secondary-dark: mix($blue, white, 40%) !default; +$tertiary-dark: mix($turquoise, white, 40%) !default; +$danger-dark: mix($red, white, 40%) !default; +$warning-dark: mix($yellow, white, 40%) !default; +$success-dark: mix($green, white, 40%) !default; +$info-dark: mix($blue, white, 40%) !default; $light-dark: $dark !default; $medium-dark: $gray-light !default; $dark-dark: $light !default; @@ -299,7 +303,7 @@ $core-text-hightlight-background-color: lighten($blue, 40%) !default; $core-tabs-background: $white !default; $core-tab-background: $core-tabs-background !default; -$core-tab-color: $gray-dark !default; +$core-tab-color: $subdued-text-color !default; $core-tab-color-active: $dark !default; $core-tab-font-weight-active: normal !default; $core-tab-border-color: $gray !default; @@ -308,7 +312,7 @@ $core-tabs-height: 56px !default; $core-tabs-background-dark: $shade-75 !default; $core-tab-background-dark: $core-tabs-background-dark !default; -$core-tab-color-dark: $white !default; +$core-tab-color-dark: $subdued-text-color-dark !default; $core-tab-color-active-dark: $dark-dark !default; $core-tab-border-color-dark: $gray-light !default; $core-tab-border-color-active-dark: $core-tab-border-color-active !default; @@ -356,8 +360,10 @@ $core-star-color: $brand-color !default; $core-large-avatar-size: 90px !default; $core-avatar-size: 44px !default; -$core-send-message-input-background: $gray !default; +$core-send-message-input-background: $gray-light !default; $core-send-message-input-color: $black !default; +$core-send-message-input-background-dark: $black !default; +$core-send-message-input-color-dark: $white !default; $core-more-icon-color: null !default; $core-more-item-border: null !default; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 1d66e9ca3..624103315 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -874,6 +874,13 @@ html.ios div.fake-ion-item { } +// Disabled items. +ion-item.item-disabled, +ion-item.item-interactive-disabled:not(.item-multiple-inputs) ion-label, +ion-datetime.datetime-disabled { + opacity: .8 !important; +} + // Make links clickable when inside radio or checkbox items. Style part. @media (hover: hover) { ion-item.item-multiple-inputs:hover::part(native) { diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 12a09ee44..d582bc97d 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -58,6 +58,8 @@ --contrast-background: black; + --ion-placeholder-color: #{$ion-placeholder-color-dark}; + ion-content { --background: var(--ion-background-color); --background-alternative: var(--black); @@ -127,6 +129,9 @@ --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); --core-dd-question-border: var(--gray-light); + --core-send-message-input-background: #{$core-send-message-input-background-dark}; + --core-send-message-input-color: #{$core-send-message-input-color-dark}; + --addon-messages-message-bg: #{$addon-messages-message-bg-dark}; --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; --addon-messages-message-note-text: #{$addon-messages-message-note-text-dark}; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 363c93576..fbca663e8 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -81,6 +81,8 @@ --text-hightlight-background-color: #{$core-text-hightlight-background-color}; + --ion-placeholder-color: #{$ion-placeholder-color}; + ion-content { --background: var(--ion-background-color); --background-alternative: var(--gray-lighter); @@ -223,6 +225,10 @@ --item-divider-background: var(--spacer-background); } + ion-note { + --color: var(--subdued-text-color); + } + --core-combobox-background: var(--ion-item-background); --core-combobox-color: #{$core-combobox-color}; --core-combobox-background: #{$core-combobox-background}; From 9ddfa575824a8a6964acf42c633b33fb7bbb7f85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 15 Jun 2021 15:15:50 +0200 Subject: [PATCH 3/3] MOBILE-3320 a11y: Fix section selection never read on voiceover --- .../course/components/format/core-course-format.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html index 59eec9907..c096739ec 100644 --- a/src/core/features/course/components/format/core-course-format.html +++ b/src/core/features/course/components/format/core-course-format.html @@ -19,8 +19,15 @@
- +