Automatically focus modal when mounted

changelog/unreleased/modal-focus

@@ -0,0 +1,6 @@
+Enhancement: Automatically focus modal
+
+When the modal is mounted, it receives automatically a focus.
+The focus is sent directly to the modal itself so skipping the wrapping div which works only as a background.
+
+https://github.com/owncloud/owncloud-design-system/pull/781

src/elements/OcModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="oc-modal-background">
-    <div :class="$_ocModal_classes">
+    <div :class="$_ocModal_classes" tabindex="0" ref="$_ocModal">
       <div class="oc-modal-title">
         <oc-icon
           v-if="icon"
@@ -217,6 +217,12 @@ export default {
     }
   },
 
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.$_ocModal.focus()
+    })
+  },
+
   methods: {
     $_ocModal_buttonCancel_click() {
       /**

src/elements/__snapshots__/OcModal.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`OcModal displays input 1`] = `
 <div class="oc-modal-background">
-  <div class="oc-modal oc-modal-info">
+  <div tabindex="0" class="oc-modal oc-modal-info">
     <div class="oc-modal-title">
       <!----> <span>Create new folder</span></div>
     <div class="oc-modal-body">
@@ -18,7 +18,7 @@ exports[`OcModal displays input 1`] = `
 
 exports[`OcModal hides icon if not specified 1`] = `
 <div class="oc-modal-background">
-  <div class="oc-modal oc-modal-info">
+  <div tabindex="0" class="oc-modal oc-modal-info">
     <div class="oc-modal-title">
       <!----> <span>Example title</span></div>
     <div class="oc-modal-body">
@@ -34,7 +34,7 @@ exports[`OcModal hides icon if not specified 1`] = `
 
 exports[`OcModal matches snapshot 1`] = `
 <div class="oc-modal-background">
-  <div class="oc-modal oc-modal-info">
+  <div tabindex="0" class="oc-modal oc-modal-info">
     <div class="oc-modal-title">
       <oc-icon-stub name="info" arialabel="icon" type="span" size="small" variation="system"></oc-icon-stub> <span>Example title</span>
     </div>
@@ -51,7 +51,7 @@ exports[`OcModal matches snapshot 1`] = `
 
 exports[`OcModal overrides props message with slot 1`] = `
 <div class="oc-modal-background">
-  <div class="oc-modal oc-modal-info">
+  <div tabindex="0" class="oc-modal oc-modal-info">
     <div class="oc-modal-title">
       <!----> <span>Example title</span></div>
     <div class="oc-modal-body">

src/styles/theme/oc-modal.scss

@@ -5,6 +5,10 @@
   border-radius: 8px;
   overflow: hidden;
 
+  &:focus {
+    outline: none;
+  }
+
   &-background {
     position: fixed;
     top: 0;