fix: correct focus visible outline on accent button and anchor styles (…

…#16833) * correct focus vis box shadow * Change files Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
microsoft · Feb 5, 2021 · 7e1723e · 7e1723e
1 parent 8c1d2ce
commit 7e1723e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/...tui-web-components-2021-02-04-15-05-06-users-v-sedono-fix-accent-focus-visible-width.json b/...tui-web-components-2021-02-04-15-05-06-users-v-sedono-fix-accent-focus-visible-width.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "correct focus visible outline on accent button and anchor styles",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T23:05:06.344Z"
+}
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -195,7 +195,7 @@ export const AccentButtonStyles = css`
     }
 
     :host(.accent) .control:${focusVisible} {
-        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
+        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var}, 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var}
     }
 
     :host(.accent.disabled) {