Merge pull request #580 from adzhindzhi/bugfix/uepr-594-focus-outline

[UEPR-594] Focus outline

Author: adzhindzhi

packages/scratch-gui/src/components/extension-button/extension-button.css

@@ -39,7 +39,7 @@ $fade-out-distance: 15px;
 }
 
 .extension-button:focus-visible {
-    outline: revert;
+    outline: 0.0625rem auto $ui-black;
 }
 
 .extension-button-icon {

packages/scratch-gui/src/components/gui/gui.css

@@ -19,6 +19,10 @@
     box-sizing: border-box;
 }
 
+:global(*:focus-visible) {
+    outline-color: $ui-black;
+}
+
 .flex-wrapper {
     display: flex;
 
@@ -159,7 +163,7 @@
 }
 
 /* Tab style overrides from react-tabs */
-.tab.is-selected:after {
+.tab:after {
     display: none;
 }
 
@@ -169,8 +173,12 @@
     border-color: $ui-black-transparent;
 }
 
-.tab.is-selected:focus:after {
-    display: none;
+/* Focus outline for tabs */
+.tab:focus-visible,
+.tab.is-selected:focus-visible {
+    outline: 0.0625rem auto $ui-black;
+    outline-offset: -0.125rem; /* Looks better, otherwise it gets cut off by the canvas below */
+    z-index: 5; /* Display above tabs */
 }
 
 /* Body of the tabs */

packages/scratch-gui/src/css/colors.css

@@ -13,6 +13,8 @@ $ui-transparent: hsla(0, 100%, 100%, 0); /* 25% transparent version of ui-white
 $ui-black-transparent: hsla(0, 0%, 0%, 0.15); /* 15% transparent version of black */
 $ui-black-transparent-10: hsla(0, 0%, 0%, 0.10); /* 10% transparent version of black */
 
+$ui-black: hsla(0, 0%, 0%, 1); /* #000000 */
+
 $ui-green: hsla(163, 85%, 35%, 1); /* #0DA57A */
 $ui-green-2: hsla(163, 85%, 40%, 1); /* #0FBD8C */