From a3c1cf2c630d69ea7c0e6269286c288b86f347cc Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 14:57:23 -0400
Subject: [PATCH 01/12] updates focus styles that do not match the Primer CSS
 implementation

---
 docs/content/SubNav.md        |  2 +-
 src/Pagination/Pagination.tsx |  6 ++++++
 src/TabNav.tsx                |  6 ++++++
 src/_TextInputWrapper.tsx     | 39 ++++++++---------------------------
 src/_globalFocusStyles.ts     | 10 +++++++++
 5 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 src/_globalFocusStyles.ts

diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md
index 701dc47e262..d674f543b17 100644
--- a/docs/content/SubNav.md
+++ b/docs/content/SubNav.md
@@ -39,7 +39,7 @@ This ensures that the NavLink gets `activeClassName='selected'`
     <SubNav.Link href="#support">Support</SubNav.Link>
   </SubNav.Links>
 
-  <TextInput type="search" icon={SearchIcon} sx={{width: 320}} />
+  <TextInput type="search" leadingVisual={SearchIcon} sx={{width: 320}} />
 </SubNav>
 ```
 
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
index 8a13794f3f7..666a9123fd3 100644
--- a/src/Pagination/Pagination.tsx
+++ b/src/Pagination/Pagination.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import Box from '../Box'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
+import globalFocusStyles from '../_globalFocusStyles'
 import {buildComponentData, buildPaginationModel} from './model'
 
 const Page = styled.a`
@@ -37,6 +38,11 @@ const Page = styled.a`
     transition-duration: 0.1s;
   }
 
+  &:focus-visible {
+    ${globalFocusStyles};
+    outline-offset: 0;
+  }
+
   &:active {
     border-color: ${get('colors.border.muted')};
   }
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index c4204d406f9..f32048f25eb 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
+import globalFocusStyles from './_globalFocusStyles'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
@@ -49,6 +50,11 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   border: 1px solid transparent;
   border-bottom: 0;
 
+  &:focus-visible {
+    ${globalFocusStyles};
+    outline-offset: -6px;
+  }
+
   &:hover,
   &:focus {
     color: ${get('colors.fg.default')};
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index 29962499ee6..ed0cb97f050 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -65,20 +65,22 @@ export type StyledWrapperProps = {
 const textInputBasePadding = '12px'
 export const textInputHorizPadding = textInputBasePadding
 
-// TODO: figure out how to type a themed CSS function (e.g.: css`color: blue;`)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean, focusStyles: any) => {
+const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) => {
   if (hasTrailingAction) {
     return (
       isInputFocused &&
       css`
-        ${focusStyles}
+        border-color: ${get('colors.accent.fg')};
+        outline: none;
+        box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')};
       `
     )
   }
   return css`
     &:focus-within {
-      ${focusStyles}
+      border-color: ${get('colors.accent.fg')};
+      outline: none;
+      box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')};
     }
   `
 }
@@ -102,15 +104,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     color: ${get('colors.fg.subtle')};
   }
 
-  ${props =>
-    renderFocusStyles(
-      Boolean(props.hasTrailingAction),
-      Boolean(props.isInputFocused),
-      css`
-        border-color: ${get('colors.accent.emphasis')};
-        box-shadow: ${get('shadows.primer.shadow.focus')};
-      `
-    )}
+  ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
 
   > textarea {
     padding: ${textInputBasePadding};
@@ -141,14 +135,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     props.validationStatus === 'error' &&
     css`
       border-color: ${get('colors.danger.emphasis')};
-      ${renderFocusStyles(
-        Boolean(props.hasTrailingAction),
-        Boolean(props.isInputFocused),
-        css`
-          border-color: ${get('colors.danger.emphasis')};
-          box-shadow: ${get('shadows.btn.danger.focusShadow')};
-        `
-      )}
+      ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
     `}
 
 
@@ -156,14 +143,6 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     props.validationStatus === 'success' &&
     css`
       border-color: ${get('colors.success.emphasis')};
-      ${renderFocusStyles(
-        Boolean(props.hasTrailingAction),
-        Boolean(props.isInputFocused),
-        css`
-          border-color: ${get('colors.success.emphasis')};
-          box-shadow: 0 0 0 3px ${get('colors.success.muted')};
-        `
-      )}
     `}
 
   ${props =>
diff --git a/src/_globalFocusStyles.ts b/src/_globalFocusStyles.ts
new file mode 100644
index 00000000000..72b329c8c1f
--- /dev/null
+++ b/src/_globalFocusStyles.ts
@@ -0,0 +1,10 @@
+import {css} from 'styled-components'
+import {get} from './constants'
+
+const globalFocusStyles = css`
+  box-shadow: none;
+  outline: 2px solid ${get('colors.accent.fg')};
+  outline-offset: 2px;
+`
+
+export default globalFocusStyles

From b2c66d048b763d7c3c0e505ce0903a6af53e8aeb Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 14:58:05 -0400
Subject: [PATCH 02/12] updates ThemeSwitcher to render ActionMenu instead of
 DropdownMenu

---
 .../components/live-preview-wrapper.js        | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
index 80e851b9ca9..a2871551839 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
@@ -1,24 +1,33 @@
-import {BaseStyles, Box, ThemeProvider, useTheme} from '@primer/react'
-import {DropdownMenu, DropdownButton} from '@primer/react/deprecated'
 import React from 'react'
+import {ActionMenu, ActionList, BaseStyles, Box, ThemeProvider, useTheme} from '@primer/react'
 
 function ThemeSwitcher() {
   const {theme, dayScheme, setDayScheme} = useTheme()
-  const items = Object.keys(theme.colorSchemes).map(scheme => ({text: scheme.replace(/_/g, ' '), key: scheme}))
+  const items = Object.keys(theme.colorSchemes).map(scheme => ({name: scheme.replace(/_/g, ' '), key: scheme}))
   const selectedItem = React.useMemo(() => items.find(item => item.key === dayScheme), [items, dayScheme])
+  const itemsKeys = items.map(item => item.key)
+  const [selectedIndex, setSelectedIndex] = React.useState(itemsKeys.indexOf(dayScheme))
+
   return (
-    <DropdownMenu
-      renderAnchor={({children, ...anchorProps}) => (
-        <DropdownButton {...anchorProps} sx={{variant: 'small'}}>
-          {children}
-        </DropdownButton>
-      )}
-      items={items}
-      selectedItem={selectedItem}
-      onChange={item => {
-        setDayScheme(item.key)
-      }}
-    />
+    <ActionMenu>
+      <ActionMenu.Button aria-label="Select field type">{selectedItem?.name}</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium">
+        <ActionList selectionVariant="single">
+          {items.map((type, index) => (
+            <ActionList.Item
+              key={index}
+              selected={index === selectedIndex}
+              onSelect={() => {
+                setSelectedIndex(index)
+                setDayScheme(items[index].key)
+              }}
+            >
+              {type.name}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
   )
 }
 

From b31c108d02e25ac8ba9dc102eeef69eec2f76ad7 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 15:06:22 -0400
Subject: [PATCH 03/12] explicitly sets outline-offset in global focus styles
 instead of adding a new style that 'beats' the default 2px

---
 src/Pagination/Pagination.tsx |  5 ++---
 src/TabNav.tsx                |  5 ++---
 src/_getGlobalFocusStyles.ts  | 11 +++++++++++
 src/_globalFocusStyles.ts     | 10 ----------
 4 files changed, 15 insertions(+), 16 deletions(-)
 create mode 100644 src/_getGlobalFocusStyles.ts
 delete mode 100644 src/_globalFocusStyles.ts

diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
index 666a9123fd3..7e521517150 100644
--- a/src/Pagination/Pagination.tsx
+++ b/src/Pagination/Pagination.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Box from '../Box'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
-import globalFocusStyles from '../_globalFocusStyles'
+import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 import {buildComponentData, buildPaginationModel} from './model'
 
 const Page = styled.a`
@@ -39,8 +39,7 @@ const Page = styled.a`
   }
 
   &:focus-visible {
-    ${globalFocusStyles};
-    outline-offset: 0;
+    ${getGlobalFocusStyles(0)};
   }
 
   &:active {
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index f32048f25eb..9ba5940bbb5 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
-import globalFocusStyles from './_globalFocusStyles'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
@@ -51,8 +51,7 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   border-bottom: 0;
 
   &:focus-visible {
-    ${globalFocusStyles};
-    outline-offset: -6px;
+    ${getGlobalFocusStyles('-6px')};
   }
 
   &:hover,
diff --git a/src/_getGlobalFocusStyles.ts b/src/_getGlobalFocusStyles.ts
new file mode 100644
index 00000000000..ef12d43f3d7
--- /dev/null
+++ b/src/_getGlobalFocusStyles.ts
@@ -0,0 +1,11 @@
+import {CSSProperties} from 'react'
+import {css} from 'styled-components'
+import {get} from './constants'
+
+const getGlobalFocusStyles = (outlineOffset?: CSSProperties['outlineOffset']) => css`
+  box-shadow: none;
+  outline: 2px solid ${get('colors.accent.fg')};
+  outline-offset: ${outlineOffset || '2px'};
+`
+
+export default getGlobalFocusStyles
diff --git a/src/_globalFocusStyles.ts b/src/_globalFocusStyles.ts
deleted file mode 100644
index 72b329c8c1f..00000000000
--- a/src/_globalFocusStyles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {css} from 'styled-components'
-import {get} from './constants'
-
-const globalFocusStyles = css`
-  box-shadow: none;
-  outline: 2px solid ${get('colors.accent.fg')};
-  outline-offset: 2px;
-`
-
-export default globalFocusStyles

From ad65025d514523e64a9336589f54066689bd0f2e Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 15:08:18 -0400
Subject: [PATCH 04/12] update snapshots

---
 .../__snapshots__/Pagination.test.tsx.snap    |  6 ++
 .../__snapshots__/Autocomplete.test.tsx.snap  | 21 +++--
 .../__snapshots__/TabNav.test.tsx.snap        |  6 ++
 .../__snapshots__/TextInput.test.tsx.snap     | 85 ++++++++++++-------
 .../TextInputWithTokens.test.tsx.snap         | 78 +++++++++++------
 .../__snapshots__/Textarea.test.tsx.snap      |  3 +-
 6 files changed, 136 insertions(+), 63 deletions(-)

diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index f0f13c18b48..6e173bca839 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -43,6 +43,12 @@ exports[`Pagination renders consistently 1`] = `
   transition-duration: 0.1s;
 }
 
+.c2:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 2px;
+}
+
 .c2:active {
   border-color: hsla(210,18%,87%,1);
 }
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 56c84fb8419..63a64e2f9e7 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -46,7 +46,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -197,7 +198,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -383,7 +385,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -1332,7 +1335,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2191,7 +2195,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -3061,7 +3066,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4061,7 +4067,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
index 58d38dd3de4..2136f64909c 100644
--- a/src/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -13,6 +13,12 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   border-bottom: 0;
 }
 
+.c0:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -6px;
+}
+
 .c0:hover,
 .c0:focus {
   color: #24292f;
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 587faa121f4..b59b25330dc 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -45,7 +45,8 @@ exports[`TextInput renders 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -160,7 +161,8 @@ exports[`TextInput renders block 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -270,7 +272,8 @@ exports[`TextInput renders consistently 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -380,7 +383,8 @@ exports[`TextInput renders contrast 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -491,7 +495,8 @@ exports[`TextInput renders error 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -499,8 +504,9 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #cf222e;
-  box-shadow: 0 0 0 3px rgba(164,14,38,0.4);
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 >:not(:last-child) {
@@ -611,7 +617,8 @@ exports[`TextInput renders large 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -722,7 +729,8 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -860,7 +868,8 @@ exports[`TextInput renders monospace 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -970,7 +979,8 @@ exports[`TextInput renders placeholder 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -1088,7 +1098,8 @@ exports[`TextInput renders small 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2377,7 +2388,8 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2515,7 +2527,8 @@ exports[`TextInput renders warning 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2544,8 +2557,9 @@ exports[`TextInput renders warning 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #bf8700;
-  box-shadow: 0 0 0 3px rgba(212,167,44,0.4);
+  border-color: #0969da;
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c1 {
@@ -2639,7 +2653,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2797,7 +2812,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2999,7 +3015,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -3161,7 +3178,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -3403,7 +3421,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -3645,7 +3664,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -3887,7 +3907,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4085,7 +4106,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4327,7 +4349,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4536,7 +4559,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4819,7 +4843,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -5106,7 +5131,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -5377,7 +5403,8 @@ exports[`TextInput should render a password input 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 03f1c8ed1fb..1725ebaeeaa 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -89,7 +89,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -816,7 +817,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -1231,7 +1233,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -1398,7 +1401,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2080,7 +2084,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -2762,7 +2767,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -3437,7 +3443,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4112,7 +4119,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -4787,7 +4795,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -5464,7 +5473,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -6139,7 +6149,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -6531,7 +6542,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -7255,7 +7267,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -8023,7 +8036,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -8751,7 +8765,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -9559,7 +9574,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -10367,7 +10383,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -11175,7 +11192,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -11939,7 +11957,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -12747,7 +12766,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -13522,7 +13542,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -14370,7 +14391,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -15218,7 +15240,8 @@ Array [
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -16054,7 +16077,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -16729,7 +16753,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
@@ -17409,7 +17434,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {
diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
index 137d04ffcad..9581ddbc8c1 100644
--- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -41,7 +41,8 @@ exports[`Textarea renders consistently 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #0969da;
 }
 
 .c0 > textarea {

From 8c7d0207d125f0e46ebbff4e5e718744f3528636 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 15:50:34 -0400
Subject: [PATCH 05/12] fixes cross-browser issues for global focus styles

---
 src/Checkbox.tsx                              |  2 +
 src/Pagination/Pagination.tsx                 |  4 +-
 src/Radio.tsx                                 |  2 +
 src/TabNav.tsx                                |  4 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 12 ++-
 .../__snapshots__/Checkbox.test.tsx.snap      | 16 ++++
 .../__snapshots__/CheckboxGroup.test.tsx.snap | 16 ++++
 .../CheckboxOrRadioGroup.test.tsx.snap        | 16 ++++
 .../__snapshots__/Radio.test.tsx.snap         | 16 ++++
 .../__snapshots__/RadioGroup.test.tsx.snap    | 16 ++++
 .../__snapshots__/TabNav.test.tsx.snap        | 10 ++
 .../__snapshots__/themePreval.test.ts.snap    |  2 +-
 .../ChoiceFieldset.test.tsx.snap              | 96 +++++++++++++++++++
 src/_getGlobalFocusStyles.ts                  | 22 ++++-
 14 files changed, 224 insertions(+), 10 deletions(-)

diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
index bbad54491ca..058aa1b2e63 100644
--- a/src/Checkbox.tsx
+++ b/src/Checkbox.tsx
@@ -4,6 +4,7 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext
 import sx, {SxProp} from './sx'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 import {CheckboxGroupContext} from './CheckboxGroup'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 export type CheckboxProps = {
   /**
@@ -38,6 +39,7 @@ const StyledCheckbox = styled.input`
   cursor: pointer;
 
   ${props => props.disabled && `cursor: not-allowed;`}
+  ${getGlobalFocusStyles(0)};
 
   ${sx}
 `
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
index 7e521517150..cb16f146d46 100644
--- a/src/Pagination/Pagination.tsx
+++ b/src/Pagination/Pagination.tsx
@@ -38,9 +38,7 @@ const Page = styled.a`
     transition-duration: 0.1s;
   }
 
-  &:focus-visible {
-    ${getGlobalFocusStyles(0)};
-  }
+  ${getGlobalFocusStyles(0)};
 
   &:active {
     border-color: ${get('colors.border.muted')};
diff --git a/src/Radio.tsx b/src/Radio.tsx
index 64616927adc..ee660497768 100644
--- a/src/Radio.tsx
+++ b/src/Radio.tsx
@@ -3,6 +3,7 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext
 import sx, {SxProp} from './sx'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 import {RadioGroupContext} from './RadioGroup'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 export type RadioProps = {
   /**
@@ -41,6 +42,7 @@ const StyledRadio = styled.input`
   cursor: pointer;
 
   ${props => props.disabled && `cursor: not-allowed;`}
+  ${getGlobalFocusStyles(0)};
 
   ${sx}
 `
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 9ba5940bbb5..dc7ff810571 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -50,9 +50,7 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   border: 1px solid transparent;
   border-bottom: 0;
 
-  &:focus-visible {
-    ${getGlobalFocusStyles('-6px')};
-  }
+  ${getGlobalFocusStyles('-6px')};
 
   &:hover,
   &:focus {
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index 6e173bca839..089fa8da7f3 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -43,10 +43,20 @@ exports[`Pagination renders consistently 1`] = `
   transition-duration: 0.1s;
 }
 
+.c2:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c2:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
 .c2:focus-visible {
   box-shadow: none;
   outline: 2px solid #0969da;
-  outline-offset: 2px;
+  outline-offset: 0;
 }
 
 .c2:active {
diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 1f1f73e7285..87321f2c6b6 100644
--- a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -5,6 +5,22 @@ exports[`Checkbox renders consistently 1`] = `
   cursor: pointer;
 }
 
+.c0:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c0:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 <input
   aria-checked="false"
   aria-disabled="false"
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index b75d144d4f4..30ddc44452d 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -45,6 +45,22 @@ exports[`CheckboxGroup renders consistently 1`] = `
   cursor: pointer;
 }
 
+.c5:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c5:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c5:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 <div>
   <fieldset
     className="c0"
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index 9d3641efc54..bcb40cee76e 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -45,6 +45,22 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   cursor: pointer;
 }
 
+.c5:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c5:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c5:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 <div>
   <fieldset
     className="c0"
diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/__tests__/__snapshots__/Radio.test.tsx.snap
index b22f1c4bf42..7cbba76c9f9 100644
--- a/src/__tests__/__snapshots__/Radio.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -5,6 +5,22 @@ exports[`Radio renders consistently 1`] = `
   cursor: pointer;
 }
 
+.c0:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c0:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 <input
   aria-checked="false"
   aria-disabled="false"
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index 24b76c16ca0..f60908c0c78 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -45,6 +45,22 @@ exports[`RadioGroup renders consistently 1`] = `
   cursor: pointer;
 }
 
+.c5:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c5:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c5:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 <div>
   <fieldset
     className="c0"
diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
index 2136f64909c..97509d2b6d3 100644
--- a/src/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -13,6 +13,16 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   border-bottom: 0;
 }
 
+.c0:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -6px;
+}
+
+.c0:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
 .c0:focus-visible {
   box-shadow: none;
   outline: 2px solid #0969da;
diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index 40363654676..74cd2be1a31 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`snapshot theme-preval.js 1`] = `
 "// this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2022-03-24 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-04-06 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 module.exports = {
   \\"theme\\": {
     \\"animation\\": {
diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
index 5abfa4ae979..5a0e7a270d9 100644
--- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -56,6 +56,22 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
   cursor: not-allowed;
 }
 
+.c6:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c6:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -221,6 +237,22 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
   cursor: pointer;
 }
 
+.c7:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c7:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c7:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 .c3 {
   font-size: 14px;
   color: #24292f;
@@ -411,6 +443,22 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
   cursor: pointer;
 }
 
+.c6:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c6:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 .c10 {
   font-size: 12px;
   color: #57606a;
@@ -730,6 +778,22 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
   cursor: pointer;
 }
 
+.c5:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
+.c5:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c5:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: 0;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -915,6 +979,22 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
   cursor: pointer;
 }
 
+.c6:focus {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c6:focus-visible {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: 0;
+}
+
 .c12 {
   font-size: 12px;
   font-weight: bold;
@@ -1161,6 +1241,22 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
   cursor: pointer;
 }
 
+.c6:focus {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c6:focus-visible {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: 0;
+}
+
 .c12 {
   font-size: 12px;
   font-weight: bold;
diff --git a/src/_getGlobalFocusStyles.ts b/src/_getGlobalFocusStyles.ts
index ef12d43f3d7..4f74343821e 100644
--- a/src/_getGlobalFocusStyles.ts
+++ b/src/_getGlobalFocusStyles.ts
@@ -2,10 +2,28 @@ import {CSSProperties} from 'react'
 import {css} from 'styled-components'
 import {get} from './constants'
 
-const getGlobalFocusStyles = (outlineOffset?: CSSProperties['outlineOffset']) => css`
+const globalFocusStyle = css`
   box-shadow: none;
   outline: 2px solid ${get('colors.accent.fg')};
-  outline-offset: ${outlineOffset || '2px'};
+`
+
+const getGlobalFocusStyles = (outlineOffset?: CSSProperties['outlineOffset']) => css`
+  /* fallback :focus state */
+  &:focus {
+    ${globalFocusStyle};
+    outline-offset: ${typeof outlineOffset === 'undefined' ? '2px' : outlineOffset};
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    ${globalFocusStyle};
+    outline-offset: ${typeof outlineOffset === 'undefined' ? '2px' : outlineOffset};
+  }
 `
 
 export default getGlobalFocusStyles

From b6ebe9e9f7d247f59e866fad162fab540507538e Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 15:53:55 -0400
Subject: [PATCH 06/12] fixes unintentional laggy focus style update on SubNav

---
 docs/content/SubNav.md                               |  2 +-
 src/SubNav.tsx                                       |  2 +-
 src/__tests__/__snapshots__/SubNavLink.test.tsx.snap | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md
index d674f543b17..50f56913394 100644
--- a/docs/content/SubNav.md
+++ b/docs/content/SubNav.md
@@ -64,7 +64,7 @@ This ensures that the NavLink gets `activeClassName='selected'`
         </ActionList>
       </ActionMenu.Overlay>
     </ActionMenu>
-    <TextInput type="search" icon={SearchIcon} width={320} />
+    <TextInput type="search" leadingVisual={SearchIcon} width={320} />
   </FilteredSearch>
   <SubNav.Links>
     <SubNav.Link href="#home" selected>
diff --git a/src/SubNav.tsx b/src/SubNav.tsx
index 72d31ed7c28..b21f46d362e 100644
--- a/src/SubNav.tsx
+++ b/src/SubNav.tsx
@@ -96,7 +96,7 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
   &:focus {
     text-decoration: none;
     background-color: ${get('colors.canvas.subtle')};
-    transition: 0.2s ease;
+    transition: background-color 0.2s ease;
 
     .SubNav-octicon {
       color: ${get('colors.fg.muted')};
diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index 3abfd7e8c0d..0766b036b9e 100644
--- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -41,8 +41,8 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: #f6f8fa;
-  -webkit-transition: 0.2s ease;
-  transition: 0.2s ease;
+  -webkit-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 
 .c0:hover .SubNav-octicon,
@@ -108,8 +108,8 @@ exports[`SubNav.Link renders consistently 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: #f6f8fa;
-  -webkit-transition: 0.2s ease;
-  transition: 0.2s ease;
+  -webkit-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 
 .c0:hover .SubNav-octicon,
@@ -173,8 +173,8 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: #f6f8fa;
-  -webkit-transition: 0.2s ease;
-  transition: 0.2s ease;
+  -webkit-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 
 .c0:hover .SubNav-octicon,

From 0e1472e2276d468bdfa10d0ae0f5e8673fad1ffd Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 15:55:23 -0400
Subject: [PATCH 07/12] updates focus styles for UnderlineNav

---
 src/UnderlineNav.tsx                          |  5 +-
 .../UnderlineNavLink.test.tsx.snap            | 60 +++++++++++++++++--
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx
index 5a698027f1e..1aef713e197 100644
--- a/src/UnderlineNav.tsx
+++ b/src/UnderlineNav.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
+import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 const ITEM_CLASS = 'UnderlineNav-item'
 const SELECTED_CLASS = 'selected'
@@ -81,7 +82,7 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
     color: ${get('colors.fg.default')};
     text-decoration: none;
     border-bottom-color: ${get('colors.neutral.muted')};
-    transition: 0.2s ease;
+    transition: border-bottom-color 0.2s ease;
 
     .UnderlineNav-octicon {
       color: ${get('colors.fg.muted')};
@@ -97,6 +98,8 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
     }
   }
 
+  ${getGlobalFocusStyles('-8px')};
+
   ${sx};
 `
 
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
index 48067ec4fff..f8273f664d1 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
@@ -19,8 +19,8 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
-  -webkit-transition: 0.2s ease;
-  transition: 0.2s ease;
+  -webkit-transition: border-bottom-color 0.2s ease;
+  transition: border-bottom-color 0.2s ease;
 }
 
 .c0:hover .UnderlineNav-octicon,
@@ -37,6 +37,22 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
   color: #24292f;
 }
 
+.c0:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -8px;
+}
+
+.c0:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -8px;
+}
+
 <div
   activeClassName="selected"
   className="c0 UnderlineNav-item"
@@ -63,8 +79,8 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
-  -webkit-transition: 0.2s ease;
-  transition: 0.2s ease;
+  -webkit-transition: border-bottom-color 0.2s ease;
+  transition: border-bottom-color 0.2s ease;
 }
 
 .c0:hover .UnderlineNav-octicon,
@@ -81,6 +97,22 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
   color: #24292f;
 }
 
+.c0:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -8px;
+}
+
+.c0:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -8px;
+}
+
 <a
   className="c0 UnderlineNav-item"
 />
@@ -105,8 +137,8 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
-  -webkit-transition: 0.2s ease;
-  transition: 0.2s ease;
+  -webkit-transition: border-bottom-color 0.2s ease;
+  transition: border-bottom-color 0.2s ease;
 }
 
 .c0:hover .UnderlineNav-octicon,
@@ -123,6 +155,22 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   color: #24292f;
 }
 
+.c0:focus {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -8px;
+}
+
+.c0:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -8px;
+}
+
 <a
   className="c0 UnderlineNav-item selected"
   selected={true}

From 4abd0d36f7be14c528013241d5f415623c0fffd6 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 16:17:32 -0400
Subject: [PATCH 08/12] DRY button focus styles

---
 src/Button/styles.ts         | 36 +-----------------------------------
 src/Button/types.ts          |  6 +++++-
 src/_getGlobalFocusStyles.ts |  4 ++--
 3 files changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 1417f3cb647..c586faa0d58 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -2,17 +2,6 @@ import {VariantType} from './types'
 import {Theme} from '../ThemeProvider'
 
 export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
-const focusOutlineStyles = {
-  outline: '2px solid',
-  outlineColor: 'accent.fg',
-  outlineOffset: '-2px'
-}
-const fallbackFocus = {
-  ...focusOutlineStyles,
-  ':not(:focus-visible)': {
-    outline: 'solid 1px transparent'
-  }
-}
 
 export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
   const style = {
@@ -23,11 +12,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg'
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         backgroundColor: 'btn.activeBg',
         borderColor: 'btn.activeBorder'
@@ -52,13 +36,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.primary.hoverText',
         backgroundColor: 'btn.primary.hoverBg'
       },
-      // focus must come before :active so that the active box shadow overrides
       '&:focus:not([disabled])': {
-        boxShadow: 'inset 0 0 0 3px',
-        ...fallbackFocus
+        boxShadow: 'inset 0 0 0 3px'
       },
       '&:focus-visible:not([disabled])': {
-        ...focusOutlineStyles,
         boxShadow: 'inset 0 0 0 3px'
       },
       '&:active:not([disabled])': {
@@ -95,11 +76,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
           color: 'btn.danger.hoverText'
         }
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         color: 'btn.danger.selectedText',
         backgroundColor: 'btn.danger.selectedBg',
@@ -134,11 +110,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg'
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         backgroundColor: 'btn.selectedBg'
       },
@@ -168,11 +139,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
           color: 'inherit'
         }
       },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        ...fallbackFocus
-      },
-      '&:focus-visible:not([disabled])': focusOutlineStyles,
       '&:active:not([disabled])': {
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 10c7188bc1a..7568bd3910d 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -2,8 +2,12 @@ import React, {HTMLAttributes, ComponentPropsWithRef} from 'react'
 import styled from 'styled-components'
 import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
+import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 
-export const StyledButton = styled.button<SxProp>(sx)
+export const StyledButton = styled.button<SxProp>`
+  ${getGlobalFocusStyles('-2px')};
+  ${sx};
+`
 
 export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
 
diff --git a/src/_getGlobalFocusStyles.ts b/src/_getGlobalFocusStyles.ts
index 4f74343821e..e3969bdd81d 100644
--- a/src/_getGlobalFocusStyles.ts
+++ b/src/_getGlobalFocusStyles.ts
@@ -9,7 +9,7 @@ const globalFocusStyle = css`
 
 const getGlobalFocusStyles = (outlineOffset?: CSSProperties['outlineOffset']) => css`
   /* fallback :focus state */
-  &:focus {
+  &:focus:not(:disabled) {
     ${globalFocusStyle};
     outline-offset: ${typeof outlineOffset === 'undefined' ? '2px' : outlineOffset};
 
@@ -20,7 +20,7 @@ const getGlobalFocusStyles = (outlineOffset?: CSSProperties['outlineOffset']) =>
   }
 
   /* default focus state */
-  &:focus-visible {
+  &:focus-visible:not(:disabled) {
     ${globalFocusStyle};
     outline-offset: ${typeof outlineOffset === 'undefined' ? '2px' : outlineOffset};
   }

From 8f626c7ca16b7b6030cc699745a27b2de9d0d90d Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 16:19:31 -0400
Subject: [PATCH 09/12] updates snapshots

---
 .../__snapshots__/Pagination.test.tsx.snap    |   6 +-
 .../__snapshots__/ActionMenu.test.tsx.snap    |  32 +--
 .../__snapshots__/Button.test.tsx.snap        | 186 +++++++++---------
 .../__snapshots__/Checkbox.test.tsx.snap      |   6 +-
 .../__snapshots__/CheckboxGroup.test.tsx.snap |   6 +-
 .../CheckboxOrRadioGroup.test.tsx.snap        |   6 +-
 .../__snapshots__/Radio.test.tsx.snap         |   6 +-
 .../__snapshots__/RadioGroup.test.tsx.snap    |   6 +-
 .../__snapshots__/TabNav.test.tsx.snap        |   6 +-
 .../__snapshots__/TextInput.test.tsx.snap     |  96 ++++-----
 .../UnderlineNavLink.test.tsx.snap            |  18 +-
 .../ChoiceFieldset.test.tsx.snap              |  36 ++--
 12 files changed, 208 insertions(+), 202 deletions(-)

diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index 089fa8da7f3..4d8a364a6d6 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -43,17 +43,17 @@ exports[`Pagination renders consistently 1`] = `
   transition-duration: 0.1s;
 }
 
-.c2:focus {
+.c2:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c2:focus:not(:focus-visible) {
+.c2:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c2:focus-visible {
+.c2:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index a73796df9c5..d44220a337a 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -44,6 +44,22 @@ exports[`ActionMenu renders consistently 1`] = `
   box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
+.c1:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c1:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c1:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
 .c1:disabled {
   cursor: default;
   color: #8c959f;
@@ -81,22 +97,6 @@ exports[`ActionMenu renders consistently 1`] = `
   background-color: #f3f4f6;
 }
 
-.c1:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
-.c1:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c1:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
 .c1:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
   border-color: rgba(27,31,36,0.15);
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 132275194b1..f54c410ac25 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -33,6 +33,22 @@ exports[`Button renders consistently 1`] = `
   box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
 .c0:disabled {
   cursor: default;
   color: #8c959f;
@@ -70,22 +86,6 @@ exports[`Button renders consistently 1`] = `
   background-color: #f3f4f6;
 }
 
-.c0:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
-.c0:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
 .c0:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
   border-color: rgba(27,31,36,0.15);
@@ -139,6 +139,22 @@ exports[`Button styles danger button appropriately 1`] = `
   box-shadow: undefined;
 }
 
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
 .c0:disabled {
   cursor: default;
   color: btn.danger.disabledText;
@@ -189,22 +205,6 @@ exports[`Button styles danger button appropriately 1`] = `
   color: btn.danger.hoverText;
 }
 
-.c0:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
-.c0:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
 .c0:active:not([disabled]) {
   color: btn.danger.selectedText;
   background-color: btn.danger.selectedBg;
@@ -270,6 +270,22 @@ exports[`Button styles icon only button to make it a square 1`] = `
   box-shadow: undefined,undefined;
 }
 
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
 .c0:disabled {
   cursor: default;
   color: primer.fg.disabled;
@@ -291,22 +307,6 @@ exports[`Button styles icon only button to make it a square 1`] = `
   background-color: btn.hoverBg;
 }
 
-.c0:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
-.c0:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
 .c0:active:not([disabled]) {
   background-color: btn.activeBg;
   border-color: btn.activeBorder;
@@ -381,6 +381,22 @@ exports[`Button styles invisible button appropriately 1`] = `
   box-shadow: none;
 }
 
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
 .c0:disabled {
   cursor: default;
   color: primer.fg.disabled;
@@ -418,22 +434,6 @@ exports[`Button styles invisible button appropriately 1`] = `
   background-color: btn.hoverBg;
 }
 
-.c0:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
-.c0:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
 .c0:active:not([disabled]) {
   background-color: btn.selectedBg;
 }
@@ -492,6 +492,22 @@ exports[`Button styles outline button appropriately 1`] = `
   background-color: btn.bg;
 }
 
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
 .c0:disabled {
   cursor: default;
   color: btn.outline.disabledText;
@@ -542,22 +558,6 @@ exports[`Button styles outline button appropriately 1`] = `
   color: inherit;
 }
 
-.c0:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
-.c0:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
 .c0:active:not([disabled]) {
   color: btn.outline.selectedText;
   background-color: btn.outline.selectedBg;
@@ -622,6 +622,22 @@ exports[`Button styles primary button appropriately 1`] = `
   box-shadow: undefined;
 }
 
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
 .c0:disabled {
   cursor: default;
   color: btn.primary.disabledText;
@@ -665,19 +681,9 @@ exports[`Button styles primary button appropriately 1`] = `
 
 .c0:focus:not([disabled]) {
   box-shadow: inset 0 0 0 3px;
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
-}
-
-.c0:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
 }
 
 .c0:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: accent.fg;
-  outline-offset: -2px;
   box-shadow: inset 0 0 0 3px;
 }
 
diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 87321f2c6b6..f830ba182ef 100644
--- a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -5,17 +5,17 @@ exports[`Checkbox renders consistently 1`] = `
   cursor: pointer;
 }
 
-.c0:focus {
+.c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c0:focus:not(:focus-visible) {
+.c0:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c0:focus-visible {
+.c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index 30ddc44452d..6b91387659b 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -45,17 +45,17 @@ exports[`CheckboxGroup renders consistently 1`] = `
   cursor: pointer;
 }
 
-.c5:focus {
+.c5:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c5:focus:not(:focus-visible) {
+.c5:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible {
+.c5:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index bcb40cee76e..c7b60faf0b8 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -45,17 +45,17 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   cursor: pointer;
 }
 
-.c5:focus {
+.c5:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c5:focus:not(:focus-visible) {
+.c5:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible {
+.c5:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/__tests__/__snapshots__/Radio.test.tsx.snap
index 7cbba76c9f9..c3482283020 100644
--- a/src/__tests__/__snapshots__/Radio.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -5,17 +5,17 @@ exports[`Radio renders consistently 1`] = `
   cursor: pointer;
 }
 
-.c0:focus {
+.c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c0:focus:not(:focus-visible) {
+.c0:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c0:focus-visible {
+.c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index f60908c0c78..f4e59c352ff 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -45,17 +45,17 @@ exports[`RadioGroup renders consistently 1`] = `
   cursor: pointer;
 }
 
-.c5:focus {
+.c5:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c5:focus:not(:focus-visible) {
+.c5:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible {
+.c5:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
index 97509d2b6d3..b912c785a1a 100644
--- a/src/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -13,17 +13,17 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   border-bottom: 0;
 }
 
-.c0:focus {
+.c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -6px;
 }
 
-.c0:focus:not(:focus-visible) {
+.c0:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c0:focus-visible {
+.c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -6px;
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index b59b25330dc..6cf902b5fd7 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1205,6 +1205,22 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   position: relative;
 }
 
+.c4:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c4:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c4:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
 .c4:disabled {
   cursor: default;
   color: #8c959f;
@@ -1226,22 +1242,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   background-color: #f3f4f6;
 }
 
-.c4:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
-.c4:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
 .c4:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
@@ -1675,6 +1675,22 @@ exports[`TextInput renders trailingAction text button 1`] = `
   position: relative;
 }
 
+.c3:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c3:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c3:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
 .c3:disabled {
   cursor: default;
   color: #8c959f;
@@ -1712,22 +1728,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   background-color: #f3f4f6;
 }
 
-.c3:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
-.c3:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c3:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
 .c3:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
@@ -1915,6 +1915,22 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   position: relative;
 }
 
+.c4:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
+.c4:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c4:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+
 .c4:disabled {
   cursor: default;
   color: #8c959f;
@@ -1952,22 +1968,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   background-color: #f3f4f6;
 }
 
-.c4:focus:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
-.c4:focus:not([disabled]):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not([disabled]) {
-  outline: 2px solid;
-  outline-color: #0969da;
-  outline-offset: -2px;
-}
-
 .c4:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
 }
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
index f8273f664d1..9bf365ebeb1 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
@@ -37,17 +37,17 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
   color: #24292f;
 }
 
-.c0:focus {
+.c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -8px;
 }
 
-.c0:focus:not(:focus-visible) {
+.c0:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c0:focus-visible {
+.c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -8px;
@@ -97,17 +97,17 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
   color: #24292f;
 }
 
-.c0:focus {
+.c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -8px;
 }
 
-.c0:focus:not(:focus-visible) {
+.c0:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c0:focus-visible {
+.c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -8px;
@@ -155,17 +155,17 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   color: #24292f;
 }
 
-.c0:focus {
+.c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -8px;
 }
 
-.c0:focus:not(:focus-visible) {
+.c0:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c0:focus-visible {
+.c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: -8px;
diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
index 5a0e7a270d9..8acc1d06fad 100644
--- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -56,17 +56,17 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
   cursor: not-allowed;
 }
 
-.c6:focus {
+.c6:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c6:focus:not(:focus-visible) {
+.c6:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c6:focus-visible {
+.c6:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
@@ -237,17 +237,17 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
   cursor: pointer;
 }
 
-.c7:focus {
+.c7:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c7:focus:not(:focus-visible) {
+.c7:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c7:focus-visible {
+.c7:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
@@ -443,17 +443,17 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
   cursor: pointer;
 }
 
-.c6:focus {
+.c6:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c6:focus:not(:focus-visible) {
+.c6:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c6:focus-visible {
+.c6:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
@@ -778,17 +778,17 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
   cursor: pointer;
 }
 
-.c5:focus {
+.c5:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c5:focus:not(:focus-visible) {
+.c5:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible {
+.c5:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
@@ -979,17 +979,17 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
   cursor: pointer;
 }
 
-.c6:focus {
+.c6:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid;
   outline-offset: 0;
 }
 
-.c6:focus:not(:focus-visible) {
+.c6:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c6:focus-visible {
+.c6:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid;
   outline-offset: 0;
@@ -1241,17 +1241,17 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
   cursor: pointer;
 }
 
-.c6:focus {
+.c6:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid;
   outline-offset: 0;
 }
 
-.c6:focus:not(:focus-visible) {
+.c6:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c6:focus-visible {
+.c6:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid;
   outline-offset: 0;

From adbc2740c062b5a562c03159c86e51608631faa6 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 16:20:46 -0400
Subject: [PATCH 10/12] adds changeset

---
 .changeset/silent-falcons-exist.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silent-falcons-exist.md

diff --git a/.changeset/silent-falcons-exist.md b/.changeset/silent-falcons-exist.md
new file mode 100644
index 00000000000..aad227a4aa9
--- /dev/null
+++ b/.changeset/silent-falcons-exist.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Finishes updating components with the global focus styles defined in Primer CSS ([this PR](https://github.com/primer/css/pull/1744))

From 0b1b19da56eb5cd9c3cc249f57f1d2fe3195a067 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 16:28:25 -0400
Subject: [PATCH 11/12] fixes type error

---
 src/_TextInputWrapper.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index ed0cb97f050..589d1a5a869 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -196,14 +196,7 @@ const TextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
     props.validationStatus === 'warning' &&
     css`
       border-color: ${get('colors.attention.emphasis')};
-      ${renderFocusStyles(
-        Boolean(props.hasTrailingAction),
-        Boolean(props.isInputFocused),
-        css`
-          border-color: ${get('colors.attention.emphasis')};
-          box-shadow: 0 0 0 3px ${get('colors.attention.muted')};
-        `
-      )}
+      ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
     `}
 
   ${sx};

From d743fad8463f65e97cdcae563ed1490875793c2a Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 28 Apr 2022 16:40:04 -0400
Subject: [PATCH 12/12] revert themePreval snapshot update

---
 src/__tests__/__snapshots__/themePreval.test.ts.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index 74cd2be1a31..40363654676 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`snapshot theme-preval.js 1`] = `
 "// this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2022-04-06 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-03-24 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 module.exports = {
   \\"theme\\": {
     \\"animation\\": {