diff --git a/react-common/styles/onboarding/TeachingBubble.less b/react-common/styles/onboarding/TeachingBubble.less
index fd9d08febefb..e6a9f91b3b42 100644
--- a/react-common/styles/onboarding/TeachingBubble.less
+++ b/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;
     }
diff --git a/theme/accessibility.less b/theme/accessibility.less
index 283d470ac00f..940bb6b1afe8 100644
--- a/theme/accessibility.less
+++ b/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 {
diff --git a/theme/common.less b/theme/common.less
index 341a5f92aa33..8da872abafb9 100644
--- a/theme/common.less
+++ b/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
 *******************************/
diff --git a/theme/highcontrast.less b/theme/highcontrast.less
index d327ab28bfff..2964a329ef18 100644
--- a/theme/highcontrast.less
+++ b/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 {
diff --git a/theme/themes/pxt/globals/site.variables b/theme/themes/pxt/globals/site.variables
index a7ddfd824ca5..b8f385d2952a 100644
--- a/theme/themes/pxt/globals/site.variables
+++ b/theme/themes/pxt/globals/site.variables
@@ -217,6 +217,12 @@
 /* Detail view */
 @homeSelectedCardBorderSize: @homeCardBorderSize*2;
 @homeHeaderBorderSize: 3px;
+
+/*-------------------
+   Editor
+--------------------*/
+@editorFocusBorderSize: 4px;
+
 /*-------------------
    Tutorial
 --------------------*/