From 0f53774819c747f44689b302b4510b2fdbc8a2cf Mon Sep 17 00:00:00 2001
From: Jodie Muramoto <jmuramoto@unicon.net>
Date: Thu, 5 Apr 2018 17:12:15 -0700
Subject: [PATCH] SHIBUI-383: Added updates to the save information modal to
 make more keyboard/screenreader accessible friendly

---
 .../component/unsaved-dialog.component.html   | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/src/app/edit-provider/component/unsaved-dialog.component.html b/ui/src/app/edit-provider/component/unsaved-dialog.component.html
index d93c2226b..924011fe8 100644
--- a/ui/src/app/edit-provider/component/unsaved-dialog.component.html
+++ b/ui/src/app/edit-provider/component/unsaved-dialog.component.html
@@ -1,20 +1,22 @@
-<ng-container  [ngSwitch]="message">
-<div class="modal-header">
-    <h4 class="modal-title" i18n="@@message--unsaved-dialog-title">Save your information?</h4>
-</div>
-<div class="modal-body">
-    <p *ngSwitchDefault i18n="@@message--unsaved-default">
-        You have not completed the wizard! Do you wish to save this information? You can finish the wizard later by clicking the
-        "Edit"
-        <i class="fa fa-edit"></i> icon on the dashboard.
-    </p>
-    <p *ngSwitchCase="'editor'" i18n="@@message--unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-primary" (click)="this.close()">
-        <span *ngSwitchDefault i18n="@@action--finish-later">Finish Later</span>
-        <span *ngSwitchCase="'editor'" i18n="@@action--discard-changes">Discard Changes</span>
-    </button>
-    <button type="button" class="btn btn-secondary" (click)="this.dismiss()" i18n="@@action--cancel">Cancel</button>
-</div>
-</ng-container>
\ No newline at end of file
+<ng-container [ngSwitch]="message">
+    <div aria-label="Save your information? modal" role="region" tabindex="0">
+        <div class="modal-header">
+            <h4 class="modal-title" i18n="@@message--unsaved-dialog-title">Save your information?</h4>
+        </div>
+        <div class="modal-body">
+            <p *ngSwitchDefault i18n="@@message--unsaved-default">
+                You have not completed the wizard! Do you wish to save this information? You can finish the wizard later by clicking the
+                "Edit"
+                <i class="fa fa-edit"></i> icon on the dashboard.
+            </p>
+            <p *ngSwitchCase="'editor'" i18n="@@message--unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-primary" (click)="this.close()">
+                <span *ngSwitchDefault i18n="@@action--finish-later" aria-label="Finish changes later, go back to dashboard">Finish Later</span>
+                <span *ngSwitchCase="'editor'" i18n="@@action--discard-changes" aria-label="Discard changes, go back to dashboard">Discard Changes</span>
+            </button>
+            <button type="button" class="btn btn-secondary" (click)="this.dismiss()" i18n="@@action--cancel" aria-label="Close modal and go back to editing">Cancel</button>
+        </div>
+    </div>
+</ng-container>