a11y move inline focus to css

Author: microbit-mark

editor.html

@@ -82,7 +82,7 @@
             UPY_VERSION = "1.0.1";
         </script>
         <script id="files-template" type="x-tmpl-mustache">
-          <div tabindex="-1" onfocus="this.blur();" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true">
+          <div tabindex="-1" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true" class="modal-div">
             <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</strong></h2>
             <div class="load-drag-target" id="load-drag-target">
                 <input type="file" style="display: none" name="load-form-file-upload" id="file-upload-input">
@@ -137,7 +137,7 @@ <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}
           </div>
         </script>
         <script id="snippet-template" type="x-tmpl-mustache">
-          <div tabindex="-1" onfocus="this.blur();" role="dialog" aria-labelledby="snippets-modal" aria-modal="true">
+          <div tabindex="-1" role="dialog" aria-labelledby="snippets-modal" aria-modal="true" class="modal-div">
             <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
             <p>{{ description }}</p>
             <p>{{ instructions }}</p>

static/css/style.css

@@ -704,6 +704,9 @@ input:checked + .menu-switch-slider:before {
 }
 
 /* Modals */
+.modal-div:focus {
+  outline: 0;
+}
 .modal-title {
     margin: 28px 0px 22px 0px;
     text-transform: capitalize;