Merge pull request #2819 from NoelDeMartin/MOBILE-3320

MOBILE-3320: a11y tweaks + chart fix

.github/workflows/e2e.yml

@@ -1,6 +1,8 @@
 name: E2E
 
-on: [push, pull_request]
+on:
+  schedule:
+    - cron: '0 0 * * *'  # every day at midnight
 
 jobs:
   e2e:

src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html

@@ -24,7 +24,7 @@
 
 <!-- Edit -->
 <ion-item class="ion-text-wrap" *ngIf="edit && loaded">
-    <ion-label></ion-label>
+    <ion-label class="sr-only">{{ plugin.name }}</ion-label>
     <core-rich-text-editor [control]="control" [placeholder]="plugin.name"
         name="assignfeedbackcomments_editor" [component]="component" [componentId]="assign.cmid" [autoSave]="true"
         contextLevel="module" [contextInstanceId]="assign.cmid" elementId="assignfeedbackcomments_editor"

src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html

@@ -5,7 +5,7 @@
     </ion-label>
 </ion-item>
 <ion-item [formGroup]="form">
-    <ion-label></ion-label>
+    <ion-label class="sr-only">{{ 'addon.mod_quiz.quizpassword' | translate }}</ion-label>
     <core-show-password [name]="'quizpassword'">
         <ion-input id="addon-mod_quiz-accessrule-password-input" name="quizpassword" type="password"
             placeholder="{{ 'addon.mod_quiz.quizpassword' | translate }}" [formControlName]="'quizpassword'" [clearOnEdit]="false">

src/addons/mod/wiki/pages/edit/edit.html

@@ -19,14 +19,14 @@
     <core-loading [hideUntil]="loaded">
         <form [formGroup]="pageForm" #editPageForm *ngIf="loaded">
             <ion-item class="ion-text-wrap" *ngIf="canEditTitle">
-                <ion-label></ion-label>
+                <ion-label class="sr-only">{{ 'addon.mod_wiki.newpagetitle' | translate }}</ion-label>
                 <ion-input name="title" type="text" [placeholder]="'addon.mod_wiki.newpagetitle' | translate"
                     formControlName="title">
                 </ion-input>
             </ion-item>
 
             <ion-item>
-                <ion-label></ion-label>
+                <ion-label class="sr-only">{{ 'core.content' | translate }}</ion-label>
                 <core-rich-text-editor [control]="contentControl" [placeholder]="'core.content' | translate"
                     name="wiki_page_content" [component]="component" [componentId]="cmId" [autoSave]="true" contextLevel="module"
                     [contextInstanceId]="cmId" elementId="newcontent_editor" [draftExtraParams]="editorExtraParams">

src/addons/notes/components/add/add-modal.html

@@ -19,7 +19,7 @@
             </ion-select>
         </ion-item>
         <ion-item>
-            <ion-label></ion-label>
+            <ion-label class="sr-only">{{ 'addon.notes.note' | translate }}</ion-label>
             <ion-textarea placeholder="{{ 'addon.notes.note' | translate }}" rows="5" [(ngModel)]="text" name="text"
                 required="required">
             </ion-textarea>

src/addons/qtype/essay/component/addon-qtype-essay.html

@@ -12,7 +12,7 @@
     <ng-container *ngIf="!review">
         <!-- Textarea. -->
         <ion-item *ngIf="essayQuestion.textarea && (!essayQuestion.hasDraftFiles || uploadFilesSupported)">
-            <ion-label></ion-label>
+            <ion-label class="sr-only">{{ 'core.question.answer' | translate }}</ion-label>
             <!-- "Format" and draftid hidden inputs -->
             <input *ngIf="essayQuestion.formatInput" type="hidden" [name]="essayQuestion.formatInput.name"
                 [value]="essayQuestion.formatInput.value" >

src/core/components/chart/chart.ts

@@ -57,6 +57,7 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
     @ViewChild('canvas') canvas?: ElementRef<HTMLCanvasElement>;
 
     chart?: ChartWithLegend;
+    legendItems: ChartLegendLabelItem[] = [];
 
     /**
      * @inheritdoc
@@ -105,6 +106,8 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
             },
             options: { legend },
         });
+
+        this.updateLegendItems();
     }
 
     /**
@@ -126,6 +129,8 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
         };
         this.chart.data.labels = this.labels;
         this.chart.update();
+
+        this.updateLegendItems();
     }
 
     /**
@@ -179,6 +184,13 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
         }
     }
 
+    /**
+     * Recompute legendItems property.
+     */
+    protected updateLegendItems(): void {
+        this.legendItems = (this.chart?.legend?.legendItems ?? []).filter(item => !!item);
+    }
+
 }
 
 // For some reason the legend property isn't defined in TS, define it ourselves.

src/core/components/chart/core-chart.html

@@ -1,7 +1,7 @@
 <canvas #canvas [attr.height]="height"></canvas>
 
 <ion-list *ngIf="chart">
-    <ion-item *ngFor="let data of chart.legend!.legendItems">
+    <ion-item *ngFor="let data of legendItems">
         <ion-icon name="fas-square" slot="start" [style.color]="data.fillStyle" aria-hidden="true"></ion-icon>
         <ion-label>{{data.text}}</ion-label>
     </ion-item>

src/core/features/courses/components/self-enrol-password/self-enrol-password.html

@@ -12,7 +12,7 @@
 <ion-content class="ion-padding">
     <form (ngSubmit)="submitPassword($event)" #enrolPasswordForm>
         <ion-item>
-            <ion-label></ion-label>
+            <ion-label class="sr-only">{{ 'core.courses.password' | translate }}</ion-label>
             <core-show-password name="password">
                 <ion-input
                     class="ion-text-wrap core-ioninput-password"

src/core/features/login/pages/credentials/credentials.html

@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
         <h1>{{ 'core.login.login' | translate }}</h1>

src/core/features/login/pages/forgotten-password/forgotten-password.html

@@ -29,7 +29,7 @@
                 </ion-item>
             </ion-radio-group>
             <ion-item>
-                <ion-label></ion-label>
+                <ion-label class="sr-only">{{ 'core.login.usernameoremail' | translate }}</ion-label>
                 <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}"
                     formControlName="value" autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
                 </ion-input>

src/core/features/login/pages/reconnect/reconnect.html

@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
         <h1>{{ 'core.login.reconnect' | translate }}</h1>