A11y: Convert snippet triggers into buttons.

Author: microbit-carlos

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

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