Merge pull request #1 from bbcmicrobit/a11y-modal-focus-update

A11y: Table tds not selectable.

Author: microbit-mark

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><button class="snippet-button">{{trigger}}</button> <span class="snippet-name">{{name}}</span></td>
                     <td>{{#describe}}{{name}}{{/describe}}</td>
                 </tr>
                 {{/snippets}}

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) {
@@ -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();

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;
 }