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 1/3] 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 2/3] 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 3/3] 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;
 }