feat(modal): aria-labelledby attribute for modal window

Closes #1477
Closes #2049

demo/src/app/components/modal/demos/basic/modal-basic.html

@@ -1,6 +1,6 @@
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
-    <h4 class="modal-title">Profile update</h4>
+    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
       <span aria-hidden="true">&times;</span>
     </button>

demo/src/app/components/modal/demos/basic/modal-basic.ts

@@ -12,7 +12,7 @@ export class NgbdModalBasic {
   constructor(private modalService: NgbModal) {}
 
   open(content) {
-    this.modalService.open(content).result.then((result) => {
+    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
       this.closeResult = `Closed with: ${result}`;
     }, (reason) => {
       this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;

src/modal/modal-stack.ts

@@ -20,7 +20,7 @@ import {NgbActiveModal, NgbModalRef} from './modal-ref';
 @Injectable()
 export class NgbModalStack {
   private _document: any;
-  private _windowAttributes = ['backdrop', 'centered', 'keyboard', 'size', 'windowClass'];
+  private _windowAttributes = ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'size', 'windowClass'];
   private _backdropAttributes = ['backdropClass'];
 
   constructor(

src/modal/modal-window.ts

@@ -22,7 +22,8 @@ import {ngbFocusTrap} from '../util/focus-trap';
     'role': 'dialog',
     'tabindex': '-1',
     '(keyup.esc)': 'escKey($event)',
-    '(click)': 'backdropClick($event)'
+    '(click)': 'backdropClick($event)',
+    '[attr.aria-labelledby]': 'ariaLabelledBy',
   },
   template: `
     <div [class]="'modal-dialog' + (size ? ' modal-' + size : '') + (centered ? ' modal-dialog-centered' : '')" role="document">
@@ -35,6 +36,7 @@ export class NgbModalWindow implements OnInit,
   private _document: any;
   private _elWithFocus: Element;  // element that is focused prior to modal opening
 
+  @Input() ariaLabelledBy: string;
   @Input() backdrop: boolean | string = true;
   @Input() centered: string;
   @Input() keyboard = true;

src/modal/modal.spec.ts

@@ -657,7 +657,22 @@ describe('ngb-modal', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement).not.toHaveModal();
     });
+  });
+
+  describe('accessibility', () => {
+    it('should support aria-labelledby', () => {
+      const id = 'aria-labelledby-id';
+
+      const modalInstance = fixture.componentInstance.open('foo', {ariaLabelledBy: id});
+      fixture.detectChanges();
+
+      const modalElement = <HTMLElement>document.querySelector('ngb-modal-window');
+      expect(modalElement.getAttribute('aria-labelledby')).toBe(id);
 
+      modalInstance.close('some result');
+      fixture.detectChanges();
+      expect(fixture.nativeElement).not.toHaveModal();
+    });
   });
 });
 

src/modal/modal.ts

@@ -7,6 +7,11 @@ import {NgbModalRef} from './modal-ref';
  * Represent options available when opening new modal windows.
  */
 export interface NgbModalOptions {
+  /**
+   * Sets the aria attribute aria-labelledby.
+   */
+  ariaLabelledBy?: string;
+
   /**
    * Whether a backdrop element should be created for a given modal (true by default).
    * Alternatively, specify 'static' for a backdrop which doesn't close the modal on click.