From 02376ff881c5448ca8d6c81a1f1c88df9e78231e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 12 May 2021 16:00:59 +0200
Subject: [PATCH] MOBILE-3752 quiz: Implement aria table role on attempts table

---
 .../index/addon-mod-quiz-index.html           | 81 +++++++++++--------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index 9bd1a4621..bc3acebcf 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -61,51 +61,62 @@
     <!-- List of user attempts. -->
     <ion-card class="addon-mod_quiz-table" *ngIf="quiz && attempts.length">
         <ion-card-header class="ion-text-wrap">
-            <ion-card-header>
-                <ion-card-title>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</ion-card-title>
-            </ion-card-header>
+            <ion-card-title>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</ion-card-title>
         </ion-card-header>
-        <ion-card-content>
+        <ion-card-content role="table">
             <!-- "Header" of the table -->
-            <ion-item class="ion-text-wrap addon-mod_quiz-table-header" detail="true">
-                <ion-label>
-                    <ion-row class="ion-align-items-center">
-                        <ion-col class="ion-text-center ion-hide-md-down" *ngIf="quiz.showAttemptColumn">
-                            <strong>{{ 'addon.mod_quiz.attemptnumber' | translate }}</strong>
+            <ion-item class="ion-text-wrap addon-mod_quiz-table-header">
+                <ion-label role="rowgroup">
+                    <ion-row class="ion-align-items-center" role="row">
+                        <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn" role="columnheader">
+                            <strong class="ion-hide-md-up" aria-hidden="true">#</strong>
+                            <span class="sr-only ion-hide-md-up">{{ 'addon.mod_quiz.attemptnumber' | translate }}</span>
+                            <strong class="ion-hide-md-down">{{ 'addon.mod_quiz.attemptnumber' | translate }}</strong>
                         </ion-col>
-                        <ion-col class="ion-text-center ion-hide-md-up" *ngIf="quiz.showAttemptColumn"><strong>#</strong></ion-col>
-                        <ion-col size="7"><strong>{{ 'addon.mod_quiz.attemptstate' | translate }}</strong></ion-col>
-                        <ion-col class="ion-text-center ion-hide-md-down" *ngIf="quiz.showMarkColumn">
+                        <ion-col size="7" role="columnheader">
+                            <strong>{{ 'addon.mod_quiz.attemptstate' | translate }}</strong>
+                        </ion-col>
+                        <ion-col class="ion-text-center ion-hide-md-down" *ngIf="quiz.showMarkColumn" role="columnheader">
                             <strong>{{ 'addon.mod_quiz.marks' | translate }} / {{ quiz.sumGradesFormatted }}</strong>
                         </ion-col>
-                        <ion-col class="ion-text-center" *ngIf="quiz.showGradeColumn">
+                        <ion-col class="ion-text-center" *ngIf="quiz.showGradeColumn" role="columnheader">
                             <strong>{{ 'addon.mod_quiz.grade' | translate }} / {{ quiz.gradeFormatted }}</strong>
                         </ion-col>
                     </ion-row>
                 </ion-label>
             </ion-item>
-            <!-- List of attempts. -->
-            <ion-item class="ion-text-wrap" *ngFor="let attempt of attempts" button detail="true"
-                [ngClass]='{"addon-mod_quiz-highlighted": attempt.highlightGrade}'
-                [attr.aria-label]="'core.seemoredetail' | translate" (click)="viewAttempt(attempt.id)">
-                <ion-label>
-                    <ion-row class="ion-align-items-center">
-                        <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn && attempt.preview">
-                            {{ 'addon.mod_quiz.preview' | translate }}
-                        </ion-col>
-                        <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn && !attempt.preview">
-                            {{ attempt.attempt }}
-                        </ion-col>
-                        <ion-col size="7">
-                            <p *ngFor="let sentence of attempt.readableState">{{ sentence }}</p>
-                        </ion-col>
-                        <ion-col class="ion-text-center ion-hide-md-down" *ngIf="quiz.showMarkColumn">
-                            <p>{{ attempt.readableMark }}</p>
-                        </ion-col>
-                        <ion-col class="ion-text-center" *ngIf="quiz.showGradeColumn"><p>{{ attempt.readableGrade }}</p></ion-col>
-                    </ion-row>
-                </ion-label>
-            </ion-item>
+            <div role="rowgroup">
+                <!-- List of attempts. -->
+                <ion-item
+                    button
+                    detail="true"
+                    *ngFor="let attempt of attempts"
+                    class="ion-text-wrap"
+                    [ngClass]='{"addon-mod_quiz-highlighted": attempt.highlightGrade}'
+                    [attr.aria-label]="'core.seemoredetail' | translate"
+                    (click)="viewAttempt(attempt.id)"
+                >
+                    <ion-label>
+                        <ion-row class="ion-align-items-center" role="row">
+                            <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn && attempt.preview" role="cell">
+                                {{ 'addon.mod_quiz.preview' | translate }}
+                            </ion-col>
+                            <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn && !attempt.preview" role="cell">
+                                {{ attempt.attempt }}
+                            </ion-col>
+                            <ion-col size="7" role="cell">
+                                <p *ngFor="let sentence of attempt.readableState">{{ sentence }}</p>
+                            </ion-col>
+                            <ion-col class="ion-text-center ion-hide-md-down" *ngIf="quiz.showMarkColumn" role="cell">
+                                <p>{{ attempt.readableMark }}</p>
+                            </ion-col>
+                            <ion-col class="ion-text-center" *ngIf="quiz.showGradeColumn" role="cell">
+                                <p>{{ attempt.readableGrade }}</p>
+                            </ion-col>
+                        </ion-row>
+                    </ion-label>
+                </ion-item>
+            </div>
         </ion-card-content>
     </ion-card>