Merge pull request #1386 from katlich112358/Codetrap-fix

Reference page keyboard accessibility code block fix

Author: paulaxisabel

src/assets/css/main.css

@@ -674,7 +674,7 @@ div.reference-subgroup {
     position: relative;
     left: 1em;
     padding-top: 0;
-    margin-top: 1rem;
+    margin-top: 3rem;
     border: none;
     width: 30.5em;
     max-width: 100%;
@@ -700,6 +700,7 @@ div.reference-subgroup {
 
 .example-content .edit_space ul {
     display: flex;
+    flex-wrap: wrap-reverse;
     flex-direction: row-reverse;
     position: relative;
     pointer-events: none;
@@ -721,6 +722,12 @@ div.reference-subgroup {
     border-color: rgba(45, 123, 182, 0.25);
 }
 
+.example-content .edit_space ul li button:focus {
+    color: #2d7bb6;
+    border: 2px dotted;
+    border-color: rgba(45, 123, 182, 0.25);
+}
+
 .example-content .edit_space .edit_area {
     position: absolute;
     top: 0.5em;
@@ -732,7 +739,6 @@ div.reference-subgroup {
     padding: 1.5em 0.5em 0.5em 0.5em;
     font-size: 15pt;
 }
-
 .display_button {
     margin-bottom: 2em;
     font-family: 'Montserrat', sans-serif;
@@ -743,6 +749,17 @@ div.reference-subgroup {
     outline: none;
 }
 
+.sketchTabInstructions {
+    flex-grow: 1;
+    font-family: 'Montserrat', sans-serif;
+    color: #CCC;
+    font-size: 1em;
+    font-style: italic;
+    margin-left: 120px;
+    margin-right: 1em;
+    margin-top: .25em;
+}
+
 .example-content .example_container {
     width: 36em;
     max-width: 100%;

src/assets/js/render.js

@@ -18,8 +18,8 @@ var renderCode = function(exampleName) {
 
   function enableTab(el) {
     el.onkeydown = function(e) {
-      if (e.keyCode === 9) {
-        // tab was pressed
+      if (e.keyCode === 32 && e.shiftKey) {
+        // shift + space pressed
         // get caret position/selection
         var val = this.value,
           start = this.selectionStart,
@@ -85,7 +85,7 @@ var renderCode = function(exampleName) {
       edit_space.appendChild(edit_area);
       enableTab(edit_area);
 
-      //add buttons
+      //add buttons and instructions
       let button_space = document.createElement('ul');
       edit_space.appendChild(button_space);
 
@@ -134,6 +134,10 @@ var renderCode = function(exampleName) {
       let edit_li = button_space.appendChild(document.createElement('li'));
       edit_li.appendChild(edit_button);
 
+      let sketch_tab_instructions = button_space.appendChild(document.createElement('li'));
+      sketch_tab_instructions.innerHTML = 'Press Shift-Space to insert tab.';
+      sketch_tab_instructions.className = 'sketchTabInstructions';
+
       function setMode(sketch, m) {
         if (m === 'edit') {
           $('.example_container').each(function(ind, con) {