fix: add focus styling to checkboxes

Parkreiner · Parkreiner · commit 2ca02980fb38 · 2023-11-09T19:06:29.000Z
diff --git 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],
           },
