javascriptangulardialogprimengprimeng-dialog

How do I add aria-dialog-name attribute to PrimeNg dynamicdialog?

I am using the primeng dynamic dialog like this:

private dialogService: DialogService
...
...
this.dialogService.open(MyComponent, {
  showHeader: false,
  modal: true,
  autoZIndex: true,
  data: {
    key: "value"
  }
});

However, some of my accessibility tests fail as they are not able to find the aria-dialog-name attribute in the div that has role=dialog.

The project has several dialogs and so it would be impossible to refactor them into a different type of mode and I need to use dynamic model. How can I add this attribute?

Solution

  • You can use the dialogService, dialogComponentRefMap.get(this.ref) to get the elementRef of the dialog using dialogRef.location.nativeElement, then we use the javascript method setAttribute('aria-dialog-name', 'qwerty') to set the desired attribute.

    Reference SO Answer

      show() {
    this.ref = this.dialogService.open(ProductListDemo, {
      header: 'Select a Product',
      width: '50vw',
      contentStyle: { overflow: 'auto' },
      breakpoints: {
        '960px': '75vw',
        '640px': '90vw',
      },
      templates: {
        footer: Footer,
      },
    });
    let dialogRef = this.dialogService.dialogComponentRefMap.get(this.ref);
    console.log(dialogRef.location.nativeElement);
    dialogRef.location.nativeElement.setAttribute('aria-dialog-name', 'qwerty');

    Stackblitz Demo