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

MOBILE-4069 a11y: Remove unneeded aria-labelledby 

With the latest Ionic update, these aria-labelledby aren't needed and one of them even caused a behat test to fail
main
Dani Palou 2023-02-13 10:00:53 +01:00
parent 138377e504
commit 8996cef648
8 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/addons/mod/forum/pages/new-discussion/new-discussion.html
View File

@ -46,10 +46,10 @@
<ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups"></ion-toggle> <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups"></ion-toggle>
</ion-item> </ion-item>
<ion-item *ngIf="showGroups" class="core-edit-set-group"> <ion-item *ngIf="showGroups" class="core-edit-set-group">
<ion-label id="addon-mod-forum-groupslabel">{{ 'addon.mod_forum.group' | translate }}</ion-label> <ion-label>{{ 'addon.mod_forum.group' | translate }}</ion-label>
<ion-select [(ngModel)]="newDiscussion.groupId" [disabled]="newDiscussion.postToAllGroups" <ion-select [(ngModel)]="newDiscussion.groupId" [disabled]="newDiscussion.postToAllGroups" interface="action-sheet"
aria-labelledby="addon-mod-forum-groupslabel" interface="action-sheet" name="groupid" name="groupid" [interfaceOptions]="{header: 'addon.mod_forum.group' | translate}"
[interfaceOptions]="{header: 'addon.mod_forum.group' | translate}" (ionChange)="calculateGroupName()"> (ionChange)="calculateGroupName()">
<ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option> <ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option>
</ion-select> </ion-select>
</ion-item> </ion-item>

11
src/addons/mod/glossary/pages/edit/edit.html
View File

@ -28,11 +28,11 @@
</core-rich-text-editor> </core-rich-text-editor>
</ion-item> </ion-item>
<ion-item *ngIf="categories.length > 0"> <ion-item *ngIf="categories.length > 0">
<ion-label position="stacked" id="addon-mod-glossary-categories-label"> <ion-label position="stacked">
{{ 'addon.mod_glossary.categories' | translate }} {{ 'addon.mod_glossary.categories' | translate }}
</ion-label> </ion-label>
<ion-select [(ngModel)]="options.categories" multiple="true" aria-labelledby="addon-mod-glossary-categories-label" <ion-select [(ngModel)]="options.categories" multiple="true" interface="action-sheet"
interface="action-sheet" [placeholder]="'addon.mod_glossary.categories' | translate" name="categories" [placeholder]="'addon.mod_glossary.categories' | translate" name="categories"
[interfaceOptions]="{header: 'addon.mod_glossary.categories' | translate}"> [interfaceOptions]="{header: 'addon.mod_glossary.categories' | translate}">
<ion-select-option *ngFor="let category of categories" [value]="category.id"> <ion-select-option *ngFor="let category of categories" [value]="category.id">
{{ category.name }} {{ category.name }}
@ -40,11 +40,10 @@
</ion-select> </ion-select>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label position="stacked" id="addon-mod-glossary-aliases-label"> <ion-label position="stacked">
{{ 'addon.mod_glossary.aliases' | translate }} {{ 'addon.mod_glossary.aliases' | translate }}
</ion-label> </ion-label>
<ion-textarea [(ngModel)]="options.aliases" rows="1" [core-auto-rows]="options.aliases" <ion-textarea [(ngModel)]="options.aliases" rows="1" [core-auto-rows]="options.aliases" name="aliases">
aria-labelledby="addon-mod-glossary-aliases-label" name="aliases">
</ion-textarea> </ion-textarea>
</ion-item> </ion-item>
<ion-item-divider> <ion-item-divider>

8
src/addons/mod/lesson/pages/player/player.html
View File

@ -138,14 +138,12 @@
<ion-item class="ion-text-wrap" *ngFor="let row of question.rows"> <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
<ion-label> <ion-label>
<p> <p>
<core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component" <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="row.text"
[componentId]="lesson?.coursemodule" [text]="row.text" contextLevel="module" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
[contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
</core-format-text> </core-format-text>
</p> </p>
</ion-label> </ion-label>
<ion-select [id]="row.id" [formControlName]="row.name" interface="action-sheet" <ion-select [id]="row.id" [formControlName]="row.name" interface="action-sheet">
[attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id">
<ion-select-option *ngFor="let option of row.options" [value]="option.value"> <ion-select-option *ngFor="let option of row.options" [value]="option.value">
{{option.label}} {{option.label}}
</ion-select-option> </ion-select-option>

5
src/addons/mod/lesson/pages/user-retake/user-retake.html
View File

@ -27,9 +27,8 @@
<!-- Retake selector if there is more than one retake. --> <!-- Retake selector if there is more than one retake. -->
<ion-item class="ion-text-wrap" *ngIf="student.attempts && student.attempts.length > 1"> <ion-item class="ion-text-wrap" *ngIf="student.attempts && student.attempts.length > 1">
<ion-label id="addon-mod_lesson-retakeslabel">{{ 'addon.mod_lesson.attemptheader' | translate }}</ion-label> <ion-label>{{ 'addon.mod_lesson.attemptheader' | translate }}</ion-label>
<ion-select [(ngModel)]="selectedRetake" (ionChange)="changeRetake(selectedRetake!)" <ion-select [(ngModel)]="selectedRetake" (ionChange)="changeRetake(selectedRetake!)" interface="action-sheet"
aria-labelledby="addon-mod_lesson-retakeslabel" interface="action-sheet"
[interfaceOptions]="{header: 'addon.mod_lesson.attemptheader' | translate}"> [interfaceOptions]="{header: 'addon.mod_lesson.attemptheader' | translate}">
<ion-select-option *ngFor="let retake of student.attempts" [value]="retake.try"> <ion-select-option *ngFor="let retake of student.attempts" [value]="retake.try">
{{retake.label}} {{retake.label}}

5
src/addons/mod/survey/components/index/addon-mod-survey-index.html
View File

@ -102,13 +102,12 @@
</ion-row> </ion-row>
<ion-item *ngIf="question.type === 0" class="ion-text-wrap" [class.even]="isEven"> <ion-item *ngIf="question.type === 0" class="ion-text-wrap" [class.even]="isEven">
<ion-label position="floating" id="addon-mod_survey-{{question.name}}"> <ion-label position="floating">
<span [core-mark-required]="question.required"> <span [core-mark-required]="question.required">
<strong>{{question.num}}.</strong> {{ question.text }} <strong>{{question.num}}.</strong> {{ question.text }}
</span> </span>
</ion-label> </ion-label>
<ion-textarea [(ngModel)]="answers[question.name]" [name]="question.name" <ion-textarea [(ngModel)]="answers[question.name]" [name]="question.name" [required]="question.required">
[attr.aria-labelledby]="'addon-mod_survey-'+question.name" [required]="question.required">
</ion-textarea> </ion-textarea>
</ion-item> </ion-item>
</ng-container> </ng-container>

5
src/core/components/group-selector/group-selector.html
View File

@ -7,12 +7,11 @@
</ion-card> </ion-card>
<ion-item class="ion-text-wrap core-group-selector"> <ion-item class="ion-text-wrap core-group-selector">
<ion-label id="core-groups-selector-groupslabel-{{id}}"> <ion-label>
<ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container> <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
<ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container> <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
</ion-label> </ion-label>
<ion-select [(ngModel)]="selected" (ionChange)="selectedChange.emit(selected)" <ion-select [(ngModel)]="selected" (ionChange)="selectedChange.emit(selected)" interface="action-sheet"
[attr.aria-labelledby]="'core-groups-selector-groupslabel-' + id" interface="action-sheet"
[interfaceOptions]="{header: 'core.group' | translate}"> [interfaceOptions]="{header: 'core.group' | translate}">
<ion-select-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id"> <ion-select-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">
{{groupOpt.name}} {{groupOpt.name}}

14
src/core/components/group-selector/group-selector.ts
View File

@ -12,9 +12,8 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CoreGroupInfo } from '@services/groups'; import { CoreGroupInfo } from '@services/groups';
import { CoreUtils } from '@services/utils/utils';
/** /**
* Component to display a group selector. * Component to display a group selector.
@ -24,20 +23,11 @@ import { CoreUtils } from '@services/utils/utils';
templateUrl: 'group-selector.html', templateUrl: 'group-selector.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class CoreGroupSelectorComponent implements OnInit { export class CoreGroupSelectorComponent {
@Input() groupInfo?: CoreGroupInfo; @Input() groupInfo?: CoreGroupInfo;
@Input() multipleGroupsMessage?: string; @Input() multipleGroupsMessage?: string;
@Input() selected!: number; @Input() selected!: number;
@Output() selectedChange = new EventEmitter<number>(); @Output() selectedChange = new EventEmitter<number>();
id!: number;
/**
* @inheritdoc
*/
ngOnInit(): void {
this.id = CoreUtils.getUniqueId('CoreGroupSelectorComponent');
}
} }

5
src/core/features/login/pages/email-signup/email-signup.html
View File

@ -159,9 +159,8 @@
</ion-input> </ion-input>
</ion-item> </ion-item>
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label position="stacked" id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label> <ion-label position="stacked">{{ 'core.user.country' | translate }}</ion-label>
<ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country" <ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate">
[placeholder]="'core.login.selectacountry' | translate">
<ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option> <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
<ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option> <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>