From 9b4969aad69b834999d90dd75ca9fac7d0161308 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 18 Apr 2017 21:35:29 -0300
Subject: [PATCH 1/5] Added closeOnEsc, hideHeaderClose & enforceFocus

Added option for disabling close on ESC (prop: closeOnEsc, defaults to true) and switched to using @keyup.esc handler.

Added option to hide header close button (prop: hideHeaderClose, defaults to false)

Added in the enforceFocus handler to make sure focus never leaves dialog while it is open.  This provides better ARIA compliance as some screen readers (and browsers) will let you tab through document even though a dialog is open.

Also added aria-labeledby and aria-describedby attributes, as well as switched the modal header and footer to semantic elements for better ARIA accessibility.
---
 lib/components/modal.vue | 67 ++++++++++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/lib/components/modal.vue b/lib/components/modal.vue
index 3e40cfbde62..1ddb6537055 100755
--- a/lib/components/modal.vue
+++ b/lib/components/modal.vue
@@ -11,33 +11,47 @@
             <div key="modal" :id="id"
                  v-show="visible"
                  :class="['modal',{fade :fade}]"
+                 role="dialog"
                  @click="onClickOut($event)"
+                 @keyup.esc="onEsc($event)"
             >
 
                 <div :class="['modal-dialog','modal-'+size]">
-                    <div class="modal-content" @click.stop>
-
-                        <div class="modal-header" v-if="!hideHeader">
+                    <div class="modal-content" 
+                            tabindex="-1"
+                            role="document"
+                            ref="content"
+                            :aria-labeledby="hideHeader ? '' : (id + '_modal_title')"
+                            :aria-describedby="id + '_modal_body'"
+                            @click.stop
+                    >
+
+                        <header class="modal-header" v-if="!hideHeader">
                             <slot name="modal-header">
-                                <h5 class="modal-title">
+                                <h5 class="modal-title" :id="id + '_modal_title'">
                                     <slot name="modal-title">{{title}}</slot>
                                 </h5>
-                                <button type="button" class="close" aria-label="Close" @click="hide">
+                                <button type="button"
+                                        v-if="!hideHeaderClose"
+                                        class="close"
+                                        :aria-label="closeTitle"
+                                        @click="hide"
+                                >
                                     <span aria-hidden="true">&times;</span>
                                 </button>
                             </slot>
-                        </div>
+                        </header>
 
-                        <div class="modal-body">
+                        <div class="modal-body" :id="id + '_modal_body'">
                             <slot></slot>
                         </div>
 
-                        <div class="modal-footer" v-if="!hideFooter">
+                        <footer class="modal-footer" v-if="!hideFooter">
                             <slot name="modal-footer">
                                 <b-btn variant="secondary" @click="hide(false)">{{closeTitle}}</b-btn>
                                 <b-btn variant="primary" @click="hide(true)">{{okTitle}}</b-btn>
                             </slot>
-                        </div>
+                        </footer>
 
                     </div>
                 </div>
@@ -108,6 +122,10 @@
                 type: Boolean,
                 default: true
             },
+            closeOnEsc: {
+                type: Boolean,
+                default: true
+            },
             hideHeader: {
                 type: Boolean,
                 default: false
@@ -115,6 +133,10 @@
             hideFooter: {
                 type: Boolean,
                 default: false
+            },
+            hideHeaderClose: {
+                type: Boolean,
+                default: false
             }
         },
         methods: {
@@ -163,15 +185,9 @@
                     this.hide();
                 }
             },
-            pressedButton(e) {
-                // If not visible don't do anything
-                if (!this.visible) {
-                    return;
-                }
-
-                // Support for esc key press
-                const key = e.which || e.keyCode;
-                if (key === 27) { // 27 is esc
+            onEsc() {
+                // If ESC presses, hide modal
+                if (this.visible && this.closeOnEsc) {
                     this.hide();
                 }
             },
@@ -179,6 +195,17 @@
                 // Add show class to keep el showed just after transition is ended,
                 // Because transition removes all used classes
                 el.classList.add('show');
+            },
+            enforceFocus(e) {
+                // If focus leaves modal, bring it back
+                // eventListener bound on document
+                if (this.visible && 
+                        document !== e.target &&
+                        this.$refs.content &&
+                        this.$refs.content !== e.target &&
+                        !this.$refs.content.contains(e.target) {
+                    this.$refs.content.focus();
+                }
             }
         },
         created() {
@@ -196,12 +223,12 @@
         },
         mounted() {
             if (typeof document !== 'undefined') {
-                document.addEventListener('keydown', this.pressedButton);
+                document.addEventListener('focus', this.enforceFocus);
             }
         },
         destroyed() {
             if (typeof document !== 'undefined') {
-                document.removeEventListener('keydown', this.pressedButton);
+                document.removeEventListener('focus', this.enforceFocus);
             }
         }
     };

From fbdc52f1de2c464648e20aa5c8b291d3a4a0e70e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 18 Apr 2017 21:48:31 -0300
Subject: [PATCH 2/5] Fixed typo

Missing closing bracket on line 206
---
 lib/components/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/modal.vue b/lib/components/modal.vue
index 1ddb6537055..a9f42ba2011 100755
--- a/lib/components/modal.vue
+++ b/lib/components/modal.vue
@@ -203,7 +203,7 @@
                         document !== e.target &&
                         this.$refs.content &&
                         this.$refs.content !== e.target &&
-                        !this.$refs.content.contains(e.target) {
+                        !this.$refs.content.contains(e.target)) {
                     this.$refs.content.focus();
                 }
             }

From 7d055cd0fa7e656b7a47ece2642371c6a411362d Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 18 Apr 2017 21:55:22 -0300
Subject: [PATCH 3/5] Removed two trailing spaces

---
 lib/components/modal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/modal.vue b/lib/components/modal.vue
index a9f42ba2011..61a513717a5 100755
--- a/lib/components/modal.vue
+++ b/lib/components/modal.vue
@@ -17,7 +17,7 @@
             >
 
                 <div :class="['modal-dialog','modal-'+size]">
-                    <div class="modal-content" 
+                    <div class="modal-content"
                             tabindex="-1"
                             role="document"
                             ref="content"
@@ -199,7 +199,7 @@
             enforceFocus(e) {
                 // If focus leaves modal, bring it back
                 // eventListener bound on document
-                if (this.visible && 
+                if (this.visible &&
                         document !== e.target &&
                         this.$refs.content &&
                         this.$refs.content !== e.target &&

From bff1447a0890e8b8be52d48e32d1180c0dc20c82 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 19 Apr 2017 11:06:07 -0300
Subject: [PATCH 4/5] Edits to align with PR #246

---
 lib/components/modal.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/lib/components/modal.vue b/lib/components/modal.vue
index 61a513717a5..92bad4cfbfb 100755
--- a/lib/components/modal.vue
+++ b/lib/components/modal.vue
@@ -1,16 +1,15 @@
 <template>
     <div>
         <transition-group enter-class="hidden"
-                          enter-to-class="show"
+                          enter-to-class=""
                           enter-active-class=""
                           leave-class="show"
                           leave-active-class=""
                           leave-to-class="hidden"
-                          v-on:after-enter="afterEnter"
         >
             <div key="modal" :id="id"
                  v-show="visible"
-                 :class="['modal',{fade :fade}]"
+                 :class="['modal',{fade: fade, show: visible}}]"
                  role="dialog"
                  @click="onClickOut($event)"
                  @keyup.esc="onEsc($event)"
@@ -58,7 +57,7 @@
             </div>
 
             <div key="modal-backdrop"
-                 :class="['modal-backdrop',{fade: fade}]"
+                 :class="['modal-backdrop',{fade: fade, show: visible}]"
                  v-if="visible"
             ></div>
         </transition-group>
@@ -191,11 +190,6 @@
                     this.hide();
                 }
             },
-            afterEnter(el) {
-                // Add show class to keep el showed just after transition is ended,
-                // Because transition removes all used classes
-                el.classList.add('show');
-            },
             enforceFocus(e) {
                 // If focus leaves modal, bring it back
                 // eventListener bound on document

From c7fc560c910d7e13bddea64828c380c58ffadbcd Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 19 Apr 2017 11:10:18 -0300
Subject: [PATCH 5/5] Removed extra closing brace

---
 lib/components/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/modal.vue b/lib/components/modal.vue
index 92bad4cfbfb..02051e020b7 100755
--- a/lib/components/modal.vue
+++ b/lib/components/modal.vue
@@ -9,7 +9,7 @@
         >
             <div key="modal" :id="id"
                  v-show="visible"
-                 :class="['modal',{fade: fade, show: visible}}]"
+                 :class="['modal',{fade: fade, show: visible}]"
                  role="dialog"
                  @click="onClickOut($event)"
                  @keyup.esc="onEsc($event)"