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

Author: crazyserver

src/core/features/block/components/block/block.scss

@@ -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);
     }
 

src/core/features/block/components/block/block.ts

@@ -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.

src/core/features/block/components/block/core-block.html

@@ -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>

src/core/features/courses/pages/my/my.html

@@ -22,7 +22,7 @@ <h1>
     <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 @@ <h2 class="big">{{ 'core.courses.mycourses' | translate }}</h2>
             </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"