From 31a275a6fe990bbc7a32a3ccb7a26e8ed59a5d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 1 Feb 2023 13:57:14 +0100
Subject: [PATCH] MOBILE-4065 forum: Fix forum focus problems

---
 .../mod/forum/components/index/index.html     | 37 +++++++++----------
 .../mod/forum/components/index/index.scss     | 14 +++++--
 .../core-editor-rich-text-editor.html         | 33 +++++++++--------
 .../rich-text-editor/rich-text-editor.scss    |  5 ++-
 4 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index e4d953a31..b53392089 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -74,26 +74,20 @@
                 [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions?.getItemAriaCurrent(discussion)"
                 (click)="discussions?.select(discussion)" button>
                 <ion-label>
-                    <div class="addon-mod-forum-discussion-title">
-                        <p class="ion-text-wrap item-heading">
-                            <ion-icon name="fas-map-pin" *ngIf="discussion.pinned"
-                                [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
-                            <ion-icon name="fas-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"
-                                [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
-                            <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
-                                [courseId]="courseId">
-                            </core-format-text>
-                            <ion-icon name="fas-lock" *ngIf="discussion.locked" class="addon-mod-forum-locked-icon"
-                                [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate"></ion-icon>
-                        </p>
-                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
-                            [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)">
-                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
-                            </ion-icon>
-                        </ion-button>
-                    </div>
+                    <p class="addon-mod-forum-discussion-title ion-text-wrap item-heading">
+                        <ion-icon name="fas-map-pin" *ngIf="discussion.pinned"
+                            [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
+                        <ion-icon name="fas-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"
+                            [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
+                        <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
+                            [courseId]="courseId">
+                        </core-format-text>
+                        <ion-icon name="fas-lock" *ngIf="discussion.locked" class="addon-mod-forum-locked-icon"
+                            [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate"></ion-icon>
+                    </p>
                     <div class="addon-mod-forum-discussion-info">
-                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId">
+                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId"
+                            [linkProfile]="false">
                         </core-user-avatar>
                         <div class="addon-mod-forum-discussion-author">
                             <span *ngIf="discussion.userfullname">{{discussion.userfullname}}</span>
@@ -136,6 +130,11 @@
                         </ion-col>
                     </ion-row>
                 </ion-label>
+                <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
+                    [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)" slot="end">
+                    <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
+                    </ion-icon>
+                </ion-button>
             </ion-item>
 
             <core-infinite-loading [enabled]="discussions && discussions.loaded && !discussions.completed" [error]="fetchFailed"
diff --git a/src/addons/mod/forum/components/index/index.scss b/src/addons/mod/forum/components/index/index.scss
index cb8ebcfdb..02e6267fd 100644
--- a/src/addons/mod/forum/components/index/index.scss
+++ b/src/addons/mod/forum/components/index/index.scss
@@ -7,7 +7,6 @@
     }
 
     .addon-mod-forum-discussion.item {
-
         ion-label {
             margin-top: 4px;
 
@@ -35,21 +34,30 @@
             @include margin(0, 8px, 0, 0);
         }
 
-        .addon-mod-forum-discussion-title,
         .addon-mod-forum-discussion-info {
             display: flex;
             align-items: center;
         }
 
-        .addon-mod-forum-discussion-title .item-heading,
         .addon-mod-forum-discussion-info .addon-mod-forum-discussion-author {
             flex-grow: 1;
         }
 
+        .addon-mod-forum-discussion-title {
+            @include margin-horizontal(null, 8px);
+            line-height: 18px;
+        }
+
+
         .addon-mod-forum-discussion-more-info.ios {
             font-size: 0.9rem;
         }
 
+        ion-button {
+            position: absolute;
+            @include position (4px, 8px, null, null);
+        }
+
     }
 
     .core-group-selector {
diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index a89f6356f..10a850d67 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -15,9 +15,9 @@
 </div>
 
 <div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)"
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [attr.disabled]="toolbarPrevHidden ? 'true' : null" (click)="toolbarPrev($event)"
         (keyup)="toolbarPrev($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)"
-        [attr.aria-label]="'core.previous' | translate">
+        [attr.aria-label]="'core.previous' | translate" [tabindex]="toolbarPrevHidden ? -1 : 0">
         <ion-icon name="fas-chevron-left" aria-hidden="true"></ion-icon>
     </button>
     <ion-slides [options]="slidesOpts" [dir]="direction" (ionSlideDidChange)="updateToolbarArrows()">
@@ -25,69 +25,70 @@
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" [title]="'core.editor.bold' | translate"
                 (click)="buttonAction($event, 'bold', 'strong')" (keyup)="buttonAction($event, 'bold', 'strong')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-bold" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" [title]="'core.editor.italic' | translate"
                 (click)="buttonAction($event, 'italic', 'em')" (keyup)="buttonAction($event, 'italic', 'em')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-italic" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" [title]="'core.editor.underline' | translate"
                 (click)="buttonAction($event, 'underline', 'u')" (keyup)="buttonAction($event, 'underline', 'u')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-underline" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" [title]="'core.editor.strike' | translate"
                 (click)="buttonAction($event, 'strikethrough', 'strike')" (keyup)="buttonAction($event, 'strikethrough', 'strike')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-strikethrough" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" [title]="'core.editor.p' | translate"
                 (click)="buttonAction($event, 'p', 'block')" (keyup)="buttonAction($event, 'p', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-paragraph" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" [title]="'core.editor.h3' | translate"
                 (click)="buttonAction($event, 'h3', 'block')" (keyup)="buttonAction($event, 'h3', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">3</span>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" [title]="'core.editor.h4' | translate"
                 (click)="buttonAction($event, 'h4', 'block')" (keyup)="buttonAction($event, 'h4', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">4</span>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" [title]="'core.editor.h5' | translate"
                 (click)="buttonAction($event, 'h5', 'block')" (keyup)="buttonAction($event, 'h5', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">5</span>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" [title]="'core.editor.unorderedlist' | translate"
-                (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="downAction($event)" (keydown)="downAction($event)"
+                tabindex="0">
                 <ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" [title]="'core.editor.orderedlist' | translate"
                 (click)="buttonAction($event, 'insertOrderedList')" (keyup)="buttonAction($event, 'insertOrderedList')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-list-ol" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
@@ -105,20 +106,20 @@
         </ion-slide>
         <ion-slide>
             <button [attr.aria-pressed]="!rteEnabled" [title]="'core.editor.toggle' | translate" (click)="toggleEditor($event)"
-                (keyup)="toggleEditor($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (keyup)="toggleEditor($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-code" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide *ngIf="isPhone">
             <button [title]="'core.editor.hidetoolbar' | translate" (click)="hideToolbar($event, true)" (keyup)="hideToolbar($event, true)"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
     </ion-slides>
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden"
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [attr.disabled]="toolbarNextHidden ? 'true' : null"
         [attr.aria-label]="'core.next' | translate" (click)="toolbarNext($event)" (keyup)="toolbarNext($event)"
-        (mousedown)="downAction($event)" (keydown)="downAction($event)">
+        (mousedown)="downAction($event)" (keydown)="downAction($event)" [tabindex]="toolbarNextHidden ? -1 : 0">
         <ion-icon name="fas-chevron-right" aria-hidden="true"></ion-icon>
     </button>
 </div>
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 606f54c1e..a335fddcb 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
@@ -149,8 +149,9 @@
                     background-color: var(--toobar-background);
                 }
 
-                &.toolbar-arrow-hidden {
-                    opacity: 0;
+                &[disabled],
+                &:disabled {
+                    opacity: .5;
                 }
             }
         }