From afc6e19152d8205d0a2518c6099ba18ea590bed1 Mon Sep 17 00:00:00 2001
From: rbahirsheth <111955585+rbahirsheth@users.noreply.github.com>
Date: Thu, 17 Nov 2022 06:30:13 +0000
Subject: [PATCH] [ACS-3863] Edit aspect dialog accessibility issues (#7949)

* [ACS-3863] Edit aspect dialog accessibility issues

* [ACS-3863] Fix: main landmark, allowed aria attribute accessibility issues

* [ACS-3863] Addressed review comment
---
 .../src/lib/aspect-list/aspect-list-dialog.component.html   | 6 +++---
 .../src/lib/aspect-list/aspect-list.component.html          | 4 ++--
 .../lib/aspect-list/services/dialog-aspect-list.service.ts  | 6 +++++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
index 8560774133..d299dba393 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
+++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
@@ -1,7 +1,7 @@
-<header mat-dialog-title data-automation-id="aspect-list-dialog-title" class="adf-aspect-list-dialog">
-    <h4 class="adf-aspect-list-dialog-title">{{title | translate}}</h4>
+<div mat-dialog-title data-automation-id="aspect-list-dialog-title" class="adf-aspect-list-dialog">
+    <h1 class="adf-aspect-list-dialog-title">{{title | translate}}</h1>
     <div class="adf-aspect-list-dialog-description">{{description | translate}}</div>
-</header>
+</div>
 
 <div class="adf-aspect-list-dialog-information">
     <p id="aspect-list-dialog-over-table-message">{{overTableMessage | translate}}</p>
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.html b/lib/content-services/src/lib/aspect-list/aspect-list.component.html
index 304299ae96..e97c642cb2 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list.component.html
+++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.html
@@ -7,8 +7,8 @@
                                   [checked]="nodeAspects?.includes(aspect?.entry?.id)"
                                   (click)="onCheckBoxClick($event)"
                                   (change)="onChange($event, aspect?.entry?.id)">
-                    </mat-checkbox>
-                    <p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
+                                  <p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
+                    </mat-checkbox>                    
                 </mat-panel-title>
                 <mat-panel-description [id]="'aspect-list-'+colIndex+'-title'"
                                         [matTooltip]="getTitle(aspect)">
diff --git a/lib/content-services/src/lib/aspect-list/services/dialog-aspect-list.service.ts b/lib/content-services/src/lib/aspect-list/services/dialog-aspect-list.service.ts
index d0345670d9..34b22c0282 100644
--- a/lib/content-services/src/lib/aspect-list/services/dialog-aspect-list.service.ts
+++ b/lib/content-services/src/lib/aspect-list/services/dialog-aspect-list.service.ts
@@ -20,13 +20,14 @@ import { MatDialog } from '@angular/material/dialog';
 import { Observable, Subject } from 'rxjs';
 import { AspectListDialogComponentData } from '../aspect-list-dialog-data.interface';
 import { AspectListDialogComponent } from '../aspect-list-dialog.component';
+import { OverlayContainer } from '@angular/cdk/overlay';
 
 @Injectable({
     providedIn: 'root'
 })
 export class DialogAspectListService {
 
-    constructor(private dialog: MatDialog) {
+    constructor(private dialog: MatDialog, private overlayContainer: OverlayContainer) {
     }
 
     openAspectListDialog(nodeId?: string): Observable<string[]> {
@@ -52,11 +53,14 @@ export class DialogAspectListService {
             data,
             panelClass,
             width,
+            role: 'dialog',
             disableClose: true
         });
+        this.overlayContainer.getContainerElement().setAttribute('role', 'main');
     }
 
     close() {
         this.dialog.closeAll();
+        this.overlayContainer.getContainerElement().setAttribute('role', 'region');
     }
 }