feat: add custom focus ring color (#2334)

adds the ability for developers to define the color used for the focus ring
requires the developer to set the --focus-ring-style for application in Firefox
uses the General > Theme story as a working example

packages/mgt-components/src/components/mgt-login/mgt-login.scss

@@ -60,10 +60,6 @@ mgt-login .login-button {
     border-radius: 4px;
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &:disabled {
     opacity: 0.4;
     pointer-events: none;
@@ -74,7 +70,7 @@ mgt-login .login-button {
   }
 
   &:focus-visible {
-    outline: auto;
+    outline-style: $focus-ring-style;
   }
 }
 

packages/mgt-components/src/styles/shared-styles.scss

@@ -5,6 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
+$focus-ring-style: var(--focus-ring-style, auto);
+
 :host([hidden]) {
   display: none;
 }
@@ -17,7 +19,15 @@
   --theme-primary-color: #0078d7;
   --theme-dark-color: #005a9e;
 }
-
+:focus-visible {
+  // ensure default is correctly set for Firefox
+  outline-color: var(--focus-ring-color, Highlight);
+  // ensure default is set for other browsers
+  outline-color: var(--focus-ring-color, -webkit-focus-ring-color);
+  // set the style of the focus ring
+  // this needs to be something other than auto in Firefox to use the custom color
+  outline-style: $focus-ring-style;
+}
 .ms-Icon {
   display: inline-block;
   font-family: 'FabricMDL2Icons';

stories/samples/general.stories.js

@@ -166,10 +166,10 @@ export const cache = () => html`
   </script>
 `;
 export const theme = () => html`
-  <div class="mgt-light">
+  <div class="mgt-light root">
     <header class="mgt-dark">
       <p>I should be dark, regional class</p>
-      <mgt-teams-channel-picker></mgt-teams-channel-picker>
+      <mgt-people-picker></mgt-people-picker>
       <div class="mgt-light">
         <p>I should be light, second level regional class</p>
         <mgt-teams-channel-picker></mgt-teams-channel-picker>
@@ -187,6 +187,10 @@ export const theme = () => html`
     <mgt-teams-channel-picker class="mgt-foo"></mgt-teams-channel-picker>
   </div>
   <style>
+    .root {
+      --focus-ring-color: red;
+      --focus-ring-style: solid;
+    }
     .custom1 {
       --input-border: 2px solid teal;
       --input-background-color: #33c2c2;