From b4b1b05696190698362466f3224a29a353269eb3 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 29 Jun 2018 15:34:40 -0400
Subject: [PATCH 1/4] added ariaRole input to modals. made confirm modal
 alertdialog

---
 src/modules/confirm/confirm.component.html | 3 ++-
 src/modules/modal/modal-configuration.ts   | 1 +
 src/modules/modal/modal.component.html     | 2 +-
 src/modules/modal/modal.component.spec.ts  | 9 ++++++---
 src/modules/modal/modal.component.ts       | 8 ++++++++
 src/modules/modal/modal.interface.ts       | 1 +
 6 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/modules/confirm/confirm.component.html b/src/modules/confirm/confirm.component.html
index 5a02c0e1a..fd378dfe6 100644
--- a/src/modules/confirm/confirm.component.html
+++ b/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 }}
diff --git a/src/modules/modal/modal-configuration.ts b/src/modules/modal/modal-configuration.ts
index 3b6b7c917..6499da365 100644
--- a/src/modules/modal/modal-configuration.ts
+++ b/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;
 
diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html
index 84ca13481..1f7baa233 100644
--- a/src/modules/modal/modal.component.html
+++ b/src/modules/modal/modal.component.html
@@ -6,9 +6,9 @@
 
 <div
   class="sky-modal-dialog"
-  role="dialog"
   [attr.aria-describedby]="ariaDescribedBy"
   [attr.aria-labelledby]="ariaLabelledBy"
+  [attr.role]="ariaRole"
   (window:resize)="windowResize()"
 >
   <div class="sky-modal sky-shadow"
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index 3cbac4c54..e19e7d1a4 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/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'))
diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index 33045e1d0..a7af87b02 100644
--- a/src/modules/modal/modal.component.ts
+++ b/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;
   }
diff --git a/src/modules/modal/modal.interface.ts b/src/modules/modal/modal.interface.ts
index 04c432651..9480438cb 100644
--- a/src/modules/modal/modal.interface.ts
+++ b/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;
 }

From 67fdd79583a2a701a86a6ea5406a983f213a8664 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 29 Jun 2018 15:40:21 -0400
Subject: [PATCH 2/4] added aria-modal=true to modals

---
 src/modules/modal/modal.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html
index 1f7baa233..94661754c 100644
--- a/src/modules/modal/modal.component.html
+++ b/src/modules/modal/modal.component.html
@@ -6,6 +6,7 @@
 
 <div
   class="sky-modal-dialog"
+  aria-modal="true"
   [attr.aria-describedby]="ariaDescribedBy"
   [attr.aria-labelledby]="ariaLabelledBy"
   [attr.role]="ariaRole"

From 60652be078e955fe6f85d3e0c1212dcd161ea113 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Tue, 3 Jul 2018 15:26:33 -0400
Subject: [PATCH 3/4] changed error component modals to be alertdialog roles

---
 src/modules/error/error-modal.service.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/modules/error/error-modal.service.ts b/src/modules/error/error-modal.service.ts
index f16bd5a3d..66139fb2b 100644
--- a/src/modules/error/error-modal.service.ts
+++ b/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
+    });
   }
 }

From 9cd8c69b62a9abd2a0bb32746d1fb3f5c338f694 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Wed, 18 Jul 2018 11:09:52 -0400
Subject: [PATCH 4/4] fixed mixed up unit test and added ariaRole coverage

---
 src/modules/error/error-modal.service.spec.ts | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/modules/error/error-modal.service.spec.ts b/src/modules/error/error-modal.service.spec.ts
index 975d776d7..e170e1722 100644
--- a/src/modules/error/error-modal.service.spec.ts
+++ b/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);
   });
 });