MOBILE-4065 a11y: Course downloads does not stop click propagation

main
Pau Ferrer Ocaña 2022-11-14 14:18:25 +01:00
parent c97d92fd04
commit 1a8c4fde04
2 changed files with 33 additions and 11 deletions

View File

@ -29,13 +29,13 @@
<ng-container *ngIf="calculatingSize">{{ 'core.calculating' | translate }}</ng-container> <ng-container *ngIf="calculatingSize">{{ 'core.calculating' | translate }}</ng-container>
</ion-badge> </ion-badge>
</ion-item> </ion-item>
<ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse()" expand="block" fill="outline" class="ion-no-margin" <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse($event)" expand="block" fill="outline"
[disabled]="prefetchCourseData.loading"> class="ion-no-margin" [disabled]="prefetchCourseData.loading">
<ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start"></ion-icon> <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start"></ion-icon>
<ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner> <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
{{ prefetchCourseData.statusTranslatable | translate }} {{ prefetchCourseData.statusTranslatable | translate }}
</ion-button> </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"> class="ion-no-margin ion-margin-top">
<ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: <ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
{ name: title }"> { name: title }">
@ -90,8 +90,8 @@
{{section.count}} / {{section.total}} {{section.count}} / {{section.total}}
</ion-badge> </ion-badge>
</div> </div>
<ion-button (click)="deleteForSection(section)" *ngIf="!section.calculatingSize && section.totalSize > 0" <ion-button (click)="deleteForSection($event, section)"
color="danger" fill="clear"> *ngIf="!section.calculatingSize && section.totalSize > 0" color="danger" fill="clear">
<ion-icon name="fas-trash" slot="icon-only" <ion-icon name="fas-trash" slot="icon-only"
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }"> [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
</ion-icon> </ion-icon>
@ -128,9 +128,9 @@
<core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton && <core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton &&
module.downloadStatus != statusDownloaded" [status]="module.downloadStatus" [enabled]="true" module.downloadStatus != statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
[canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner" [canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
(action)="prefetchModule(module, $event)"> (action)="prefetchModule(module)">
</core-download-refresh> </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"> *ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
<ion-icon name="fas-trash" slot="icon-only" <ion-icon name="fas-trash" slot="icon-only"
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }"> [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }">

View File

@ -352,8 +352,13 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
* The user has requested a delete for the whole course data. * 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.) * (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 { try {
await CoreDomUtils.showDeleteConfirm( await CoreDomUtils.showDeleteConfirm(
'addon.storagemanager.confirmdeletedatafrom', '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.) * (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 * @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 { try {
await CoreDomUtils.showDeleteConfirm( await CoreDomUtils.showDeleteConfirm(
'addon.storagemanager.confirmdeletedatafrom', 'addon.storagemanager.confirmdeletedatafrom',
@ -413,10 +422,18 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
/** /**
* The user has requested a delete for a module's data * The user has requested a delete for a module's data
* *
* @param event Event object.
* @param module Module details * @param module Module details
* @param section Section the module belongs to. * @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) { if (module.totalSize === 0) {
return; return;
} }
@ -635,8 +652,13 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
/** /**
* Prefetch the whole course. * 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); const courses = await CoreCourses.getUserCourses(true);
let course = courses.find((course) => course.id == this.courseId); let course = courses.find((course) => course.id == this.courseId);
if (!course) { if (!course) {