A11y: Axe CI testing fixes (#303)

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" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true" class="modal-div">
+          <div tabindex="-1" role="dialog" aria-label="load/save 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">
@@ -98,7 +98,7 @@ <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</s
                 <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
               </div>
               <div id="addFileHelp">
-                <button aria-labelledby="add-files" aria-expanded="false" type="button" class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle"></i> {{ help-button }}</button>
+                <button aria-label="add files" aria-expanded="false" type="button" class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle"></i> {{ help-button }}</button>
               </div>
             </div>
             <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank" class="action" id="files-help-link">{{ help-link }}</a>.
@@ -140,7 +140,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" role="dialog" aria-labelledby="snippets-modal" aria-modal="true" class="modal-div">
+          <div tabindex="-1" role="dialog" aria-label="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>
@@ -348,15 +348,15 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
                         <div class="buttons_menu_item"><span id="mp-ver">MicroPython Version:</span> <script>document.write(UPY_VERSION);</script></div>
                     </div>
                 </div>
-                <div id="small-icons" class="vbox">
+                <div id="small-icons-left" class="vbox small-icons">
                     <a aria-label="Zoom in" class="roundbutton holder zoomer action" tabindex="90" id="command-zoom-in" href="#" title="Zoom in">
                         <div class="status-icon"><i class="fa fa-search-plus"></i></div>
                     </a>
                     <a aria-label="Zoom out" class="roundbutton holder zoomer action" tabindex="100" id="command-zoom-out" href="#" title="Zoom out">
                         <div class="status-icon"><i class="fa fa-search-minus"></i></div>
                     </a>
                 </div>
-                <div id="small-icons" class="vbox">
+                <div id="small-icons-right" class="vbox small-icons">
                     <a aria-label="Show snippets (code shortcuts)" class="roundbutton holder zoomer action" tabindex="110" id="command-snippet" href="#" title="Show snippets (code shortcuts)">
                         <div class="status-icon"><i class="fa fa-cogs"></i></div>
                     </a>

python-main.js

@@ -1757,7 +1757,8 @@ function web_editor(config) {
     function setupButtons() {
         if(navigator.platform.match('Win') !== null){
             $(".roundsymbol").addClass("winroundsymbol");
-            $("#small-icons .status-icon").addClass("win-status-icon");
+            $("#small-icons-left .status-icon").addClass("win-status-icon");
+            $("#small-icons-right .status-icon").addClass("win-status-icon");
         }
         $("#command-download").click(function () {
             doDownload();

static/css/style.css

@@ -121,7 +121,7 @@ h2 {
   border-radius: 0.5rem;
 }
 
-#small-icons > *:not(:first-child) {
+.small-icons > *:not(:first-child) {
   display: inline-block;
   cursor: pointer;
 }
@@ -131,7 +131,7 @@ h2 {
   cursor: pointer !important;
 }
 
-#small-icons {
+.small-icons {
     width: 54px;
     min-width: 54px;
     display: -webkit-flex;
@@ -142,7 +142,7 @@ h2 {
     flex-direction: column;
 }
 
-#small-icons .status-icon {
+.small-icons .status-icon{
   width: 37px;
   height: 37px;
   border: 6px solid #FFCC33;
@@ -151,27 +151,28 @@ h2 {
   text-align: center;
   font-size: 1.4rem;
   line-height: 2.4rem;
-  padding: 0;
+  padding: 0 !important;
   font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif;
   color: #336699;
   background: #FFFFFF;
 }
 
-html[data-useragent*='MSIE 10.0'] #small-icons .status-icon  {
+html[data-useragent*='MSIE 10.0'] .small-icons .status-icon {
   line-height: 2.15rem;
 }
 
-#small-icons .win-status-icon{
+
+.small-icons .win-status-icon {
   line-height: 2.2rem;
 }
 
-#small-icons .holder {
+.small-icons .holder {
   width: 56px;
   min-width: 56px;
   color: #336699;
   text-decoration: none;
   text-align: center;
-  padding: 0px;
+  padding: 0px !important;
 }
 
 /* Popups */
@@ -409,7 +410,7 @@ a.command:hover {
         padding: .4em;
     }
 
-    #small-icons {
+    .small-icons {
         min-width: 120px;
         display: -ms-flexbox;
         display: flex;
@@ -418,8 +419,8 @@ a.command:hover {
         flex-direction: row;
     }
 
-    #small-icons .holder {
-        padding: 0.2em;
+    .small-icons .holder {
+        padding: 0.2em !important;
     }
 
   .roundsymbol {
@@ -575,7 +576,7 @@ div.expandable-content {
 
 div.load-drag-target {
     height: 160px;
-    background: #ddd;
+    background: #e0e0e0;
     border: 1px solid #aaa;
     border-radius: 9px;
     position: relative;
@@ -832,7 +833,7 @@ input:checked + .menu-switch-slider:before {
     width: 100%;
     width: -moz-available;
     width: -webkit-fill-available;
-    background: #ddd;
+    background: #e0e0e0;
     border: 1px solid #aaa;
     margin: 5px 2px 5px 1px;
     border-radius: 5px;