MOBILE-3320 a11y: Fixed some clickable and coloring issues

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<void> {
+        event.preventDefault();
+        event.stopPropagation();
+
         const popoverData = await CoreDomUtils.openPopover<{ action?: string; value: boolean }>({
             component: AddonModForumDiscussionOptionsMenuComponent,
             componentProps: {

src/addons/mod/forum/components/post/post.html

@@ -93,9 +93,9 @@
                 <ion-button fill="clear" size="small"
                     [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId"
                     [attr.aria-expanded]="replyData.replyingTo === post.id"
-                    (click)="showReplyForm()">
+                    (click)="showReplyForm($event)">
-                    <ion-icon name="fa-reply" slot="start" aria-hidden="true">
+                    <ion-icon name="fa-reply" slot="start" aria-hidden="true"></ion-icon>
-                    </ion-icon> {{ 'addon.mod_forum.reply' | translate }}
+                    {{ 'addon.mod_forum.reply' | translate }}
                 </ion-button>
             </ion-label>
         </ion-item>

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);

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<void> {
+    async showReplyForm(event: Event): Promise<void> {
+        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.
             }
 

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 {
+    .core-send-message-input {
-    position: relative;
+        appearance: none;
-    display: flex;
+        display: block;
-    align-items: center;
+        width: 100%;
-    width: 100%;
+        border: 0;
-  }
+        font-family: inherit;
-
+        background: var(--core-send-message-input-background);
-  .core-send-message-input {
+        color: var(--core-send-message-input-color);
-    appearance: none;
+        border-radius: 21px;
-    display: block;
+        line-height: 20px;
-    width: 100%;
+        padding: 9px 12px 11px;
-    border: 0;
+        margin: 5px 10px;
-    font-family: inherit;
+        resize: vertical;
-    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;
-  }
 }

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;

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 {

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-border-color-dark: $gray-dark !default;
-$addon-forum-highlight-color-dark: $gray-dark !default;
+$addon-forum-highlight-color-dark: $gray-darker !default;
 
 $core-more-icon: null !default;
 $core-more-item-border: null !default;