From d6269cf16d6889bd1f60bbdf9596a33ac7fa54a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Mar 2022 11:25:10 +0100
Subject: [PATCH] MOBILE-3814 avatar: Improve a11y and reduce size of avatars

---
 .../competency/pages/competency/competency.html       |  2 +-
 .../submission/addon-mod-assign-submission.html       |  6 +++---
 .../components/index/addon-mod-choice-index.html      |  2 +-
 src/addons/mod/feedback/pages/attempt/attempt.html    |  2 +-
 .../pages/attempt-results/attempt-results.html        |  2 +-
 .../pages/user-attempts/user-attempts.html            |  2 +-
 .../mod/lesson/pages/user-retake/user-retake.html     |  2 +-
 src/core/components/user-avatar/user-avatar.scss      | 11 +++++++++--
 .../user/components/tag-area/core-user-tag-area.html  |  2 +-
 src/theme/components/format-text.scss                 |  2 --
 src/theme/theme.light.scss                            |  2 +-
 11 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index 53b0778d7..194bef3ca 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -122,7 +122,7 @@
             <ion-card *ngFor="let evidence of competency.evidence">
                 <ion-item class="ion-text-wrap" *ngIf="evidence.actionuser" core-user-link [userId]="evidence.actionuser.id"
                     [courseId]="courseId">
-                    <core-user-avatar [user]="evidence.actionuser" slot="start"></core-user-avatar>
+                    <core-user-avatar [user]="evidence.actionuser" slot="start" [linkProfile]="false"></core-user-avatar>
                     <ion-label>
                         <p class="item-heading">{{ evidence.actionuser.fullname }}</p>
                         <p>{{ evidence.timemodified * 1000 | coreFormatDate }}</p>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index d0efe3655..5da98c6d8 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -3,7 +3,7 @@
     <!-- User and status of the submission. -->
     <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
         [attr.aria-label]="user!.fullname">
-        <core-user-avatar [user]="user" slot="start"></core-user-avatar>
+        <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
         <ion-label>
             <h2>{{ user!.fullname }}</h2>
             <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
@@ -176,7 +176,7 @@
                     <ng-container *ngFor="let user of membersToSubmit">
                         <ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
                             [attr.aria-label]="user.fullname">
-                            <core-user-avatar [user]="user" slot="start"></core-user-avatar>
+                            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
                             <ion-label>
                                 <h2>{{ user.fullname }}</h2>
                             </ion-label>
@@ -334,7 +334,7 @@
                 <!-- Data about the grader (teacher who graded). -->
                 <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
                     [attr.aria-label]="grader!.fullname" detail="true">
-                    <core-user-avatar [user]="grader" slot="start"></core-user-avatar>
+                    <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
                     <ion-label>
                         <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
                         <h2>{{ grader!.fullname }}</h2>
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index 2dcdcf85c..cc554ee45 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -114,7 +114,7 @@
                         <ng-container *ngIf="result.expanded">
                             <ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseId" [userId]="user.userid"
                                 [attr.aria-label]="user.fullname" class="ion-text-wrap">
-                                <core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
+                                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
                                 <ion-label>
                                     <p>{{user.fullname}}</p>
                                 </ion-label>
diff --git a/src/addons/mod/feedback/pages/attempt/attempt.html b/src/addons/mod/feedback/pages/attempt/attempt.html
index cb30f110e..41005c393 100644
--- a/src/addons/mod/feedback/pages/attempt/attempt.html
+++ b/src/addons/mod/feedback/pages/attempt/attempt.html
@@ -14,7 +14,7 @@
         <ion-list class="ion-no-margin" *ngIf="attempt || anonAttempt">
             <ion-item *ngIf="attempt" class="ion-text-wrap" core-user-link [userId]="attempt.userid"
                 [attr.aria-label]="'core.user.viewprofile' | translate" [courseId]="attempt.courseid">
-                <core-user-avatar [user]="attempt" slot="start"></core-user-avatar>
+                <core-user-avatar [user]="attempt" slot="start" [linkProfile]="false"></core-user-avatar>
                 <ion-label>
                     <h2>{{attempt.fullname}}</h2>
                     <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate }}</p>
diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
index 718811590..d40c53516 100644
--- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
+++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
@@ -21,7 +21,7 @@
             <!-- Attempt number and user that did the attempt. -->
             <ion-item class="ion-text-wrap" *ngIf="user" core-user-link [userId]="user.id" [courseId]="courseId"
                 [attr.aria-label]="user.fullname">
-                <core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
+                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
                 <ion-label>
                     <h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</h2>
                 </ion-label>
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
index fe477e1e8..52fb73ded 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -20,7 +20,7 @@
         <!-- User viewed. -->
         <ion-item class="ion-text-wrap" *ngIf="user && !isCurrentUser" core-user-link [userId]="user.id" [courseId]="courseId"
             [attr.aria-label]="user.fullname" button detail="true">
-            <core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
+            <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
             <ion-label>
                 <h2>{{ user.fullname }}</h2>
             </ion-label>
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 6c8bcc2df..722c6a495 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -17,7 +17,7 @@
         <div *ngIf="student">
             <!-- Student data. -->
             <ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
-                <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId">
+                <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId" [linkProfile]="false">
                 </core-user-avatar>
                 <ion-label>
                     <h2>{{student.fullname}}</h2>
diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index d7c33997c..ad04a1ec8 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@@ -1,3 +1,5 @@
+@import '~theme/globals.scss';
+
 :host {
     position: relative;
     width: var(--core-avatar-size);
@@ -76,6 +78,11 @@
 }
 
 :host-context(ion-item) {
-    margin-top: 12px;
-    margin-bottom: 12px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    @include margin(6px, 8px, 6px, 0px);
+    img {
+        min-width: var(--core-avatar-size);
+        min-height: var(--core-avatar-size);
+    }
 }
diff --git a/src/core/features/user/components/tag-area/core-user-tag-area.html b/src/core/features/user/components/tag-area/core-user-tag-area.html
index bfd6c0af4..3531973e0 100644
--- a/src/core/features/user/components/tag-area/core-user-tag-area.html
+++ b/src/core/features/user/components/tag-area/core-user-tag-area.html
@@ -1,6 +1,6 @@
 <ion-card *ngFor="let item of items">
     <ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
-        <core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
+        <core-user-avatar [user]="item.user" slot="start" [linkProfile]="false"></core-user-avatar>
         <ion-label>
             <h2>{{ item.heading }}</h2>
         </ion-label>
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 2bd618242..3b35bff23 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -77,8 +77,6 @@ core-format-text {
             }
             &.collapsible-collapsed .core-format-text-content {
                 overflow: hidden;
-                height: var(--collapsible-height);
-                @include core-transition(height, 300ms);
             }
         }
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 8d0d29859..193d74b8d 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -325,7 +325,7 @@
     --core-star-color: var(--primary);
 
     --core-large-avatar-size: 90px;
-    --core-avatar-size: var(--a11y-min-target-size);
+    --core-avatar-size: 40px;
 
     --core-courseimage-on-course-size: 72px;
     --core-courseimage-radius: var(--medium-radius);