From 50773aa46da4466555c14ac362193aaecaa7c78f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 13 Feb 2023 12:59:18 +0100
Subject: [PATCH] MOBILE-4065 a11y: Add aria-role region to headings order

---
 src/core/features/block/components/block/block.scss      | 2 +-
 src/core/features/block/components/block/block.ts        | 1 +
 src/core/features/block/components/block/core-block.html | 3 ++-
 src/core/features/courses/pages/my/my.html               | 5 +++--
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss
index 72e49c32f..721e6f354 100644
--- a/src/core/features/block/components/block/block.scss
+++ b/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);
     }
 
diff --git a/src/core/features/block/components/block/block.ts b/src/core/features/block/components/block/block.ts
index ae37afab2..b505f6937 100644
--- a/src/core/features/block/components/block/block.ts
+++ b/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.
diff --git a/src/core/features/block/components/block/core-block.html b/src/core/features/block/components/block/core-block.html
index 663799e01..100fe873a 100644
--- a/src/core/features/block/components/block/core-block.html
+++ b/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>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 1f307e4b7..83cc1fd54 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -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"