Focus first button when modal is opened

[jameshibbard]

Hi,

Currently, when the modal is opened it does not receive focus. This make is somewhat inaccessible for keyboard users.

It would be possible to make the first button receive focus like so:

In src/lib/Notification.vue:

<button
+  ref="notivuecationButton"
   v-for="button in buttons"
   :class="button.css"
   @click="resolve(button.value)"
>{{button.label}}</button>

In src/lib/componentMixin.js

onShowNotification(notification) {
  this.notifications.push(notification);
+ this.$nextTick(() => this.$refs.notivuecationButton[0].focus());
},

But this creates a new problem, that when the modal is shut, focus is returned to the top of the page and not wherever the user was previously.

This could be solved like so:

In src/lib/componentMixin.js

data() {
  return {
+   activeElement: null,
    notifications: [],
  };
},
methods: {
  onShowNotification(notification) {
    this.notifications.push(notification);
+   this.activeElement = document.activeElement;
+   this.$nextTick(() => this.$refs.notivuecationButton[0].focus());
  },
  onHideNotification(notification) {
    const index = this.notifications.indexOf(notification);
    if (index > -1) {
      this.notifications.splice(index, 1);
    }
+   if (this.activeElement) this.activeElement.focus();
  },

But now the plugin is reaching into the DOM, which feels a bit messy.

My question(s): would you be interested in adding this functionality to your plugin?
If so, and presuming the above is an acceptable way of approaching things, I'd be happy to send a PR.
Otherwise, do you have any thoughts on a better way to handle this?