a11y: fix duplicate: div IDs

Author: microbit-mark

editor.html

@@ -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>

static/css/style.css

@@ -121,7 +121,8 @@ h2 {
   border-radius: 0.5rem;
 }
 
-#small-icons > *:not(:first-child) {
+#small-icons-left > *:not(:first-child),
+#small-icons-right > *:not(:first-child) {
   display: inline-block;
   cursor: pointer;
 }
@@ -131,7 +132,8 @@ h2 {
   cursor: pointer !important;
 }
 
-#small-icons {
+#small-icons-left,
+#small-icons-right {
     width: 54px;
     min-width: 54px;
     display: -webkit-flex;
@@ -142,7 +144,8 @@ h2 {
     flex-direction: column;
 }
 
-#small-icons .status-icon {
+#small-icons-left .status-icon,
+#small-icons-right .status-icon{
   width: 37px;
   height: 37px;
   border: 6px solid #FFCC33;
@@ -157,15 +160,20 @@ h2 {
   background: #FFFFFF;
 }
 
-html[data-useragent*='MSIE 10.0'] #small-icons .status-icon  {
+html[data-useragent*='MSIE 10.0'] #small-icons-left .status-icon {
+  line-height: 2.15rem;
+}
+html[data-useragent*='MSIE 10.0'] #small-icons-right .status-icon {
   line-height: 2.15rem;
 }
 
-#small-icons .win-status-icon{
+#small-icons-left .win-status-icon,
+#small-icons-right .win-status-icon {
   line-height: 2.2rem;
 }
 
-#small-icons .holder {
+#small-icons-left .holder,
+#small-icons-right .holder {
   width: 56px;
   min-width: 56px;
   color: #336699;
@@ -409,7 +417,8 @@ a.command:hover {
         padding: .4em;
     }
 
-    #small-icons {
+    #small-icons-left,
+    #small-icons-right {
         min-width: 120px;
         display: -ms-flexbox;
         display: flex;
@@ -418,7 +427,8 @@ a.command:hover {
         flex-direction: row;
     }
 
-    #small-icons .holder {
+    #small-icons-left .holder,
+    #small-icons-right .holder {
         padding: 0.2em;
     }