MOBILE-4595 a11y: Fix storage manager in screen readers

albertgasset · albertgasset · commit 560d25ad8c5d · 2025-01-22T14:56:48.000+01:00
We cannot use ion-accordion because the header is always a button and
screen readers do not support having semantic elements inside buttons.
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -45,22 +45,21 @@ <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
             </ion-card-header>
         </ion-card>
 
-        <ion-accordion-group [multiple]="true" (ionChange)="accordionGroupChange($event.detail)" [value]="accordionMultipleValue">
-            <ng-container *ngFor="let section of sections">
-                <ng-container *ngTemplateOutlet="sectionCard; context: { section }" />
-            </ng-container>
-        </ion-accordion-group>
+        <ng-container *ngFor="let section of sections">
+            <ng-container *ngTemplateOutlet="sectionCard; context: { section }" />
+        </ng-container>
 
     </core-loading>
 </ion-content>
 
 
 <ng-template #sectionCard let-section="section">
     <ion-card class="section" *ngIf="section.contents.length > 0" [id]="'addons-course-storage-'+section.id">
-        <ion-accordion [value]="section.id" toggleIconSlot="start">
-            <ion-item [detail]="false" slot="header" class="card-header">
+        <div class="ion-activatable ripple-parent">
+            <ion-item [detail]="false" class="card-header" (click)="toggleSection(section)" tappable>
                 <ion-label>
-                    <p class="item-heading ion-text-wrap">
+                    <p class="item-heading ion-text-wrap" [attr.aria-expanded]="section.expanded"
+                        (ariaButtonClick)="toggleSection(section)">
                         <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
                             [adaptImg]="false" />
                     </p>
@@ -78,8 +77,8 @@ <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
                             [progress]="section.total === undefined || section.total === 0 ? -1 : (section.count / section.total) * 100" />
                     </p>
                 </ion-label>
-                <div class="storage-buttons" slot="end" *ngIf="(!section.calculatingSize && section.totalSize > 0) || downloadEnabled">
-                    <div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
+                <div slot="end" class="storage-buttons" *ngIf="(!section.calculatingSize && section.totalSize > 0) || downloadEnabled">
+                    <div *ngIf="downloadEnabled" class="core-button-spinner">
                         <core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
                             [status]="section.downloadStatus" [enabled]="true" (action)="prefetchSection(section)"
                             [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true"
@@ -99,57 +98,62 @@ <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
                             [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }" />
                     </ion-button>
                 </div>
+                @if (section.expanded) {
+                <ion-icon slot="start" size="small" name="fas-chevron-down" aria-hidden="true" />
+                } @else {
+                <ion-icon slot="start" size="small" name="fas-chevron-right" aria-hidden="true" />
+                }
             </ion-item>
-            <ion-card-content slot="content">
-                <ng-container *ngIf="section.expanded">
-                    <ng-container *ngFor="let modOrSubsection of section.contents">
-                        @if (!isModule(modOrSubsection)) {
-                        <ng-container *ngTemplateOutlet="sectionCard; context: { section: modOrSubsection }" />
-                        } @else {
-                        <ion-item class="core-course-storage-activity"
-                            *ngIf="downloadEnabled || (!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0)">
-                            <core-mod-icon slot="start" *ngIf="modOrSubsection.handlerData.icon"
-                                [modicon]="modOrSubsection.handlerData.icon" [modname]="modOrSubsection.modname"
-                                [componentId]="modOrSubsection.instance" [fallbackTranslation]="modOrSubsection.modplural"
-                                [isBranded]="modOrSubsection.branded" />
-                            <ion-label class="ion-text-wrap">
-                                <p class="item-heading {{modOrSubsection.handlerData!.class}} addon-storagemanager-module-size">
-                                    <core-format-text [text]="modOrSubsection.handlerData.title" [courseId]="modOrSubsection.course"
-                                        contextLevel="module" [contextInstanceId]="modOrSubsection.id" [adaptImg]="false" />
-                                </p>
-                                <ion-badge [color]="modOrSubsection.downloadStatus === statusDownloaded ? 'success' : 'light'"
-                                    *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0">
-                                    <ion-icon name="fam-cloud-done" *ngIf="modOrSubsection.downloadStatus === statusDownloaded"
-                                        [attr.aria-label]="'core.downloaded' | translate" />{{ modOrSubsection.totalSize |
-                                    coreBytesToSize }}
-                                </ion-badge>
-                                <ion-badge color="light" *ngIf="modOrSubsection.calculatingSize ||
+            <ion-ripple-effect />
+        </div>
+        <ion-card-content>
+            <ng-container *ngIf="section.expanded">
+                <ng-container *ngFor="let modOrSubsection of section.contents">
+                    @if (!isModule(modOrSubsection)) {
+                    <ng-container *ngTemplateOutlet="sectionCard; context: { section: modOrSubsection }" />
+                    } @else {
+                    <ion-item class="core-course-storage-activity"
+                        *ngIf="downloadEnabled || (!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0)">
+                        <core-mod-icon slot="start" *ngIf="modOrSubsection.handlerData.icon" [modicon]="modOrSubsection.handlerData.icon"
+                            [modname]="modOrSubsection.modname" [componentId]="modOrSubsection.instance"
+                            [fallbackTranslation]="modOrSubsection.modplural" [isBranded]="modOrSubsection.branded" />
+                        <ion-label class="ion-text-wrap">
+                            <p class="item-heading {{modOrSubsection.handlerData!.class}} addon-storagemanager-module-size">
+                                <core-format-text [text]="modOrSubsection.handlerData.title" [courseId]="modOrSubsection.course"
+                                    contextLevel="module" [contextInstanceId]="modOrSubsection.id" [adaptImg]="false" />
+                            </p>
+                            <ion-badge [color]="modOrSubsection.downloadStatus === statusDownloaded ? 'success' : 'light'"
+                                *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0">
+                                <ion-icon name="fam-cloud-done" *ngIf="modOrSubsection.downloadStatus === statusDownloaded"
+                                    [attr.aria-label]="'core.downloaded' | translate" />{{ modOrSubsection.totalSize |
+                                coreBytesToSize }}
+                            </ion-badge>
+                            <ion-badge color="light" *ngIf="modOrSubsection.calculatingSize ||
                             (section.isDownloading && modOrSubsection.downloadStatus === statusDownloaded)">
-                                    {{ 'core.calculating' | translate }}
-                                </ion-badge>
-                            </ion-label>
+                                {{ 'core.calculating' | translate }}
+                            </ion-badge>
+                        </ion-label>
 
-                            <div class="storage-buttons" slot="end">
-                                <core-download-refresh *ngIf="downloadEnabled && modOrSubsection.handlerData?.showDownloadButton &&
+                        <div class="storage-buttons" slot="end">
+                            <core-download-refresh *ngIf="downloadEnabled && modOrSubsection.handlerData?.showDownloadButton &&
                             modOrSubsection.downloadStatus !== statusDownloaded" [status]="modOrSubsection.downloadStatus" [enabled]="true"
-                                    [canTrustDownload]="true" [loading]="modOrSubsection.spinner || modOrSubsection.handlerData.spinner"
-                                    (action)="prefetchModule(modOrSubsection)"
-                                    [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
-                                    [statusSubject]="modOrSubsection.name" />
-                                <ion-button fill="clear" (click)="deleteForModule($event, modOrSubsection)"
-                                    *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0" color="danger">
-                                    <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
+                                [canTrustDownload]="true" [loading]="modOrSubsection.spinner || modOrSubsection.handlerData.spinner"
+                                (action)="prefetchModule(modOrSubsection)"
+                                [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
+                                [statusSubject]="modOrSubsection.name" />
+                            <ion-button fill="clear" (click)="deleteForModule($event, modOrSubsection)"
+                                *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0" color="danger">
+                                <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
                                         'addon.storagemanager.deletedatafrom' | translate: { name: modOrSubsection.name }" />
-                                </ion-button>
-                                <p *ngIf="!downloadEnabled || !modOrSubsection.handlerData?.showDownloadButton" class="sr-only">
-                                    {{ 'core.notdownloadable' | translate }}
-                                </p>
-                            </div>
-                        </ion-item>
-                        }
-                    </ng-container>
+                            </ion-button>
+                            <p *ngIf="!downloadEnabled || !modOrSubsection.handlerData?.showDownloadButton" class="sr-only">
+                                {{ 'core.notdownloadable' | translate }}
+                            </p>
+                        </div>
+                    </ion-item>
+                    }
                 </ng-container>
-            </ion-card-content>
-        </ion-accordion>
+            </ng-container>
+        </ion-card-content>
     </ion-card>
 </ng-template>
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.scss b/src/addons/storagemanager/pages/course-storage/course-storage.scss
@@ -14,6 +14,14 @@
 
             .item-heading {
                 font: var(--mdl-typography-heading4-font);
+                min-height: auto;
+            }
+
+            ion-icon[slot=start] {
+                margin-inline-end: var(--mdl-spacing-2);
+                background-color: var(--gray-100);
+                border-radius: 50%;
+                padding: var(--mdl-spacing-1);
             }
         }
 
@@ -42,6 +50,13 @@
             }
         }
     }
+
+    .ripple-parent {
+        position: relative;
+        ion-ripple-effect {
+            z-index: 1;
+        }
+    }
 }
 
 ion-badge {
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.ts b/src/addons/storagemanager/pages/course-storage/course-storage.ts
@@ -27,7 +27,6 @@ import {
     CoreCourseModulePrefetchDelegate,
     CoreCourseModulePrefetchHandler } from '@features/course/services/module-prefetch-delegate';
 import { CoreCourses } from '@features/courses/services/courses';
-import { AccordionGroupChangeEventDetail } from '@ionic/angular';
 import { CoreLoadings } from '@services/overlays/loadings';
 import { CoreNavigator } from '@services/navigator';
 import { CoreSites } from '@services/sites';
@@ -57,7 +56,6 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
     sections: AddonStorageManagerCourseSection[] = [];
     totalSize = 0;
     calculatingSize = true;
-    accordionMultipleValue: string[] = [];
 
     downloadEnabled = false;
     downloadCourseEnabled = false;
@@ -126,23 +124,29 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
         this.loaded = true;
 
+        let prioritizedSectionId: number | undefined;
+
         if (initialSectionId !== undefined && initialSectionId > 0) {
-            this.accordionMultipleValue.push(initialSectionId.toString());
-            this.accordionGroupChange();
+            CoreCourseHelper.flattenSections(this.sections).forEach((section) => {
+                if (section.id === initialSectionId) {
+                    section.expanded = true;
+                    prioritizedSectionId = section.id;
+                }
+            });
 
             CoreDom.scrollToElement(
                 this.elementRef.nativeElement,
                 `#addons-course-storage-${initialSectionId}`,
                 { addYAxis: -10 },
             );
         } else {
-            this.accordionMultipleValue.push(this.sections[0].id.toString());
-            this.accordionGroupChange();
+            this.sections[0].expanded = true;
+            prioritizedSectionId = this.sections[0].id;
         }
 
         try {
             await Promise.all([
-                this.updateSizes(this.sections, Number(this.accordionMultipleValue[0])),
+                this.updateSizes(this.sections, prioritizedSectionId),
                 this.initCoursePrefetch(),
                 this.initModulePrefetch(),
             ]);
@@ -764,24 +768,12 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
     }
 
     /**
-     * Toggle expand status.
+     * Toggle section expand status.
      *
-     * @param event Event object. If not defined, use the current value.
+     * @param section Section.
      */
-    accordionGroupChange(event?: AccordionGroupChangeEventDetail): void {
-        const sectionIds = event?.value as string[] ?? this.accordionMultipleValue;
-        const allSections = CoreCourseHelper.flattenSections(this.sections);
-        allSections.forEach((section) => {
-            section.expanded = false;
-        });
-
-        sectionIds.forEach((sectionId) => {
-            const section = allSections.find((section) => section.id === Number(sectionId));
-
-            if (section) {
-                section.expanded = true;
-            }
-        });
+    toggleSection(section: AddonStorageManagerCourseSection): void {
+        section.expanded = !section.expanded;
     }
 
     /**

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,14 @@`
`14`	`14`
`15`	`15`	`.item-heading {`
`16`	`16`	`font: var(--mdl-typography-heading4-font);`
	`17`	`+ min-height: auto;`
	`18`	`+ }`
	`19`	`+`
	`20`	`+ ion-icon[slot=start] {`
	`21`	`+ margin-inline-end: var(--mdl-spacing-2);`
	`22`	`+ background-color: var(--gray-100);`
	`23`	`+ border-radius: 50%;`
	`24`	`+ padding: var(--mdl-spacing-1);`
`17`	`25`	`}`
`18`	`26`	`}`
`19`	`27`
`@@ -42,6 +50,13 @@`
`42`	`50`	`}`
`43`	`51`	`}`
`44`	`52`	`}`
	`53`	`+`
	`54`	`+ .ripple-parent {`
	`55`	`+ position: relative;`
	`56`	`+ ion-ripple-effect {`
	`57`	`+ z-index: 1;`
	`58`	`+ }`
	`59`	`+ }`
`45`	`60`	`}`
`46`	`61`
`47`	`62`	`ion-badge {`