From f55d59c1c2f1cdd4f2d47f4ffd27f74f2a33a80a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 May 2021 13:22:39 +0200 Subject: [PATCH] MOBILE-3320 a11y: Fixed some clickable and coloring issues --- .../mod/forum/components/index/index.ts | 3 ++ .../mod/forum/components/post/post.html | 6 +-- .../mod/forum/components/post/post.scss | 3 +- src/addons/mod/forum/components/post/post.ts | 9 +++- .../send-message-form/send-message-form.scss | 43 +++++++++---------- .../course/components/format/format.scss | 9 +--- .../course-progress/course-progress.scss | 2 +- src/theme/globals.variables.scss | 4 +- 8 files changed, 40 insertions(+), 39 deletions(-) diff --git a/src/addons/mod/forum/components/index/index.ts b/src/addons/mod/forum/components/index/index.ts index e80e9a447..4e6178c66 100644 --- a/src/addons/mod/forum/components/index/index.ts +++ b/src/addons/mod/forum/components/index/index.ts @@ -667,6 +667,9 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom * @param discussion Discussion. */ async showOptionsMenu(event: Event, discussion: AddonModForumDiscussion): Promise { + event.preventDefault(); + event.stopPropagation(); + const popoverData = await CoreDomUtils.openPopover<{ action?: string; value: boolean }>({ component: AddonModForumDiscussionOptionsMenuComponent, componentProps: { diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html index 93910f69a..e6b7a3da7 100644 --- a/src/addons/mod/forum/components/post/post.html +++ b/src/addons/mod/forum/components/post/post.html @@ -93,9 +93,9 @@ - {{ 'addon.mod_forum.reply' | translate }} + (click)="showReplyForm($event)"> + + {{ 'addon.mod_forum.reply' | translate }} diff --git a/src/addons/mod/forum/components/post/post.scss b/src/addons/mod/forum/components/post/post.scss index bea8f1b1b..1dcf74beb 100644 --- a/src/addons/mod/forum/components/post/post.scss +++ b/src/addons/mod/forum/components/post/post.scss @@ -1,7 +1,7 @@ @import "~theme/globals"; :host .addon-mod_forum-post { - background-color: var(--white); + background-color: var(--ion-item-background); border-bottom: 1px solid var(--addon-forum-border-color); .addon-forum-star { @@ -21,6 +21,7 @@ margin-top: 8px; margin-bottom: 8px; font-weight: bold; + flex-grow: 1; ion-icon { @include margin(0, 6px, 0, 0); diff --git a/src/addons/mod/forum/components/post/post.ts b/src/addons/mod/forum/components/post/post.ts index 594aa3f82..a9f5cc381 100644 --- a/src/addons/mod/forum/components/post/post.ts +++ b/src/addons/mod/forum/components/post/post.ts @@ -306,8 +306,13 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges /** * Set this post as being replied to. + * + * @param event Click event. */ - async showReplyForm(): Promise { + async showReplyForm(event: Event): Promise { + event.preventDefault(); + event.stopPropagation(); + if (this.replyData.isEditing) { // User is editing a post, data needs to be resetted. Ask confirm if there is unsaved data. try { @@ -323,7 +328,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges ); }); } - } catch (error) { + } catch { // Cancelled. } 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 ce52b352e..2e4ef33ca 100644 --- a/src/core/components/send-message-form/send-message-form.scss +++ b/src/core/components/send-message-form/send-message-form.scss @@ -1,25 +1,24 @@ :host { - background: var(--white); + form { + position: relative; + display: flex; + align-items: center; + width: 100%; + background: var(--ion-item-background); + } - form { - position: relative; - display: flex; - align-items: center; - width: 100%; - } - - .core-send-message-input { - appearance: none; - display: block; - width: 100%; - border: 0; - font-family: inherit; - background: var(--core-send-message-input-background); - color: var(--core-send-message-input-color); - border-radius: 21px; - line-height: 20px; - padding: 9px 12px 11px; - margin: 5px 10px; - resize: vertical; - } + .core-send-message-input { + appearance: none; + display: block; + width: 100%; + border: 0; + font-family: inherit; + background: var(--core-send-message-input-background); + color: var(--core-send-message-input-color); + border-radius: 21px; + line-height: 20px; + padding: 9px 12px 11px; + margin: 5px 10px; + resize: vertical; + } } diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index 3e556b5d2..0d3002196 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -12,13 +12,6 @@ margin-top: 0; margin-bottom: 0; } - - progress { - .progress-bar-fallback, - &[value]::-webkit-progress-bar { - background-color: var(--white); - } - } } } @@ -30,7 +23,7 @@ cursor: pointer; pointer-events: auto; position: relative; - background: white; + background: var(--ion-item-background); img { position: absolute; diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss index 8ca42ef7f..f460d17b7 100644 --- a/src/core/features/courses/components/course-progress/course-progress.scss +++ b/src/core/features/courses/components/course-progress/course-progress.scss @@ -30,7 +30,7 @@ transition: all 50ms ease-in-out; &.core-course-color-img { - background: white; + background: var(--ion-item-background); } img { diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 361dbc538..9b3816e6d 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -378,8 +378,8 @@ $addon-forum-avatar-size: 44px !default; $addon-forum-border-color: $gray !default; $addon-forum-highlight-color: $gray-lighter !default; -$addon-forum-border-color-dark: $gray-darker !default; -$addon-forum-highlight-color-dark: $gray-dark !default; +$addon-forum-border-color-dark: $gray-dark !default; +$addon-forum-highlight-color-dark: $gray-darker !default; $core-more-icon: null !default; $core-more-item-border: null !default;