feat(design): add ARIA features to modal (#2832)

libs/design/modal/src/modal-header/modal-header.component.html

@@ -0,0 +1 @@
+<ng-content select="[daffModalTitle]"></ng-content>

libs/design/modal/src/modal-header/modal-header.component.ts

@@ -7,8 +7,7 @@ import {
 
 @Component({
   selector: 'daff-modal-header',
-  template: '<ng-content></ng-content>',
-  styleUrls: ['./modal-header.component.scss'],
+  templateUrl: './modal-header.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

libs/design/modal/src/modal-title/modal-title.directive.spec.ts

@@ -51,4 +51,8 @@ describe('@daffodil/design/modal | DaffModalTitleDirective', () => {
       }));
     });
   });
+
+  it('should define its own id', () => {
+    expect(de.componentInstance.id).toEqual(de.componentInstance._uniqueRadioId);
+  });
 });

libs/design/modal/src/modal-title/modal-title.directive.ts

@@ -1,14 +1,45 @@
 import {
   Directive,
   HostBinding,
+  Optional,
 } from '@angular/core';
 
+import { DaffModalComponent } from '../modal/modal.component';
+
+let modalTitleId = 0;
+
+/**
+ * Title of a modal.
+ */
 @Directive({
   selector: '[daffModalTitle]',
 })
+
 export class DaffModalTitleDirective {
   /**
    * @docs-private
    */
   @HostBinding('class.daff-modal-title') class = true;
+
+  private _id = '';
+
+  /**
+   * The html `id` of the modal title.
+   */
+  @HostBinding('attr.id') get uniqueId() {
+    return this._id;
+  }
+
+  constructor(@Optional() private modal: DaffModalComponent) {
+    modalTitleId++;
+
+    this._id = 'daff-modal-title-' + modalTitleId;
+
+    /**
+     * Sets the ariaLabelledBy of the modal to the id of the modal title.
+     */
+    if(this.modal) {
+      this.modal.ariaLabelledBy = this.uniqueId;
+    }
+  }
 }

libs/design/modal/src/modal/modal.component.spec.ts

@@ -14,7 +14,7 @@ import { DaffModalComponent } from './modal.component';
 import { DaffModalService } from '../service/modal.service';
 
 @Component({ template: `
-  <div class="daff-modal-wrapper">
+  <div class="custom-modal-component">
     <daff-modal></daff-modal>
   </div>
 ` })
@@ -54,4 +54,12 @@ describe('@daffodil/design/modal | DaffModalComponent', () => {
   it('should create', () => {
     expect(wrapper).toBeTruthy();
   });
+
+  it('should have a role of dialog on the host element', () => {
+    expect(modal.role).toBe('dialog');
+  });
+
+  it('should set aria-modal to true on the host element', () => {
+    expect(modalDe.attributes['aria-modal']).toEqual('true');
+  });
 });

libs/design/modal/src/modal/modal.component.ts

@@ -40,6 +40,29 @@ export class DaffModalComponent implements AfterContentInit, AfterViewInit {
    */
   @HostBinding('class.daff-modal') modalClass = true;
 
+  /**
+   * Sets the role to dialog.
+   */
+  @HostBinding('attr.role') role = 'dialog';
+
+  /**
+   * Sets aria-modal to true.
+   */
+  @HostBinding('attr.aria-modal') ariaModal = true;
+
+  private _ariaLabelledBy = null;
+
+  /**
+   * The aria-labelledby for the modal. This is set by the id of
+   * {@link DaffModalTitleDirective} when it is used.
+   *
+   */
+  @HostBinding('attr.aria-labelledby') get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+  } set ariaLabelledBy(value: string) {
+    this._ariaLabelledBy = value;
+  }
+
   /**
    * Dictates whether or not a modal is open or closed.
    */