[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
This commit is contained in:
rbahirsheth 2022-11-17 06:30:13 +00:00 committed by GitHub
parent fa96a15be4
commit afc6e19152
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 6 deletions

View File

@ -1,7 +1,7 @@
<header mat-dialog-title data-automation-id="aspect-list-dialog-title" class="adf-aspect-list-dialog"> <div 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> <h1 class="adf-aspect-list-dialog-title">{{title | translate}}</h1>
<div class="adf-aspect-list-dialog-description">{{description | translate}}</div> <div class="adf-aspect-list-dialog-description">{{description | translate}}</div>
</header> </div>
<div class="adf-aspect-list-dialog-information"> <div class="adf-aspect-list-dialog-information">
<p id="aspect-list-dialog-over-table-message">{{overTableMessage | translate}}</p> <p id="aspect-list-dialog-over-table-message">{{overTableMessage | translate}}</p>

View File

@ -7,8 +7,8 @@
[checked]="nodeAspects?.includes(aspect?.entry?.id)" [checked]="nodeAspects?.includes(aspect?.entry?.id)"
(click)="onCheckBoxClick($event)" (click)="onCheckBoxClick($event)"
(change)="onChange($event, aspect?.entry?.id)"> (change)="onChange($event, aspect?.entry?.id)">
<p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
</mat-checkbox> </mat-checkbox>
<p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
</mat-panel-title> </mat-panel-title>
<mat-panel-description [id]="'aspect-list-'+colIndex+'-title'" <mat-panel-description [id]="'aspect-list-'+colIndex+'-title'"
[matTooltip]="getTitle(aspect)"> [matTooltip]="getTitle(aspect)">

View File

@ -20,13 +20,14 @@ import { MatDialog } from '@angular/material/dialog';
import { Observable, Subject } from 'rxjs'; import { Observable, Subject } from 'rxjs';
import { AspectListDialogComponentData } from '../aspect-list-dialog-data.interface'; import { AspectListDialogComponentData } from '../aspect-list-dialog-data.interface';
import { AspectListDialogComponent } from '../aspect-list-dialog.component'; import { AspectListDialogComponent } from '../aspect-list-dialog.component';
import { OverlayContainer } from '@angular/cdk/overlay';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class DialogAspectListService { export class DialogAspectListService {
constructor(private dialog: MatDialog) { constructor(private dialog: MatDialog, private overlayContainer: OverlayContainer) {
} }
openAspectListDialog(nodeId?: string): Observable<string[]> { openAspectListDialog(nodeId?: string): Observable<string[]> {
@ -52,11 +53,14 @@ export class DialogAspectListService {
data, data,
panelClass, panelClass,
width, width,
role: 'dialog',
disableClose: true disableClose: true
}); });
this.overlayContainer.getContainerElement().setAttribute('role', 'main');
} }
close() { close() {
this.dialog.closeAll(); this.dialog.closeAll();
this.overlayContainer.getContainerElement().setAttribute('role', 'region');
} }
} }