Editor focus borders on keyboard navigation (microsoft#10462)

* This makes the focus borders on buttons thicker and more noticeable in the default and high contrast themes.

Includes: the menu bar, editor selection, simulator transport, sidebar toggles, download and editor bottom bar buttons.

* Updated to use --pxt-focus-color in editor where appropriate

Author: glastonbridge

react-common/styles/onboarding/TeachingBubble.less

@@ -98,6 +98,11 @@
         }
     }
 
+    .common-button:focus-visible {
+        outline: 2px solid var(--pxt-tertiary-foreground);
+        outline-offset: 3px;
+    }
+
     &.no-steps {
         flex-direction: row-reverse;
     }

theme/accessibility.less

@@ -20,8 +20,17 @@
 }
 
 /* Toggle focus */
-#mainmenu .editor-menuitem .ui.item:focus {
-    background: rgba(0,0,0,0.1) !important;
+#mainmenu .editor-menuitem {
+    .ui.item:focus-visible {
+        background: transparent;
+        outline: 3px solid white;
+        outline-offset: -5px;
+        filter: none;
+    }
+
+    .ui.item.active:focus-visible {
+        outline-color: black;
+    }
 }
 
 .ui.item:focus, .ui.button:focus {

theme/common.less

@@ -234,6 +234,10 @@ pre {
     }
 }
 
+.editor-sidebar .simtoolbar .ui.button:focus-visible {
+    outline: @editorFocusBorderSize solid var(--pxt-focus-border);
+}
+
 #downloadArea {
     margin: unset;
 
@@ -249,6 +253,13 @@ pre {
     }
 }
 
+#downloadArea .button:focus-visible,
+#editortools .button:focus-visible
+{
+    outline: @editorFocusBorderSize solid var(--pxt-focus-border);
+    outline-offset: 2px;
+}
+
 #editorToolbarArea {
     margin: 0;
     margin-left: auto;
@@ -275,7 +286,7 @@ pre {
         color: var(--pxt-primary-foreground) !important; // override !important in semantic ui
         border-radius: inherit;
 
-        &:hover, &:focus {
+        &:hover {
             background: var(--pxt-primary-background-hover) !important;
             color: var(--pxt-primary-foreground-hover) !important;
         }
@@ -373,7 +384,7 @@ div.simframe > iframe {
 .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.link:hover {
     background: none;
 }
-.menubar .ui.menu.fixed .ui.item.editor-menuitem .item:not(.active) {
+.menubar .ui.menu.fixed .ui.item.editor-menuitem .item:not(.active) * {
     opacity: 0.8;
 }
 .menubar .ui.menu.inverted.fixed .ui.item.editor-menuitem .active.item {
@@ -462,6 +473,15 @@ div.simframe > iframe {
         border-top-right-radius: 0!important;
         border-bottom-right-radius: 0!important;
     }
+
+    .base-menuitem:focus-visible {
+        outline: 3px solid white;
+        outline-offset: -5px;
+    }
+
+    .base-menuitem.active:focus-visible {
+        outline-color: var(--pxt-target-stencil1);
+    }
 }
 
 #editordropdown {
@@ -693,6 +713,10 @@ div.simframe > iframe {
     &:focus {
       opacity: 1;
     }
+
+    &:focus-visible {
+        outline: @editorFocusBorderSize solid  var(--pxt-focus-border);
+    }
 }
 #computertogglesim,
 #sidedocstoggle {
@@ -1297,6 +1321,11 @@ Field editors
     }
 }
 
+#serialPreview .label:focus {
+    outline: 3px solid var(--pxt-focus-border) !important;
+    outline-offset: -15px;
+}
+
 /*******************************
         Layout Variables
 *******************************/

theme/highcontrast.less

@@ -58,7 +58,7 @@
     #monacoEditor .blocklyTreeRow,
     #monacoEditor .monacoDraggableBlock {
         &:focus, &:hover {
-            outline: 2px solid @selected !important;
+            outline: @editorFocusBorderSize solid @selected !important;
         }
     }
 
@@ -91,6 +91,16 @@
         }
     }
 
+    #editortoggle .active.item {
+        transition: none;
+        &:focus {
+            box-shadow: inset 0 0 0 6px @HCbackground !important;
+        }
+        >.icon {
+            color: @HCbackground !important;
+        }
+    }
+
     @media all and (pointer:coarse) { /* If touch screen */
         *[tabindex='0'],
         *[tabindex*='d1'],
@@ -102,7 +112,7 @@
         #monacoEditor .blocklyTreeRow,
         #monacoEditor .monacoDraggableBlock {
             &:focus, &:hover {
-                outline: 1px solid transparent !important;
+                outline: @editorFocusBorderSize solid transparent !important;
             }
         }
     }
@@ -356,7 +366,7 @@
 
         &:focus, &:hover {
             color: @HCtextColor !important;
-            border-color: @selected !important;
+            outline: @editorFocusBorderSize solid @selected;
             background: @HCbackground !important;
 
             i, span {
@@ -646,6 +656,10 @@
         &:hover {
             border-color: darken(@HCtextColor, 10.0) !important;
         }
+        &:focus {
+            outline: 3px solid @selected !important;
+            outline-offset: -15px;
+        }
     }
 
     .ui.button.labeled.icon.editorBack {

theme/themes/pxt/globals/site.variables

@@ -217,6 +217,12 @@
 /* Detail view */
 @homeSelectedCardBorderSize: @homeCardBorderSize*2;
 @homeHeaderBorderSize: 3px;
+
+/*-------------------
+   Editor
+--------------------*/
+@editorFocusBorderSize: 4px;
+
 /*-------------------
    Tutorial
 --------------------*/