feat(modal): add 'aria-describedby' for modal window (#3695)

Fixes #3678

src/modal/modal-config.spec.ts

@@ -7,6 +7,7 @@ describe('NgbModalConfig', () => {
   it('should have sensible default values', inject([NgbModalConfig], (config: NgbModalConfig) => {
 
        expect(config.ariaLabelledBy).toBeUndefined();
+       expect(config.ariaDescribedBy).toBeUndefined();
        expect(config.backdrop).toBe(true);
        expect(config.backdropClass).toBeUndefined();
        expect(config.beforeDismiss).toBeUndefined();

src/modal/modal-config.ts

@@ -11,6 +11,12 @@ export interface NgbModalOptions {
    */
   ariaLabelledBy?: string;
 
+  /**
+   * `aria-describedby` attribute value to set on the modal window.
+   */
+  ariaDescribedBy?: string;
+
+
   /**
    * If `true`, the backdrop element will be created for a given modal.
    *
@@ -97,6 +103,7 @@ export interface NgbModalOptions {
 @Injectable({providedIn: 'root'})
 export class NgbModalConfig implements Required<NgbModalOptions> {
   ariaLabelledBy: string;
+  ariaDescribedBy: string;
   backdrop: boolean | 'static' = true;
   beforeDismiss: () => boolean | Promise<boolean>;
   centered: boolean;

src/modal/modal-stack.ts

@@ -28,7 +28,7 @@ export class NgbModalStack {
   private _backdropAttributes = ['backdropClass'];
   private _modalRefs: NgbModalRef[] = [];
   private _windowAttributes =
-      ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'scrollable', 'size', 'windowClass'];
+      ['ariaLabelledBy', 'ariaDescribedBy', 'backdrop', 'centered', 'keyboard', 'scrollable', 'size', 'windowClass'];
   private _windowCmpts: ComponentRef<NgbModalWindow>[] = [];
 
   constructor(

src/modal/modal-window.ts

@@ -28,6 +28,7 @@ import {ModalDismissReasons} from './modal-dismiss-reasons';
     'tabindex': '-1',
     '[attr.aria-modal]': 'true',
     '[attr.aria-labelledby]': 'ariaLabelledBy',
+    '[attr.aria-describedby]': 'ariaDescribedBy',
   },
   template: `
     <div #dialog [class]="'modal-dialog' + (size ? ' modal-' + size : '') + (centered ? ' modal-dialog-centered' : '') +
@@ -46,6 +47,7 @@ export class NgbModalWindow implements OnInit,
   @ViewChild('dialog', {static: true}) private _dialogEl: ElementRef<HTMLElement>;
 
   @Input() ariaLabelledBy: string;
+  @Input() ariaDescribedBy: string;
   @Input() backdrop: boolean | string = true;
   @Input() centered: string;
   @Input() keyboard = true;

src/modal/modal.spec.ts

@@ -669,6 +669,20 @@ describe('ngb-modal', () => {
         expect(fixture.nativeElement).not.toHaveModal();
       });
 
+      it('should support aria-describedby', () => {
+        const id = 'aria-describedby-id';
+
+        const modalInstance = fixture.componentInstance.open('foo', {ariaDescribedBy: id});
+        fixture.detectChanges();
+
+        const modalElement = <HTMLElement>document.querySelector('ngb-modal-window');
+        expect(modalElement.getAttribute('aria-describedby')).toBe(id);
+
+        modalInstance.close('some result');
+        fixture.detectChanges();
+        expect(fixture.nativeElement).not.toHaveModal();
+      });
+
       it('should have aria-modal attribute', () => {
         const a11yFixture = TestBed.createComponent(TestA11yComponent);
         const modalInstance = a11yFixture.componentInstance.open();