EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3752 quiz: Implement aria table role on attempts table

main
Pau Ferrer Ocaña 2021-05-12 16:00:59 +02:00
parent ecab609487
commit 02376ff881
1 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
View File

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