Added closeOnEsc, hideHeaderClose & enforceFocus

tmorehouse · web-flow · commit 9b4969aad69b · 2017-04-18T21:35:29.000-03:00
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.
diff --git 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,13 +122,21 @@
                 type: Boolean,
                 default: true
             },
+            closeOnEsc: {
+                type: Boolean,
+                default: true
+            },
             hideHeader: {
                 type: Boolean,
                 default: false
             },
             hideFooter: {
                 type: Boolean,
                 default: false
+            },
+            hideHeaderClose: {
+                type: Boolean,
+                default: false
             }
         },
         methods: {
@@ -163,22 +185,27 @@
                     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();
                 }
             },
             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
+                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);
             }
         }
     };
