From 2ca02980fb386ceff1fc78468c829ad7c7073c24 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 9 Nov 2023 19:06:29 +0000
Subject: [PATCH 1/4] fix: add focus styling to checkboxes

---
 site/src/theme/theme.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 8747ec39d0d0f..66ce0b69a6701 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -427,6 +427,26 @@ dark = createTheme(dark, {
     MuiCheckbox: {
       styleOverrides: {
         root: {
+          /**
+           * Adds focus styling to checkboxes (which doesn't exist normally, for
+           * some reason?).
+           *
+           * The checkbox component is a root span with a checkbox input inside
+           * it. MUI does not allow you to use selectors like (& input) to
+           * target the inner checkbox (even though you can use & td to style
+           * tables). Tried every combination of selector possible (including
+           * lots of !important), and the main issue seems to be that the
+           * styling just never gets processed for it to get injected into the
+           * CSSOM.
+           *
+           * Had to settle for adding styling to the span itself (which does
+           * make the styling more obvious, even if there's not much room for
+           * customization).
+           */
+          "&.Mui-focusVisible": {
+            outline: `10px auto ${colors.blue[7]}`,
+          },
+
           "&.Mui-disabled": {
             color: colors.gray[11],
           },

From 6c2cb3fc81ef4d93381ded2d32cac0b496fce396 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 9 Nov 2023 19:07:05 +0000
Subject: [PATCH 2/4] fix: add focus styling to icon buttons

---
 site/src/theme/theme.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 66ce0b69a6701..aba2288c8bd3b 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -516,5 +516,15 @@ dark = createTheme(dark, {
         },
       },
     },
+
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          "&.Mui-focusVisible": {
+            outline: `10px auto ${colors.blue[7]}`,
+          },
+        },
+      },
+    },
   },
 } as ThemeOptions);

From d6bf40376fd2c913486d94dccfc902c55d70d704 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 9 Nov 2023 19:07:35 +0000
Subject: [PATCH 3/4] fix: add focus styling to switches

---
 site/src/theme/theme.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index aba2288c8bd3b..4f02f00bc7eb7 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -454,8 +454,13 @@ dark = createTheme(dark, {
       },
     },
     MuiSwitch: {
-      defaultProps: {
-        color: "primary",
+      defaultProps: { color: "primary" },
+      styleOverrides: {
+        root: {
+          ".Mui-focusVisible .MuiSwitch-thumb": {
+            outline: `10px auto ${colors.blue[7]}`,
+          },
+        },
       },
     },
     MuiAutocomplete: {

From 97c2bbd08b4b6e5b10c2168dc72a1c6e2f937692 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 9 Nov 2023 19:53:29 +0000
Subject: [PATCH 4/4] fix: swap outlines for box-shadows for more styling
 control

---
 site/src/theme/theme.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 4f02f00bc7eb7..a17c508e0b4dc 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -444,7 +444,7 @@ dark = createTheme(dark, {
            * customization).
            */
           "&.Mui-focusVisible": {
-            outline: `10px auto ${colors.blue[7]}`,
+            boxShadow: `0 0 0 2px ${colors.blue[7]}`,
           },
 
           "&.Mui-disabled": {
@@ -458,7 +458,9 @@ dark = createTheme(dark, {
       styleOverrides: {
         root: {
           ".Mui-focusVisible .MuiSwitch-thumb": {
-            outline: `10px auto ${colors.blue[7]}`,
+            // Had to thicken outline to make sure that the focus color didn't
+            // bleed into the thumb and was still easily-visible
+            boxShadow: `0 0 0 3px ${colors.blue[7]}`,
           },
         },
       },
@@ -526,7 +528,7 @@ dark = createTheme(dark, {
       styleOverrides: {
         root: {
           "&.Mui-focusVisible": {
-            outline: `10px auto ${colors.blue[7]}`,
+            boxShadow: `0 0 0 2px ${colors.blue[7]}`,
           },
         },
       },