feat(focus): Add focus outlines to NavigationLink and Clickable (#522)

* feat(focus): Add focus outlines to NavigationLink and Clickable

Add focusOutlines style helper that returns styles that NaviagionLink
and Clickable merge into their own styles.

Initial version is provididing just a basic box-shadow-based outline,
only showing it when needed. We avoid using Office UI Fabric's focus
styles, as they assume block elements, and don't work well on non-block
links that wrap. Can consider switching to their style in future if they
resolve that issue (microsoft/fluentui#4883)

Later commit will also add option to use a overlay focus style, which
is needed for links and buttons that contain images or other content
that covers their surface area competely - main use case there is for
eg. images in a gif picker, or image attachments.

* Update visual diff snapshots

Author: BrendanMcK

config/styleguide-visual/reference/Hovercard_click_trigger_click_desktop.png

@@ -1,6 +1,7 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
 import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { getNormalFocusStyle } from '../../util/styles/focusOutlines';
 
 export interface ClickableStyleProps {
   block?: boolean;
@@ -10,30 +11,35 @@ export interface ClickableStyleProps {
 export const getClassNames = memoizeFunction((styleProps: ClickableStyleProps) => {
   const { block, theme } = styleProps;
 
+  const focusOutlineStyles = getNormalFocusStyle();
+
   return mergeStyleSets({
-    root: {
-      color: 'inherit',
-      font: 'inherit',
-      margin: 0,
-      padding: 0,
-      textAlign: 'inherit',
-      lineHeight: 'inherit',
-      background: 'none',
-      overflow: 'visible',
-      border: 'none',
-      cursor: 'pointer',
-      display: block ? 'block' : 'inline',
-      width: block ? '100%' : 'undefined',
-      selectors: {
-        '> .y-block': {
-          width: '100%',
-        },
-        '&:active .y-fakeLink, &:focus .y-fakeLink, &:hover .y-fakeLink': {
-          textDecoration: 'underline',
-          cursor: 'pointer',
-          color: theme.semanticColors.linkHovered,
+    root: [
+      {
+        color: 'inherit',
+        font: 'inherit',
+        margin: 0,
+        padding: 0,
+        textAlign: 'inherit',
+        lineHeight: 'inherit',
+        background: 'none',
+        overflow: 'visible',
+        border: 'none',
+        cursor: 'pointer',
+        display: block ? 'block' : 'inline',
+        width: block ? '100%' : 'undefined',
+        selectors: {
+          '> .y-block': {
+            width: '100%',
+          },
+          '&:active .y-fakeLink, &:focus .y-fakeLink, &:hover .y-fakeLink': {
+            textDecoration: 'underline',
+            cursor: 'pointer',
+            color: theme.semanticColors.linkHovered,
+          },
         },
       },
-    },
+      focusOutlineStyles,
+    ],
   });
 });

config/styleguide-visual/reference/ModalDialog_click_trigger_click_desktop.png

@@ -17,6 +17,7 @@ exports[`<Clickable /> when ariaLabel is passed matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -33,6 +34,12 @@ exports[`<Clickable /> when ariaLabel is passed matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   <span
@@ -71,6 +78,7 @@ exports[`<Clickable /> when block is true matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -87,6 +95,12 @@ exports[`<Clickable /> when block is true matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   <span
@@ -125,6 +139,7 @@ exports[`<Clickable /> when focusableRef is passed matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -141,6 +156,12 @@ exports[`<Clickable /> when focusableRef is passed matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   <span
@@ -179,6 +200,7 @@ exports[`<Clickable /> when title is passed matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -195,6 +217,12 @@ exports[`<Clickable /> when title is passed matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   title="extra browser tooltip content"
   type="button"
 >
@@ -234,6 +262,7 @@ exports[`<Clickable /> when unstyled matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -250,6 +279,12 @@ exports[`<Clickable /> when unstyled matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   clickable content
@@ -273,6 +308,7 @@ exports[`<Clickable /> with additional className matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -289,6 +325,12 @@ exports[`<Clickable /> with additional className matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   <span
@@ -327,6 +369,7 @@ exports[`<Clickable /> with default options matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -343,6 +386,12 @@ exports[`<Clickable /> with default options matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   <span
@@ -381,6 +430,7 @@ exports[`<Clickable /> with theme matches its snapshot 1`] = `
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
+        outline: none;
         overflow: visible;
         padding-bottom: 0px;
         padding-left: 0px;
@@ -397,6 +447,12 @@ exports[`<Clickable /> with theme matches its snapshot 1`] = `
         cursor: pointer;
         text-decoration: underline;
       }
+      .ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+        box-shadow: inset 0 0 0 1px;
+      }
   type="button"
 >
   <span

config/styleguide-visual/reference/NavigationLink_basic_focus_desktop.png

@@ -1,6 +1,7 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
 import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { getNormalFocusStyle } from '../../util/styles/focusOutlines';
 
 export interface NavigationLinkStyleProps {
   block?: boolean;
@@ -23,16 +24,20 @@ export const getClassNames = memoizeFunction((styleProps: NavigationLinkStylePro
         color: theme.semanticColors.linkHovered,
       };
 
-  return mergeStyleSets({
-    root: {
-      display: block ? 'block' : undefined,
-      cursor: 'pointer',
-      color: unstyled ? 'inherit' : theme.semanticColors.link,
-      textDecoration: 'none',
-      selectors: {
-        '&:active, &:focus, &:hover': overrides,
-        '&:active .y-fakeLink, &:focus .y-fakeLink, &:hover .y-fakeLink': overrides,
-      },
+  const baseStyles = {
+    display: block ? 'block' : undefined,
+    cursor: 'pointer',
+    color: unstyled ? 'inherit' : theme.semanticColors.link,
+    textDecoration: 'none',
+    selectors: {
+      '&:active, &:focus, &:hover': overrides,
+      '&:active .y-fakeLink, &:focus .y-fakeLink, &:hover .y-fakeLink': overrides,
     },
+  };
+
+  const focusOutlineStyles = getNormalFocusStyle();
+
+  return mergeStyleSets({
+    root: [baseStyles, focusOutlineStyles],
   });
 });