[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">
<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>

View File

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

View File

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