MOBILE-4065 a11y: Add aria-role region to headings order

main
Pau Ferrer Ocaña 2023-02-13 12:59:18 +01:00
parent 0b9b617fa8
commit 50773aa46d
4 changed files with 7 additions and 4 deletions

View File

@ -4,7 +4,7 @@
flex-direction: column;
background: var(--background);
ion-item-divider {
::ng-deep ion-item-divider {
min-height: var(--item-divider-min-height);
}

View File

@ -35,6 +35,7 @@ export class CoreBlockComponent implements OnChanges, OnDestroy {
@Input() contextLevel!: string; // The context where the block will be used.
@Input() instanceId!: number; // The instance ID associated with the context level.
@Input() extraData!: Record<string, unknown>; // Any extra data to be passed to the block.
@Input() labelledBy?: string;
componentClass?: Type<ICoreBlockComponent>; // The class of the component to render.
data: Record<string, unknown> = {}; // Data to pass to the component.

View File

@ -1,4 +1,5 @@
<!-- Only render the block if it's supported. -->
<ion-card *ngIf="loaded && componentClass && block && block.visible" class="{{class}}">
<ion-card *ngIf="loaded && componentClass && block && block.visible" class="{{class}}" role="region"
[attr.aria-labelledby]="labelledBy ? labelledBy : null">
<core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
</ion-card>

View File

@ -22,7 +22,7 @@
<core-loading [hideUntil]="loaded">
<ion-item class="ion-text-wrap divider">
<ion-label>
<h2 class="big">{{ 'core.courses.mycourses' | translate }}</h2>
<h2 class="big" id="core-courses-my-title">{{ 'core.courses.mycourses' | translate }}</h2>
</ion-label>
<div slot="end" class="flex-row">
<!-- Download all courses. -->
@ -46,7 +46,8 @@
</div>
</ion-item>
<ion-list>
<core-block *ngIf="loadedBlock?.visible" [block]="loadedBlock" contextLevel="user" [instanceId]="userId"></core-block>
<core-block *ngIf="loadedBlock?.visible" [block]="loadedBlock" contextLevel="user" [instanceId]="userId"
labelledBy="core-courses-my-title"></core-block>
</ion-list>
<core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks" contextLevel="user" [instanceId]="userId"