From bef71b5dc4b936ac012c8b38859383e664098ce3 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Thu, 24 Oct 2019 19:15:10 +0100
Subject: [PATCH 01/24] add modal focus

---
 editor.html    | 20 ++++++++++++--------
 python-main.js | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/editor.html b/editor.html
index ad6ac71a..56f4448a 100644
--- a/editor.html
+++ b/editor.html
@@ -83,6 +83,7 @@
         </script>
         <html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"></html>
         <script id="files-template" type="x-tmpl-mustache">
+          <div tabindex="-1" role="dialog" aria-labelledby="loadSave-modal" aria-modal=true">
             <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">
@@ -90,19 +91,19 @@ <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</s
             </div>
             <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</strong></h2>
             <div class="save-buttons-container">
-                <button type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
-                <button type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
+                <button aria-labelledby="save-py" role="button" type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
+                <button aria-labelledby="save-hex" role="button" type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
             </div>
             <div id="addFile">
               <div id="addFileHeader">
                 <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
               </div>
-              <div id="addFileHelp"><a id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+              <div id="addFileHelp" role="button"><a id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
             </div>
             <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank">{{ help-link }}</a>.</div>
             <div class="expandable">
                 <div class="expandable-always-visible">
-                    <button type="button" class="action save-button show" id="show-files" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
+                    <button aria-labelledby="show-files" role="button" type="button" class="action save-button show" id="show-files" tabindex="36" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
                 </div>
                 <div class="expandable-content">
                     <div class="fs-file-list" id="fs-file-list">
@@ -129,13 +130,15 @@ <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}
                         </tbody>
                     </table>
                     <div>
-                        <button type="button" class="action save-button add" id="fs-file-upload-button" tile="{{ fs-add-file }}"><i class="fa fa-plus-circle"></i> {{ fs-add-file }}</button>
+                        <button role=button type="button" class="action save-button add" id="fs-file-upload-button" tile="{{ fs-add-file }}"><i class="fa fa-plus-circle"></i> {{ fs-add-file }}</button>
                         <input type="file" style="display: none" name="fs-file-upload-input" id="fs-file-upload-input" multiple>
                     </div>
                 </div>
             </div>
+          </div>
         </script>
         <script id="snippet-template" type="x-tmpl-mustache">
+          <div tabindex="-1" role="dialog" aria-labelledby="snippets-modal" aria-modal="true">
             <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
             <p>{{ description }}</p>
             <p>{{ instructions }}</p>
@@ -147,11 +150,12 @@ <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
                 </tr>
                 {{#snippets}}
                 <tr id="snippet-{{trigger}}" class="action snippet-selection">
-                    <td>{{trigger}}<span class="snippet-name">{{name}}</span></td>
+                    <td role="button">{{trigger}}<span class="snippet-name">{{name}}</span></td>
                     <td>{{#describe}}{{name}}{{/describe}}</td>
                 </tr>
                 {{/snippets}}
             </table>
+          </div>
         </script>
         <script id="share-template" type="x-tmpl-mustache">
             <h2><i class="fa fa-share-alt"></i> <strong>{{ title }}</strong></h2>
@@ -388,7 +392,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
             <div id="editor" class="flex3" tabindex="-1"></div>
           </div>
         <div id="flashing-overlay-container" class="modal-overlay-container">
-          <div id="flashing-overlay" class="modal-overlay">
+          <div id="flashing-overlay" class="modal-overlay" tabindex="-1" role="dialog" aria-labelledby="flashing-overlay" aria-modal="true">
             <div id="flashing-info">
               <h2 id="flashing-text">Flashing micro:bit</h2>
               <div id="webusb-flashing-loader"></div>
@@ -400,7 +404,7 @@ <h2 id="flashing-text">Flashing micro:bit</h2>
           </div>
         </div>
         <div id="modal-msg-overlay-container" class="modal-overlay-container modal-msg-overlay-container">
-          <div id="modal-msg-overlay" class="modal-overlay">
+          <div id="modal-msg-overlay" class="modal-overlay" tabindex="-1" role="dialog" aria-labelledby="flashing-overlay" aria-modal="true">
             <a class="vex-close modal-close" onclick="$('#modal-msg-overlay-container').hide()"></a>
             <div id="modal-msg-text">
               <h2 id="modal-msg-title"></h2>
diff --git a/python-main.js b/python-main.js
index 864c2568..4568ace5 100644
--- a/python-main.js
+++ b/python-main.js
@@ -934,7 +934,16 @@ function web_editor(config) {
             modalMsg(config['translate']['load']['invalid-file-title'], config['translate']['load']['extension-warning'],"");
         }
     }
-
+    // Pass focus to first actionable element in modal
+    function focusModal() {
+        var dialog = document.querySelector('.vex-content', '.modal-overlay');
+        var focusableEls = dialog.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
+        $(focusableEls).each(function(){
+            $(this).attr('tabindex', '0'); 
+        });
+        focusableEls[0].focus();
+    }
+    
     // Describes what to do when the save/load button is clicked.
     function doFiles() {
         var template = $('#files-template').html();
@@ -944,6 +953,7 @@ function web_editor(config) {
         vex.open({
             content: Mustache.render(template, loadStrings),
             afterOpen: function(vexContent) {
+                focusModal();
                 $("#show-files").attr("title", loadStrings["show-files"] +" (" + micropythonFs.ls().length + ")");
                 document.getElementById("show-files").innerHTML = loadStrings["show-files"] + " (" + micropythonFs.ls().length + ") <i class='fa fa-caret-down'>";
                 $('#save-hex').click(function() {
@@ -1125,6 +1135,7 @@ function web_editor(config) {
         vex.open({
             content: Mustache.render(template, context),
             afterOpen: function(vexContent) {
+                focusModal();
                 $(vexContent).find('.snippet-selection').click(function(e){
                     var snippet_name = $(this).find('.snippet-name').text();
                     EDITOR.triggerSnippet(snippet_name);
@@ -1646,7 +1657,7 @@ function web_editor(config) {
         var overlayContainer = "#modal-msg-overlay-container";
         $(overlayContainer).css("display","block");
         $("#modal-msg-title").text(title);
-        $("#modal-msg-content").html(content); 
+        $("#modal-msg-content").html(content);
         var modalLinks = [];
         if (links) {
             Object.keys(links).forEach(function(key) {

From 73015e060b7e7627328350e59115614bdab8e611 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Mon, 28 Oct 2019 11:27:25 +0000
Subject: [PATCH 02/24] add css for to focus buttons

---
 static/css/style.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 2d76ef29..048300f8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -844,6 +844,10 @@ input:checked + .menu-switch-slider:before {
     color: #ffffff !important;
 }
 
+.save-button:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 .save-buttons-container {
     display: inline-block;
     width: 100%;
@@ -871,6 +875,11 @@ input:checked + .menu-switch-slider:before {
     color: black !important;
     border: none;
 }
+
+.save-button.hex:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 .save-button.py {
     width: 49%;
     min-width: 250px;
@@ -885,6 +894,11 @@ input:checked + .menu-switch-slider:before {
     background-color: #eee;
     color: black;
 }
+
+.save-button.py:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 @media (max-width: 480px) {
     .save-button.py,
     .save-button.hex {

From a1885aed6824b2e96ae689d8d183dcf2dfe4871f Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Tue, 29 Oct 2019 08:46:16 +0000
Subject: [PATCH 03/24] Update python-main.js

---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 4568ace5..a20b8246 100644
--- a/python-main.js
+++ b/python-main.js
@@ -937,7 +937,7 @@ function web_editor(config) {
     // Pass focus to first actionable element in modal
     function focusModal() {
         var dialog = document.querySelector('.vex-content', '.modal-overlay');
-        var focusableEls = dialog.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
+        var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
         $(focusableEls).each(function(){
             $(this).attr('tabindex', '0'); 
         });

From a6bea620f8507d7a5bc62c1336f3e7bffa7138e4 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 10:01:58 +0000
Subject: [PATCH 04/24] trap focus in modal

---
 python-main.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index a20b8246..37475425 100644
--- a/python-main.js
+++ b/python-main.js
@@ -934,14 +934,36 @@ function web_editor(config) {
             modalMsg(config['translate']['load']['invalid-file-title'], config['translate']['load']['extension-warning'],"");
         }
     }
-    // Pass focus to first actionable element in modal
+    // Trap focus in modal and pass focus to first actionable element
     function focusModal() {
+        document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true)
         var dialog = document.querySelector('.vex-content', '.modal-overlay');
         var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
         $(focusableEls).each(function(){
             $(this).attr('tabindex', '0'); 
         });
         focusableEls[0].focus();
+        dialog.onkeydown = function(event) {
+        if (event.which == 9) {
+            var focusedEl = document.activeElement;
+            var numberOfFocusableEls = focusableEls.length;
+            var focusedElIndex = Array.prototype.indexOf.call(focusableEls, focusedEl);
+
+            if (event.shiftKey) {
+                // if focused on first item and user tabs back, go to the last focusable item
+                if (focusedElIndex == 0) {
+                    focuseableEls.item(numberOfFocusableEls - 1).focus();
+                    event.preventDefault();
+                }
+            } else {
+                // if focused on the last item and user tabs forward, go to the first focusable item
+                if (focusedElIndex == numberOfFocusableEls - 1) {
+                    focusableEls[0].focus();
+                    event.preventDefault();
+                }
+            }
+        }
+    }
     }
     
     // Describes what to do when the save/load button is clicked.

From 98c190f16e15aa8c238137622c73a30b8b8f0ce3 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 13:24:05 +0000
Subject: [PATCH 05/24] trigger snippets on keypress

---
 editor.html    |  4 ++--
 python-main.js | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/editor.html b/editor.html
index 56f4448a..6b820940 100644
--- a/editor.html
+++ b/editor.html
@@ -83,7 +83,7 @@
         </script>
         <html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"></html>
         <script id="files-template" type="x-tmpl-mustache">
-          <div tabindex="-1" role="dialog" aria-labelledby="loadSave-modal" aria-modal=true">
+          <div tabindex="-1" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true">
             <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
               <div id="addFileHeader">
                 <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
               </div>
-              <div id="addFileHelp" role="button"><a id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+              <div id="addFileHelp" role="button" aria-expanded="false"><a id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
             </div>
             <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank">{{ help-link }}</a>.</div>
             <div class="expandable">
diff --git a/python-main.js b/python-main.js
index 37475425..a50c7338 100644
--- a/python-main.js
+++ b/python-main.js
@@ -989,12 +989,14 @@ function web_editor(config) {
                     }
                     downloadFileFromFilesystem('main.py');
                 });
-                $("#expandHelpPara").click(function(){
+                $("#expandHelpPara").on('keydown click', function(){
                     if ($("#fileHelpPara").css("display")=="none"){
                         $("#fileHelpPara").show();
+                        $(this).attr("aria-expanded","true");
                         $("#addFile").css("margin-bottom","10px");
                     }else{
                         $("#fileHelpPara").hide();
+                        $(this).attr("aria-expanded","false");
                         $("#addFile").css("margin-bottom","22px");
                     }
                 });
@@ -1158,12 +1160,15 @@ function web_editor(config) {
             content: Mustache.render(template, context),
             afterOpen: function(vexContent) {
                 focusModal();
-                $(vexContent).find('.snippet-selection').click(function(e){
-                    var snippet_name = $(this).find('.snippet-name').text();
-                    EDITOR.triggerSnippet(snippet_name);
-                    vex.close();
-                    EDITOR.focus();
-                });
+                $(vexContent).find('.snippet-selection').on('click keydown', (function(e){
+                    if(e.type == 'click' || e.type=='keydown' && e.which == 32 || e.which == 13) {
+                        e.preventDefault();
+                        var snippet_name = $(this).find('.snippet-name').text();
+                        EDITOR.triggerSnippet(snippet_name);
+                        vex.close();
+                        EDITOR.focus();
+                    }
+                }));
             }
         });
     }
@@ -1425,6 +1430,7 @@ function web_editor(config) {
         } else {
             $(".flashing-overlay-buttons").hide(); // Hide previous buttons
             $("#flashing-overlay-error").append("<hr />" + errorHTML);
+            focusModal();
         }
 
         // Attach download handler

From 9145e5f2307684b95ccb445e1e1bf50fda76415f Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:00:06 +0000
Subject: [PATCH 06/24] Update python-main.js

---
 python-main.js | 68 ++++++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/python-main.js b/python-main.js
index a50c7338..000698d7 100644
--- a/python-main.js
+++ b/python-main.js
@@ -908,6 +908,39 @@ function web_editor(config) {
         return fullHex;
     }
 
+    // Trap focus in modal and pass focus to first actionable element
+    function focusModal() {
+        document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true)
+        var dialog = document.querySelector('.vex-content', '.modal-overlay');
+        var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
+        $(focusableEls).each(function(){
+            $(this).attr('tabindex', '0'); 
+        });
+        focusableEls[0].focus();
+        dialog.onkeydown = function(event) {
+            if (event.which == 9) {
+                // if tab key is pressed
+                var focusedEl = document.activeElement;
+                var numberOfFocusableEls = focusableEls.length;
+                var focusedElIndex = Array.prototype.indexOf.call(focusableEls, focusedEl);
+
+                if (event.shiftKey) {
+                    // if focused on first item and user tabs back, go to the last focusable item
+                    if (focusedElIndex == 0) {
+                        focuseableEls.item(numberOfFocusableEls - 1).focus();
+                        event.preventDefault();
+                    }
+                } else {
+                    // if focused on the last item and user tabs forward, go to the first focusable item
+                    if (focusedElIndex == numberOfFocusableEls - 1) {
+                        focusableEls[0].focus();
+                        event.preventDefault();
+                    }
+                }
+            }
+        }
+    }
+
     // This function describes what to do when the download button is clicked.
     function doDownload() {
         try {
@@ -934,37 +967,6 @@ function web_editor(config) {
             modalMsg(config['translate']['load']['invalid-file-title'], config['translate']['load']['extension-warning'],"");
         }
     }
-    // Trap focus in modal and pass focus to first actionable element
-    function focusModal() {
-        document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true)
-        var dialog = document.querySelector('.vex-content', '.modal-overlay');
-        var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
-        $(focusableEls).each(function(){
-            $(this).attr('tabindex', '0'); 
-        });
-        focusableEls[0].focus();
-        dialog.onkeydown = function(event) {
-        if (event.which == 9) {
-            var focusedEl = document.activeElement;
-            var numberOfFocusableEls = focusableEls.length;
-            var focusedElIndex = Array.prototype.indexOf.call(focusableEls, focusedEl);
-
-            if (event.shiftKey) {
-                // if focused on first item and user tabs back, go to the last focusable item
-                if (focusedElIndex == 0) {
-                    focuseableEls.item(numberOfFocusableEls - 1).focus();
-                    event.preventDefault();
-                }
-            } else {
-                // if focused on the last item and user tabs forward, go to the first focusable item
-                if (focusedElIndex == numberOfFocusableEls - 1) {
-                    focusableEls[0].focus();
-                    event.preventDefault();
-                }
-            }
-        }
-    }
-    }
     
     // Describes what to do when the save/load button is clicked.
     function doFiles() {
@@ -1161,7 +1163,8 @@ function web_editor(config) {
             afterOpen: function(vexContent) {
                 focusModal();
                 $(vexContent).find('.snippet-selection').on('click keydown', (function(e){
-                    if(e.type == 'click' || e.type=='keydown' && e.which == 32 || e.which == 13) {
+                    if(e.type == 'click' || (e.type=='keydown' && (e.which == 32 || e.which == 13))) {
+                        // if mouse is clicked or space bar or enter key is pressed
                         e.preventDefault();
                         var snippet_name = $(this).find('.snippet-name').text();
                         EDITOR.triggerSnippet(snippet_name);
@@ -1430,7 +1433,6 @@ function web_editor(config) {
         } else {
             $(".flashing-overlay-buttons").hide(); // Hide previous buttons
             $("#flashing-overlay-error").append("<hr />" + errorHTML);
-            focusModal();
         }
 
         // Attach download handler

From d250aa3d7ae00234a3beb3d64330395da29f9164 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:01:53 +0000
Subject: [PATCH 07/24] change key order

---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 000698d7..b32178a6 100644
--- a/python-main.js
+++ b/python-main.js
@@ -1163,7 +1163,7 @@ function web_editor(config) {
             afterOpen: function(vexContent) {
                 focusModal();
                 $(vexContent).find('.snippet-selection').on('click keydown', (function(e){
-                    if(e.type == 'click' || (e.type=='keydown' && (e.which == 32 || e.which == 13))) {
+                    if(e.type == 'click' || (e.type=='keydown' && (e.which == 13 || e.which == 32))) {
                         // if mouse is clicked or space bar or enter key is pressed
                         e.preventDefault();
                         var snippet_name = $(this).find('.snippet-name').text();

From 12a226838522a5179fbdd85aae0665f960abaf8b Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:34:32 +0000
Subject: [PATCH 08/24] seperate click and key events

---
 python-main.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/python-main.js b/python-main.js
index b32178a6..6b25ac0f 100644
--- a/python-main.js
+++ b/python-main.js
@@ -1163,8 +1163,14 @@ function web_editor(config) {
             afterOpen: function(vexContent) {
                 focusModal();
                 $(vexContent).find('.snippet-selection').on('click keydown', (function(e){
-                    if(e.type == 'click' || (e.type=='keydown' && (e.which == 13 || e.which == 32))) {
-                        // if mouse is clicked or space bar or enter key is pressed
+                    if(e.type == 'click') {
+                        // if mouse is clicked
+                        var snippet_name = $(this).find('.snippet-name').text();
+                        EDITOR.triggerSnippet(snippet_name);
+                        vex.close();
+                        EDITOR.focus();
+                    } else if(e.type=='keydown' && (e.which == 13 || e.which == 32)) {
+                        // else if space bar or enter key is pressed
                         e.preventDefault();
                         var snippet_name = $(this).find('.snippet-name').text();
                         EDITOR.triggerSnippet(snippet_name);

From 347e926943ba2edd75cba649ec6ac6f413c8bfee Mon Sep 17 00:00:00 2001
From: Mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:36:29 +0000
Subject: [PATCH 09/24] Update python-main.js

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>
---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 6b25ac0f..6390062c 100644
--- a/python-main.js
+++ b/python-main.js
@@ -910,7 +910,7 @@ function web_editor(config) {
 
     // Trap focus in modal and pass focus to first actionable element
     function focusModal() {
-        document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true)
+        document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true);
         var dialog = document.querySelector('.vex-content', '.modal-overlay');
         var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
         $(focusableEls).each(function(){

From c2e8ad23dcd031ff92d2f636f0a1df245a8ac76a Mon Sep 17 00:00:00 2001
From: Mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:36:41 +0000
Subject: [PATCH 10/24] Update python-main.js

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>
---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 6390062c..6f07b859 100644
--- a/python-main.js
+++ b/python-main.js
@@ -938,7 +938,7 @@ function web_editor(config) {
                     }
                 }
             }
-        }
+        };
     }
 
     // This function describes what to do when the download button is clicked.

From 82a30bd8f4124d109252e6d7aa75a318e2c2ef13 Mon Sep 17 00:00:00 2001
From: Mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:36:47 +0000
Subject: [PATCH 11/24] Update python-main.js

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>
---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 6f07b859..c49d7317 100644
--- a/python-main.js
+++ b/python-main.js
@@ -914,7 +914,7 @@ function web_editor(config) {
         var dialog = document.querySelector('.vex-content', '.modal-overlay');
         var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
         $(focusableEls).each(function(){
-            $(this).attr('tabindex', '0'); 
+            $(this).attr('tabindex', '0');
         });
         focusableEls[0].focus();
         dialog.onkeydown = function(event) {

From 531d8971f3813f6f8413d1de1dd524405d21e339 Mon Sep 17 00:00:00 2001
From: Mark <mark@microbit.org>
Date: Wed, 30 Oct 2019 15:36:55 +0000
Subject: [PATCH 12/24] Update python-main.js

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>
---
 python-main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index c49d7317..ec447ee7 100644
--- a/python-main.js
+++ b/python-main.js
@@ -967,7 +967,6 @@ function web_editor(config) {
             modalMsg(config['translate']['load']['invalid-file-title'], config['translate']['load']['extension-warning'],"");
         }
     }
-    
     // Describes what to do when the save/load button is clicked.
     function doFiles() {
         var template = $('#files-template').html();

From 0e5f30fa580b31080a9c1374fe57f0608dc5c1f4 Mon Sep 17 00:00:00 2001
From: microbit-carlos <carlos@microbit.org>
Date: Wed, 30 Oct 2019 15:46:58 +0000
Subject: [PATCH 13/24] A11y: Table tds not selectable.

---
 editor.html    | 2 +-
 python-main.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor.html b/editor.html
index 6b820940..8a20b979 100644
--- a/editor.html
+++ b/editor.html
@@ -150,7 +150,7 @@ <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
                 </tr>
                 {{#snippets}}
                 <tr id="snippet-{{trigger}}" class="action snippet-selection">
-                    <td role="button">{{trigger}}<span class="snippet-name">{{name}}</span></td>
+                    <td><a role="button">{{trigger}}</a> <span class="snippet-name">{{name}}</span></td>
                     <td>{{#describe}}{{name}}{{/describe}}</td>
                 </tr>
                 {{/snippets}}
diff --git a/python-main.js b/python-main.js
index b32178a6..34a12377 100644
--- a/python-main.js
+++ b/python-main.js
@@ -912,8 +912,8 @@ function web_editor(config) {
     function focusModal() {
         document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true)
         var dialog = document.querySelector('.vex-content', '.modal-overlay');
-        var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]),td:not([disabled])');
-        $(focusableEls).each(function(){
+        var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]');
+        $(focusableEls).each(function() {
             $(this).attr('tabindex', '0'); 
         });
         focusableEls[0].focus();

From 01080ee7837492c51679446c867f0aa80c92bd7f Mon Sep 17 00:00:00 2001
From: microbit-carlos <carlos@microbit.org>
Date: Wed, 30 Oct 2019 16:15:35 +0000
Subject: [PATCH 14/24] A11y: Fix main.py delete button to be semantically
 disabled.

---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index e715d4c6..06f9ca06 100644
--- a/python-main.js
+++ b/python-main.js
@@ -866,7 +866,7 @@ function web_editor(config) {
             $('.fs-file-list table tbody').append(
                 '<tr><td>' + name + '</td>' +
                 '<td>' + (micropythonFs.size(filename)/1024).toFixed(2) + ' Kb</td>' +
-                '<td><button id="' + pseudoUniqueId + '_remove" class="action save-button remove ' + disabled + '" title='+ loadStrings["remove-but"] +'><i class="fa fa-trash"></i></button>' +
+                '<td><button id="' + pseudoUniqueId + '_remove" class="action save-button remove ' + disabled + '" title='+ loadStrings["remove-but"] + ' ' + disabled + '><i class="fa fa-trash"></i></button>' +
                 '<button id="' + pseudoUniqueId + '_save" class="action save-button save" title='+ loadStrings["save-but"] +'><i class="fa fa-download"></i></button></td></tr>'
             );
             $('#' + pseudoUniqueId + '_save').click(function(e) {

From 57564741b242d87f8bbbd906a39980d194455b60 Mon Sep 17 00:00:00 2001
From: microbit-carlos <carlos@microbit.org>
Date: Wed, 30 Oct 2019 18:41:49 +0000
Subject: [PATCH 15/24] A11y: Convert snippet triggers into buttons.

---
 editor.html          |  2 +-
 static/css/style.css | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/editor.html b/editor.html
index 8a20b979..c20e0d13 100644
--- a/editor.html
+++ b/editor.html
@@ -150,7 +150,7 @@ <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
                 </tr>
                 {{#snippets}}
                 <tr id="snippet-{{trigger}}" class="action snippet-selection">
-                    <td><a role="button">{{trigger}}</a> <span class="snippet-name">{{name}}</span></td>
+                    <td><button class="snippet-button">{{trigger}}</button> <span class="snippet-name">{{name}}</span></td>
                     <td>{{#describe}}{{name}}{{/describe}}</td>
                 </tr>
                 {{/snippets}}
diff --git a/static/css/style.css b/static/css/style.css
index 048300f8..aa066ad9 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -506,6 +506,21 @@ a.command:hover {
     width: 200px;
 }
 
+.snippet-button {
+    text-decoration: none;
+    background: none;
+    color: inherit;
+    border: none;
+    border-radius: 5px;
+    padding: 2px;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+.snippet-button:focus {
+  box-shadow: 0px 0px 5px 3px #FFCC33;
+}
+
 #share-link {
     display: none;
 }

From ede80a1aea00ba0f04b143e7e6312360611f39cc Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Thu, 31 Oct 2019 08:20:29 +0000
Subject: [PATCH 16/24] A11y: use inbuilt accessibility of button element

---
 editor.html    |  2 +-
 python-main.js | 16 +++-------------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/editor.html b/editor.html
index c20e0d13..f1ed4844 100644
--- a/editor.html
+++ b/editor.html
@@ -98,7 +98,7 @@ <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</s
               <div id="addFileHeader">
                 <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
               </div>
-              <div id="addFileHelp" role="button" aria-expanded="false"><a id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></a></div>
+              <div id="addFileHelp" aria-expanded="false"><button class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></button></div>
             </div>
             <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank">{{ help-link }}</a>.</div>
             <div class="expandable">
diff --git a/python-main.js b/python-main.js
index 06f9ca06..8ca942dd 100644
--- a/python-main.js
+++ b/python-main.js
@@ -990,7 +990,7 @@ function web_editor(config) {
                     }
                     downloadFileFromFilesystem('main.py');
                 });
-                $("#expandHelpPara").on('keydown click', function(){
+                $("#expandHelpPara").click(function(){
                     if ($("#fileHelpPara").css("display")=="none"){
                         $("#fileHelpPara").show();
                         $(this).attr("aria-expanded","true");
@@ -1161,22 +1161,12 @@ function web_editor(config) {
             content: Mustache.render(template, context),
             afterOpen: function(vexContent) {
                 focusModal();
-                $(vexContent).find('.snippet-selection').on('click keydown', (function(e){
-                    if(e.type == 'click') {
-                        // if mouse is clicked
+                $(vexContent).find('.snippet-selection').click(function(e){
                         var snippet_name = $(this).find('.snippet-name').text();
                         EDITOR.triggerSnippet(snippet_name);
                         vex.close();
                         EDITOR.focus();
-                    } else if(e.type=='keydown' && (e.which == 13 || e.which == 32)) {
-                        // else if space bar or enter key is pressed
-                        e.preventDefault();
-                        var snippet_name = $(this).find('.snippet-name').text();
-                        EDITOR.triggerSnippet(snippet_name);
-                        vex.close();
-                        EDITOR.focus();
-                    }
-                }));
+                });
             }
         });
     }

From 02b67c66fdf5d0fa2b698c0d9a27f5a34f5398d8 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Thu, 31 Oct 2019 08:41:02 +0000
Subject: [PATCH 17/24] A11y: prevent div focus on click

---
 editor.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor.html b/editor.html
index f1ed4844..6805d058 100644
--- a/editor.html
+++ b/editor.html
@@ -83,7 +83,7 @@
         </script>
         <html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"></html>
         <script id="files-template" type="x-tmpl-mustache">
-          <div tabindex="-1" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true">
+          <div tabindex="-1" onfocus="this.blur();" role="dialog" aria-labelledby="loadSave-modal" aria-modal="true">
             <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">
@@ -138,7 +138,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">
+          <div tabindex="-1" onfocus="this.blur();" role="dialog" aria-labelledby="snippets-modal" aria-modal="true">
             <h2><i class="fa fa-cogs"></i> <strong>{{ title }}</strong></h2>
             <p>{{ description }}</p>
             <p>{{ instructions }}</p>

From 01eb6dc220444f284f7d663b4df21fb2e849dd31 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Thu, 31 Oct 2019 11:42:22 +0000
Subject: [PATCH 18/24] a11y move inline focus to css

---
 editor.html          | 4 ++--
 static/css/style.css | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/editor.html b/editor.html
index abf9e270..f976dbc0 100644
--- a/editor.html
+++ b/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>
diff --git a/static/css/style.css b/static/css/style.css
index aa066ad9..0297b5f2 100644
--- a/static/css/style.css
+++ b/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;

From 9bfd8027e8b4463874620da934906f39612efb7b Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Fri, 1 Nov 2019 09:55:36 +0000
Subject: [PATCH 19/24] A11y focus div element

---
 python-main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/python-main.js b/python-main.js
index a4bb6428..09fafe2e 100644
--- a/python-main.js
+++ b/python-main.js
@@ -919,12 +919,12 @@ function web_editor(config) {
     // Trap focus in modal and pass focus to first actionable element
     function focusModal() {
         document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true);
-        var dialog = document.querySelector('.vex-content', '.modal-overlay');
+        var dialog = document.querySelector('.modal-div');
         var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]');
         $(focusableEls).each(function() {
             $(this).attr('tabindex', '0');
         });
-        focusableEls[0].focus();
+        dialog.focus();
         dialog.onkeydown = function(event) {
             if (event.which == 9) {
                 // if tab key is pressed

From 8367008d8dd47fb4ee86f8a39fe71ee58c4b6415 Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Fri, 1 Nov 2019 13:49:58 +0000
Subject: [PATCH 20/24] fix selector

---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 09fafe2e..14a65718 100644
--- a/python-main.js
+++ b/python-main.js
@@ -920,7 +920,7 @@ function web_editor(config) {
     function focusModal() {
         document.querySelector('body > :not(.vex)').setAttribute('aria-hidden', true);
         var dialog = document.querySelector('.modal-div');
-        var focusableEls = dialog.querySelectorAll('a:not([disabled]), a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]');
+        var focusableEls = dialog.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
         $(focusableEls).each(function() {
             $(this).attr('tabindex', '0');
         });

From 7c1406160294da5627ac84b44d7006c3ec3cf20f Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Fri, 1 Nov 2019 15:56:47 +0000
Subject: [PATCH 21/24] fix aria labels and buttons

---
 editor.html    |  9 ++++++---
 python-main.js | 16 +++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/editor.html b/editor.html
index f976dbc0..b5736ade 100644
--- a/editor.html
+++ b/editor.html
@@ -97,12 +97,15 @@ <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</s
               <div id="addFileHeader">
                 <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ files-title }}</strong></h2>
               </div>
-              <div id="addFileHelp" aria-expanded="false"><button class="snippet-button" id="expandHelpPara"><i class="fa fa-info-circle" aria-hidden="true"> <span>{{ help-button }}</span></i></button></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"><span>{{ help-button }}</span></i></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>.
             </div>
-            <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank" class="action" id="files-help-link">{{ help-link }}</a>.</div>
             <div class="expandable">
                 <div class="expandable-always-visible">
-                    <button aria-labelledby="show-files" role="button" type="button" class="action save-button show" id="show-files" tabindex="36" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
+                    <button aria-labelledby="show-files" aria-expanded="false" type="button" class="action save-button show" id="show-files" title="{{ show-files }}">{{ show-files }} &nbsp;<i class="fa fa-caret-down"></i></button>
                 </div>
                 <div class="expandable-content">
                     <div class="fs-file-list" id="fs-file-list">
diff --git a/python-main.js b/python-main.js
index 14a65718..22afcaee 100644
--- a/python-main.js
+++ b/python-main.js
@@ -998,14 +998,14 @@ function web_editor(config) {
                     }
                     downloadFileFromFilesystem('main.py');
                 });
-                $("#files-expand-help").click(function(){
+                $("#expandHelpPara").click(function(){
                     if ($("#fileHelpPara").css("display")=="none"){
                         $("#fileHelpPara").show();
-                        $(this).attr("aria-expanded","true");
+                        $("#expandHelpPara").attr("aria-expanded","true");
                         $("#addFile").css("margin-bottom","10px");
                     }else{
                         $("#fileHelpPara").hide();
-                        $(this).attr("aria-expanded","false");
+                        $("#expandHelpPara").attr("aria-expanded","false");
                         $("#addFile").css("margin-bottom","22px");
                     }
                 });
@@ -1014,11 +1014,13 @@ function web_editor(config) {
                   if (content.style.maxHeight){
                     content.style.maxHeight = null;
                     $("#hide-files").attr("id", "show-files");
+                    $("#show-files").attr("aria-expanded","false");
                     $("#show-files").attr("title", loadStrings["show-files"] + " (" + micropythonFs.ls().length + ")");
                     document.getElementById("show-files").innerHTML = loadStrings["show-files"] + " (" + micropythonFs.ls().length + ") <i class='fa fa-caret-down'>";
                   } else {
                     content.style.maxHeight = content.scrollHeight + "px";
                     $("#show-files").attr("id", "hide-files");
+                    $("#hide-files").attr("aria-expanded","true");
                     $("#hide-files").attr("title", loadStrings["hide-files"]);
                     document.getElementById("hide-files").innerHTML =loadStrings["hide-files"] + " <i class='fa fa-caret-up'>";
                   }
@@ -1170,10 +1172,10 @@ function web_editor(config) {
             afterOpen: function(vexContent) {
                 focusModal();
                 $(vexContent).find('.snippet-selection').click(function(e){
-                        var snippet_name = $(this).find('.snippet-name').text();
-                        EDITOR.triggerSnippet(snippet_name);
-                        vex.close();
-                        EDITOR.focus();
+                    var snippet_name = $(this).find('.snippet-name').text();
+                    EDITOR.triggerSnippet(snippet_name);
+                    vex.close();
+                    EDITOR.focus();
                 });
             }
         });

From 7d9f5b2839f450c9356f9904bc01b675a79f53af Mon Sep 17 00:00:00 2001
From: microbit-mark <mark@microbit.org>
Date: Wed, 6 Nov 2019 07:47:51 +0000
Subject: [PATCH 22/24] tidy up

---
 editor.html          |  6 +++---
 python-main.js       |  4 ++--
 static/css/style.css | 10 +++++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/editor.html b/editor.html
index b5736ade..cddeaaa6 100644
--- a/editor.html
+++ b/editor.html
@@ -90,15 +90,15 @@ <h2 class="modal-title"><i class="fa fa-upload"></i> <strong>{{ load-title }}</s
             </div>
             <h2 class="modal-title"><i class="fa fa-download"></i> <strong>{{ save-but }}</strong></h2>
             <div class="save-buttons-container">
-                <button aria-labelledby="save-py" role="button" type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
-                <button aria-labelledby="save-hex" role="button" type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
+                <button aria-labelledby="save-py" type="button" class="action save-button py" id="save-py" title="{{ save-py }}"><i class="fa fa-download"></i> {{ save-py}}</button>
+                <button aria-labelledby="save-hex" type="button" class="action save-button hex" id="save-hex" title="{{ save-hex }}"><i class="fa fa-download"></i> {{ save-hex}}</button>
             </div>
             <div id="addFile">
               <div id="addFileHeader">
                 <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"><span>{{ help-button }}</span></i></button>
+                <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>
               </div>
             </div>
             <div id="fileHelpPara">{{ file-help-text }}<a href="help.html#fs" target="_blank" class="action" id="files-help-link">{{ help-link }}</a>.
diff --git a/python-main.js b/python-main.js
index 22afcaee..17cb8296 100644
--- a/python-main.js
+++ b/python-main.js
@@ -932,10 +932,10 @@ function web_editor(config) {
                 var numberOfFocusableEls = focusableEls.length;
                 var focusedElIndex = Array.prototype.indexOf.call(focusableEls, focusedEl);
 
-                if (event.shiftKey) {
+                if (event.which == 16) {
                     // if focused on first item and user tabs back, go to the last focusable item
                     if (focusedElIndex == 0) {
-                        focuseableEls.item(numberOfFocusableEls - 1).focus();
+                        focusableEls.item(numberOfFocusableEls - 1).focus();
                         event.preventDefault();
                     }
                 } else {
diff --git a/static/css/style.css b/static/css/style.css
index 0297b5f2..04b7ce3f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -518,7 +518,7 @@ a.command:hover {
     outline: inherit;
 }
 .snippet-button:focus {
-  box-shadow: 0px 0px 5px 3px #FFCC33;
+    box-shadow: 0px 0px 5px 3px #FFCC33;
 }
 
 #share-link {
@@ -705,7 +705,7 @@ input:checked + .menu-switch-slider:before {
 
 /* Modals */
 .modal-div:focus {
-  outline: 0;
+    outline: 0;
 }
 .modal-title {
     margin: 28px 0px 22px 0px;
@@ -863,7 +863,7 @@ input:checked + .menu-switch-slider:before {
 }
 
 .save-button:focus {
-  box-shadow: 0px 0px 5px 3px #FFCC33;
+    box-shadow: 0px 0px 5px 3px #FFCC33;
 }
 
 .save-buttons-container {
@@ -895,7 +895,7 @@ input:checked + .menu-switch-slider:before {
 }
 
 .save-button.hex:focus {
-  box-shadow: 0px 0px 5px 3px #FFCC33;
+    box-shadow: 0px 0px 5px 3px #FFCC33;
 }
 
 .save-button.py {
@@ -914,7 +914,7 @@ input:checked + .menu-switch-slider:before {
 }
 
 .save-button.py:focus {
-  box-shadow: 0px 0px 5px 3px #FFCC33;
+    box-shadow: 0px 0px 5px 3px #FFCC33;
 }
 
 @media (max-width: 480px) {

From a288273237642b627d266491dd405b62c2adf381 Mon Sep 17 00:00:00 2001
From: Mark <mark@microbit.org>
Date: Wed, 6 Nov 2019 07:52:37 +0000
Subject: [PATCH 23/24] Update python-main.js

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>
---
 python-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/python-main.js b/python-main.js
index 17cb8296..a26744d6 100644
--- a/python-main.js
+++ b/python-main.js
@@ -933,7 +933,7 @@ function web_editor(config) {
                 var focusedElIndex = Array.prototype.indexOf.call(focusableEls, focusedEl);
 
                 if (event.which == 16) {
-                    // if focused on first item and user tabs back, go to the last focusable item
+                    // if focused on first item and user shift-tabs back, go to the last focusable item
                     if (focusedElIndex == 0) {
                         focusableEls.item(numberOfFocusableEls - 1).focus();
                         event.preventDefault();

From 8c15192155fa2a9d24468551b0cb65b4f25911e3 Mon Sep 17 00:00:00 2001
From: Mark <mark@microbit.org>
Date: Wed, 6 Nov 2019 09:46:40 +0000
Subject: [PATCH 24/24] Update editor.html

Co-Authored-By: Carlos Pereira Atencio <carlos@microbit.org>
---
 editor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor.html b/editor.html
index cddeaaa6..51047ca8 100644
--- a/editor.html
+++ b/editor.html
@@ -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-labelledby="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>.
