A11y: Convert some links into accessible buttons (#313)

Author: microbit-mark

editor.html

@@ -86,7 +86,7 @@
             <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">
-                <p>{{ instructions }}<br><a href="#" id="file-upload-link" class="load-drag-target load-toggle action">{{ toggle-file }}</a></p>
+                <p>{{ instructions }}<br><button aria-labelledby="file-upload-link" type="button" id="file-upload-link" class="load-drag-target load-toggle button-link action">{{ toggle-file }}</button></p>
             </div>
             <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</strong></h2>
             <div class="save-buttons-container">

python-main.js

@@ -1705,10 +1705,11 @@ function web_editor(config) {
         if (links) {
             Object.keys(links).forEach(function(key) {
                 if (links[key] === "close") {
-                    modalLinks.push('<a href="#" id="modal-msg-close-link">' + key + '</a>');
+                    modalLinks.push('<button type="button" area-labelledby="modal-msg-close-link" id="modal-msg-close-link">' + key + '</button>');
+
                     addCloseClickListener = true;
                 } else {
-                    modalLinks.push('<a href="' + links[key] + '" target="_blank">' + key + '</a>');
+                    modalLinks.push('<button type="button" aria-label="' + key + '" class="button-link" onclick="window.open(\' ' + links[key] + '\', \'_blank\')">' + key + '</button>');
                 }
             });
         }

static/css/style.css

@@ -959,6 +959,20 @@ input:checked + .menu-switch-slider:before {
     float: right;
 }
 
+.button-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 1rem;
+  color: #326699;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#file-upload-link {
+  font-weight: bold ;
+}
+
 .disabled {
     pointer-events: none;
     cursor: not-allowed;