added ariaRole input to modals. made confirm modal alertdialog. Added aria-modal=true to modals

src/modules/confirm/confirm.component.html

@@ -1,5 +1,6 @@
 <div class="sky-confirm">
-  <sky-modal>
+  <sky-modal
+    ariaRole="alertdialog">
     <sky-modal-content>
       <div class="sky-confirm-message">
         {{ message }}

src/modules/error/error-modal.service.spec.ts

@@ -1,7 +1,20 @@
-import { SkyErrorModalService } from './error-modal.service';
-import { MockModalService } from './fixtures/mocks';
-import { ErrorModalConfig } from './error-modal-config';
-import { SkyErrorModalFormComponent } from './error-modal-form.component';
+import {
+  MockModalService
+} from './fixtures/mocks';
+import {
+  SkyErrorModalService
+} from './error-modal.service';
+import {
+  ErrorModalConfig
+} from './error-modal-config';
+import {
+  SkyErrorModalFormComponent
+} from './error-modal-form.component';
+
+import {
+  SkyModalConfigurationInterface,
+  SkyModalService
+} from '../modal';
 
 describe('Error modal service', () => {
   it('Test open is called with correct parameters', () => {
@@ -13,13 +26,18 @@ describe('Error modal service', () => {
       errorCloseText: 'Close button text'
     };
 
-    const expectedProvider = { provide: ErrorModalConfig, useValue: config };
+    const expectedProviders = [{ provide: ErrorModalConfig, useValue: config }];
 
-    let service = new SkyErrorModalService(modalService);
+    let service = new SkyErrorModalService(modalService as SkyModalService);
     service.open(config);
 
     expect(modalService.openCalls.length).toBe(1);
     expect(modalService.openCalls[0].component).toBe(SkyErrorModalFormComponent);
-    expect(modalService.openCalls[0].providers).toEqual([expectedProvider]);
+
+    // Uses the modalService Open overload that takes config
+    // instead of providers (despite the property name)
+    let modalConfig = modalService.openCalls[0].providers as SkyModalConfigurationInterface;
+    expect(modalConfig.ariaRole).toBe('alertdialog');
+    expect(modalConfig.providers).toEqual(expectedProviders);
   });
 });

src/modules/error/error-modal.service.ts

@@ -10,6 +10,9 @@ export class SkyErrorModalService {
   public open(config: ErrorModalConfig) {
     const providers = [{ provide: ErrorModalConfig, useValue: config }];
 
-    this.modal.open(SkyErrorModalFormComponent, providers);
+    this.modal.open(SkyErrorModalFormComponent, {
+      ariaRole: 'alertdialog',
+      providers: providers
+    });
   }
 }

src/modules/modal/modal-configuration.ts

@@ -7,6 +7,7 @@ export class SkyModalConfiguration {
   public size?: string;
   public ariaDescribedBy?: string;
   public ariaLabelledBy?: string;
+  public ariaRole?: string;
   public tiledBody?: boolean;
   public helpKey?: string;
 

src/modules/modal/modal.component.html

@@ -6,9 +6,10 @@
 
 <div
   class="sky-modal-dialog"
-  role="dialog"
+  aria-modal="true"
   [attr.aria-describedby]="ariaDescribedBy"
   [attr.aria-labelledby]="ariaLabelledBy"
+  [attr.role]="ariaRole"
   (window:resize)="windowResize()"
 >
   <div class="sky-modal sky-shadow"

src/modules/modal/modal.component.spec.ts

@@ -409,9 +409,10 @@ describe('Modal component', () => {
     closeModal(modalInstance);
   }));
 
-  it('should default the aria-labelledby and aria-describedby', fakeAsync(() => {
+  it('should default the role, aria-labelledby, and aria-describedby', fakeAsync(() => {
     let modalInstance = openModal(ModalTestComponent);
 
+    expect(document.querySelector('.sky-modal-dialog').getAttribute('role')).toBe('dialog');
     expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-labelledby')
       .indexOf('sky-modal-header-id-'))
       .not.toBe(-1);
@@ -421,13 +422,15 @@ describe('Modal component', () => {
     closeModal(modalInstance);
   }));
 
-  it('should accept configuration options for aria-labelledBy and aria-describedby',
+  it('should accept configuration options for role, aria-labelledBy, and aria-describedby',
   fakeAsync(() => {
     let modalInstance = openModal(ModalTestComponent, {
       'ariaLabelledBy': 'customlabelledby',
-      'ariaDescribedBy': 'customdescribedby'
+      'ariaDescribedBy': 'customdescribedby',
+      'ariaRole': 'alertdialog'
     });
 
+    expect(document.querySelector('.sky-modal-dialog').getAttribute('role')).toBe('alertdialog');
     expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-labelledby'))
       .toBe('customlabelledby');
     expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-describedby'))

src/modules/modal/modal.component.ts

@@ -74,6 +74,14 @@ export class SkyModalComponent implements AfterViewInit {
     return this.config.tiledBody;
   }
 
+  @Input()
+  public get ariaRole() {
+    return this.config.ariaRole || 'dialog';
+  }
+  public set ariaRole(value: string) {
+    this.config.ariaRole = value;
+  }
+
   public get ariaDescribedBy() {
     return this.config.ariaDescribedBy || this.modalContentId;
   }

src/modules/modal/modal.interface.ts

@@ -4,6 +4,7 @@ export interface SkyModalConfigurationInterface {
   providers?: any[];
   ariaDescribedBy?: string;
   ariaLabelledBy?: string;
+  ariaRole?: string;
   tiledBody?: boolean;
   helpKey?: string;
 }