From 1a8c4fde04526667b941ed7da2474c7eee26ee4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 14 Nov 2022 14:18:25 +0100
Subject: [PATCH] MOBILE-4065 a11y: Course downloads does not stop click
 propagation

---
 .../pages/course-storage/course-storage.html  | 14 ++++-----
 .../pages/course-storage/course-storage.ts    | 30 ++++++++++++++++---
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 8d2a1b7b3..8ec983aab 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -29,13 +29,13 @@
                         <ng-container *ngIf="calculatingSize">{{ 'core.calculating' | translate }}</ng-container>
                     </ion-badge>
                 </ion-item>
-                <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse()" expand="block" fill="outline" class="ion-no-margin"
-                    [disabled]="prefetchCourseData.loading">
+                <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse($event)" expand="block" fill="outline"
+                    class="ion-no-margin" [disabled]="prefetchCourseData.loading">
                     <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start"></ion-icon>
                     <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
                     {{ prefetchCourseData.statusTranslatable | translate }}
                 </ion-button>
-                <ion-button [disabled]="calculatingSize || totalSize <= 0" (click)="deleteForCourse()" expand="block" color="danger"
+                <ion-button [disabled]="calculatingSize || totalSize <= 0" (click)="deleteForCourse($event)" expand="block" color="danger"
                     class="ion-no-margin ion-margin-top">
                     <ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
                         { name: title }">
@@ -90,8 +90,8 @@
                                     {{section.count}} / {{section.total}}
                                 </ion-badge>
                             </div>
-                            <ion-button (click)="deleteForSection(section)" *ngIf="!section.calculatingSize && section.totalSize > 0"
-                                color="danger" fill="clear">
+                            <ion-button (click)="deleteForSection($event, section)"
+                                *ngIf="!section.calculatingSize && section.totalSize > 0" color="danger" fill="clear">
                                 <ion-icon name="fas-trash" slot="icon-only"
                                     [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
                                 </ion-icon>
@@ -128,9 +128,9 @@
                                     <core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton &&
                                         module.downloadStatus != statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
                                         [canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
-                                        (action)="prefetchModule(module, $event)">
+                                        (action)="prefetchModule(module)">
                                     </core-download-refresh>
-                                    <ion-button fill="clear" (click)="deleteForModule(module, section)"
+                                    <ion-button fill="clear" (click)="deleteForModule($event, module, section)"
                                         *ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
                                         <ion-icon name="fas-trash" slot="icon-only"
                                             [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }">
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.ts b/src/addons/storagemanager/pages/course-storage/course-storage.ts
index 3c3d001ef..5e7a143d5 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.ts
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.ts
@@ -352,8 +352,13 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
      * The user has requested a delete for the whole course data.
      *
      * (This works by deleting data for each module on the course that has data.)
+     *
+     * @param event Event object.
      */
-    async deleteForCourse(): Promise<void> {
+    async deleteForCourse(event: Event): Promise<void> {
+        event.stopPropagation();
+        event.preventDefault();
+
         try {
             await CoreDomUtils.showDeleteConfirm(
                 'addon.storagemanager.confirmdeletedatafrom',
@@ -384,9 +389,13 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
      *
      * (This works by deleting data for each module in the section that has data.)
      *
+     * @param event Event object.
      * @param section Section object with information about section and modules
      */
-    async deleteForSection(section: AddonStorageManagerCourseSection): Promise<void> {
+    async deleteForSection(event: Event, section: AddonStorageManagerCourseSection): Promise<void> {
+        event.stopPropagation();
+        event.preventDefault();
+
         try {
             await CoreDomUtils.showDeleteConfirm(
                 'addon.storagemanager.confirmdeletedatafrom',
@@ -413,10 +422,18 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
     /**
      * The user has requested a delete for a module's data
      *
+     * @param event Event object.
      * @param module Module details
      * @param section Section the module belongs to.
      */
-    async deleteForModule(module: AddonStorageManagerModule, section: AddonStorageManagerCourseSection): Promise<void> {
+    async deleteForModule(
+        event: Event,
+        module: AddonStorageManagerModule,
+        section: AddonStorageManagerCourseSection,
+    ): Promise<void> {
+        event.stopPropagation();
+        event.preventDefault();
+
         if (module.totalSize === 0) {
             return;
         }
@@ -635,8 +652,13 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
     /**
      * Prefetch the whole course.
+     *
+     * @param event Event object.
      */
-    async prefetchCourse(): Promise<void> {
+    async prefetchCourse(event: Event): Promise<void> {
+        event.stopPropagation();
+        event.preventDefault();
+
         const courses = await CoreCourses.getUserCourses(true);
         let course = courses.find((course) => course.id == this.courseId);
         if (!course) {