Merge pull request #2518 from nasa/modal-improvement

WIP: Modal improvement

src/api/overlays/components/OverlayComponent.vue

@@ -8,12 +8,15 @@
                 v-if="dismissable"
                 @click="destroy">
             </button>
-            <div class="c-overlay__contents" ref="element"></div>
+            <div class="c-overlay__contents" ref="element" tabindex="0"></div>
             <div class="c-overlay__button-bar" v-if="buttons">
                 <button class="c-button"
+                        tabindex="0"
+                        ref="buttons"
                         v-for="(button, index) in buttons"
                         :key="index"
-                        :class="{'c-button--major': button.emphasis}"
+                        @focus="focusIndex=index"
+                        :class="{'c-button--major': focusIndex===index}"
                         @click="buttonClickHandler(button.callback)">
                     {{button.label}}
                 </button>
@@ -69,6 +72,7 @@
             flex: 1 1 auto;
             display: flex;
             flex-direction: column;
+            outline: none;
             overflow: hidden;
         }
 
@@ -171,9 +175,17 @@
 
 <script>
     export default {
+        data: function () {
+            return {
+                focusIndex: -1
+            };
+        },
         inject: ['dismiss', 'element', 'buttons', 'dismissable'],
         mounted() {
             this.$refs.element.appendChild(this.element);
+            setTimeout(() => {
+                this.getElementForFocus().focus();
+            }, 0);
         },
         methods: {
             destroy: function () {
@@ -184,6 +196,25 @@
             buttonClickHandler: function (method) {
                 method();
                 this.$emit('destroy');
+            },
+            getElementForFocus: function () {
+                const defaultElement = this.$refs.element;;
+                if (!this.$refs.buttons) {
+                    return defaultElement;
+                }
+
+                const focusButton = this.$refs.buttons.filter((button, index) => {
+                    if (this.buttons[index].emphasis) {
+                        this.focusIndex = index;
+                    }
+                    return this.buttons[index].emphasis;
+                });
+
+                if (!focusButton.length) {
+                    return defaultElement;
+                }
+
+                return focusButton[0];
             }
         }
     }