CODEWITHSUNDEEP
angularng-bootstraplighthouse
Avishag Saban
Avishag Saban

Reputation: 61

Accessability bootstrap modal angular

I'm using lighthouse to check my app accessability. I'm trying to make bootstrap modal accessabile. The Component's code:

constructor(private modalService: NgbModal) {}

let m = this.modalService.open(ModalContentComponent, {
      backdrop: 'static',
      keyboard: false,
      
      ariaDescribedBy:'tttt',
      ariaLabelledBy:'uuuuu'
    });
    m.componentInstance.closeModal.subscribe(($event: any) => m.close('Close click'))

The rendered html: html rendered The nested elements insode ngb-modal-content are with roles and without arias

The modal is being open automatically when the page loaded.

And I'm getting the error: "Elements with role="dialog" or role="alertdialog" do not have accessible names."

Upvotes: 1

Views: 123

Answers (1)

Vinoth S
Vinoth S

Reputation: 1

The problem is that the ariaDescribedBy and ariaLabelledBy attributes are not being rendered in the HTML. This is because the modal is being opened automatically when the page is loaded, and the HTML is not yet ready.

To fix this, you can use the ngAfterViewInit lifecycle hook to open the modal after the HTML has been rendered. This will ensure that the ariaDescribedBy and ariaLabelledBy attributes are included in the HTML.

Here is an example of how to do this:

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <button (click)="openModal()">Open modal</button>
    </div>
  `,
})
export class MyComponent implements OnInit, AfterViewInit {
  constructor(private modalService: NgbModal) {}

  ngOnInit(): void {
    // Do something on init
  }

  ngAfterViewInit(): void {
    this.openModal();
  }

  openModal() {
    let m = this.modalService.open(ModalContentComponent, {
      backdrop: 'static',
      keyboard: false,

      ariaDescribedBy: 'tttt',
      ariaLabelledBy: 'uuuuuu',
    });
    m.componentInstance.closeModal.subscribe(($event: any) => m.close('Close click'));
  }
}

This should fix the accessibility error.

I hope this helps!

Upvotes: 0

Related Questions