Code Runner: The full-screen and exit buttons lack keyboard tab suppo…

…rt #773786 (#209)

Co-authored-by: DangHieu1407 <hnd34@open.ac.uk>

amd/src/userinterfacewrapper.js

@@ -145,7 +145,7 @@ define(['jquery', 'core/templates', 'core/notification'], function($, Templates,
     function InterfaceWrapper(uiname, textareaId) {
         let t = this; // For use by embedded functions.
 
-        this.GUTTER = 14;  // Size of gutter at base of wrapper Node (pixels)
+        this.GUTTER = 16;  // Size of gutter at base of wrapper Node (pixels)
         this.DEFAULT_SYNC_INTERVAL_SECS = 5;
 
         const PIXELS_PER_ROW = 19;  // For estimating height of textareas.

styles.css

@@ -260,16 +260,12 @@ div.coderunner-test-results.partial {
 /* Fullscreen and exit fullscreen */
 .que.coderunner .button-exit-fullscreen,
 body#page-question-type-coderunner .button-exit-fullscreen {
-    bottom: -5px;
+    bottom: 0;
 }
 
 .que.coderunner .button-fullscreen,
 body#page-question-type-coderunner .button-fullscreen {
-    bottom: -6px;
-}
-
-body#page-question-type-coderunner .col-md-9 .button-fullscreen {
-    margin-right: 15px;
+    bottom: -1px;
 }
 
 .que.coderunner .button-fullscreen,
@@ -278,11 +274,23 @@ body#page-question-type-coderunner .button-fullscreen,
 body#page-question-type-coderunner .button-exit-fullscreen {
     border: none;
     background: transparent;
-    margin-right: 4px;
-    right: 12px;
+    margin: 0 0 2px 0;
+    height: 15px;
+    width: 20px;
+    padding: 0;
+    right: 15px;
     z-index: 10;
 }
 
+.que.coderunner .button-fullscreen:focus,
+.que.coderunner .button-exit-fullscreen:focus,
+body#page-question-type-coderunner .button-fullscreen:focus,
+body#page-question-type-coderunner .button-exit-fullscreen:focus {
+    display: flex;
+    justify-content: center;
+    outline: 2px solid black;
+}
+
 .que.coderunner .button-fullscreen img.icon:hover,
 .que.coderunner .button-exit-fullscreen img.icon:hover,
 body#page-question-type-coderunner .button-fullscreen img.icon:hover,
@@ -302,7 +310,7 @@ body#page-question-type-coderunner .button-exit-fullscreen img.icon:hover {
 body#page-question-type-coderunner .button-exit-fullscreen img.icon,
 body#page-question-type-coderunner .button-fullscreen img.icon {
     margin-right: unset;
-    margin-bottom: 2px;
+    margin-bottom: 10px;
     width: 15px;
     height: 15px;
 }

templates/screenmode_button.mustache

@@ -24,8 +24,8 @@
 
     }
 }}
-<div class='screen-mode-button'>
-    <button class="button-fullscreen position-absolute d-none" tabindex="-1" name="fullscreen">
+<div class="screen-mode-button">
+    <button class="button-fullscreen position-absolute d-none" name="fullscreen">
         {{#pix}}fullscreen, qtype_coderunner, {{#str}}fullscreen, qtype_coderunner{{/str}}{{/pix}}
     </button>
     <button class="button-exit-fullscreen position-absolute d-none" name="windowed">