From 4d44e32d8aacf6244419818734123fd8f217420d Mon Sep 17 00:00:00 2001
From: Scott Benton <scott@scottbenton.dev>
Date: Sun, 29 Oct 2023 23:43:06 -0400
Subject: [PATCH 1/3] fix(focus): Began improving focus indicators - need to
 come back later

---
 src/providers/ThemeProvider/themes/ironsworn-light.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/providers/ThemeProvider/themes/ironsworn-light.ts b/src/providers/ThemeProvider/themes/ironsworn-light.ts
index 8d806218..bd03e2c3 100644
--- a/src/providers/ThemeProvider/themes/ironsworn-light.ts
+++ b/src/providers/ThemeProvider/themes/ironsworn-light.ts
@@ -39,5 +39,14 @@ export const ironswornLightTheme = createTheme({
         },
       },
     },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: {
+          "&.Mui-focusVisible": {
+            outline: `2px solid ${ironswornPink.dark}`,
+          },
+        },
+      },
+    },
   },
 });

From 23ac6afecdf4343421f8ed7efa79e5d2fe0fd3d4 Mon Sep 17 00:00:00 2001
From: Scott Benton <scott@scottbenton.dev>
Date: Tue, 31 Oct 2023 18:06:43 -0400
Subject: [PATCH 2/3] fix(focus styling): Improved focus styling on buttons

---
 .../features/characters/StatComponent.tsx     |  8 -------
 src/components/shared/Layout/Header.tsx       |  6 ++++++
 src/components/shared/Layout/HeaderMenu.tsx   |  1 +
 src/pages/Home/HomePage.tsx                   |  3 +++
 .../ThemeProvider/themes/ironsworn-dark.ts    | 20 ++++++++++++++++++
 .../ThemeProvider/themes/ironsworn-light.ts   | 17 ++++++++++++---
 .../ThemeProvider/themes/starforged-dark.tsx  | 20 ++++++++++++++++++
 .../ThemeProvider/themes/starforged-light.tsx | 21 +++++++++++++++++++
 8 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/src/components/features/characters/StatComponent.tsx b/src/components/features/characters/StatComponent.tsx
index ce9218c8..c968829a 100644
--- a/src/components/features/characters/StatComponent.tsx
+++ b/src/components/features/characters/StatComponent.tsx
@@ -90,14 +90,6 @@ export function StatComponent(props: StatComponentProps) {
                   outlineColor: theme.palette.primary.main,
                   borderColor: theme.palette.primary.main,
                 },
-          "&:focus-visible":
-            updateTrack || disableRoll
-              ? {}
-              : {
-                  outlineWidth: 2,
-                  outlineColor: theme.palette.primary.main,
-                  borderColor: theme.palette.primary.main,
-                },
         }),
 
         ...(Array.isArray(sx) ? sx : [sx]),
diff --git a/src/components/shared/Layout/Header.tsx b/src/components/shared/Layout/Header.tsx
index 05674c40..eb59186b 100644
--- a/src/components/shared/Layout/Header.tsx
+++ b/src/components/shared/Layout/Header.tsx
@@ -67,6 +67,7 @@ export function Header() {
             focusRipple
             LinkComponent={LinkComponent}
             href={"/"}
+            className={"dark-focus-outline"}
             sx={(theme) => ({
               display: "flex",
               alignItems: "center",
@@ -98,6 +99,7 @@ export function Header() {
                   sx={{ display: "inline" }}
                 >
                   <Button
+                    className={"dark-focus-outline"}
                     color={"inherit"}
                     component={Link}
                     to={basePaths[BASE_ROUTES.CHARACTER]}
@@ -111,6 +113,7 @@ export function Header() {
                     Characters
                   </Button>
                   <Button
+                    className={"dark-focus-outline"}
                     color={"inherit"}
                     component={Link}
                     to={basePaths[BASE_ROUTES.CAMPAIGN]}
@@ -124,6 +127,7 @@ export function Header() {
                     Campaigns
                   </Button>
                   <Button
+                    className={"dark-focus-outline"}
                     color={"inherit"}
                     component={Link}
                     to={basePaths[BASE_ROUTES.WORLD]}
@@ -146,6 +150,7 @@ export function Header() {
                 color={"inherit"}
                 component={Link}
                 to={basePaths[BASE_ROUTES.LOGIN]}
+                className={"dark-focus-outline"}
               >
                 Login
               </Button>
@@ -154,6 +159,7 @@ export function Header() {
                 color={"primary"}
                 component={Link}
                 to={basePaths[BASE_ROUTES.SIGNUP]}
+                className={"dark-focus-outline"}
               >
                 Create Account
               </Button>
diff --git a/src/components/shared/Layout/HeaderMenu.tsx b/src/components/shared/Layout/HeaderMenu.tsx
index 15b17df0..c5c18f05 100644
--- a/src/components/shared/Layout/HeaderMenu.tsx
+++ b/src/components/shared/Layout/HeaderMenu.tsx
@@ -43,6 +43,7 @@ export function HeaderMenu() {
     <>
       <ButtonBase
         sx={{ borderRadius: "100%", ml: 2 }}
+        className={"dark-focus-outline"}
         aria-label={"User Settings Menu Toggle"}
         focusRipple
         ref={anchorRef}
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index 894a0512..f9837a0e 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -54,6 +54,7 @@ export function HomePage() {
           </Typography>
           {isLoggedIn ? (
             <Button
+              className={"dark-focus-outline"}
               color={"primary"}
               variant={"contained"}
               component={Link}
@@ -65,6 +66,7 @@ export function HomePage() {
           ) : (
             <Stack direction={"row"} spacing={1} mt={4}>
               <Button
+                className={"dark-focus-outline"}
                 color={"inherit"}
                 component={Link}
                 to={basePaths[BASE_ROUTES.LOGIN]}
@@ -72,6 +74,7 @@ export function HomePage() {
                 Login
               </Button>
               <Button
+                className={"dark-focus-outline"}
                 variant={"contained"}
                 color={"primary"}
                 component={Link}
diff --git a/src/providers/ThemeProvider/themes/ironsworn-dark.ts b/src/providers/ThemeProvider/themes/ironsworn-dark.ts
index 4e344fa5..8e1b5976 100644
--- a/src/providers/ThemeProvider/themes/ironsworn-dark.ts
+++ b/src/providers/ThemeProvider/themes/ironsworn-dark.ts
@@ -55,5 +55,25 @@ export const ironswornDarkTheme = createTheme({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          return {
+            "&.Mui-focusVisible": {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+            },
+          };
+        },
+      },
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          "&.Mui-focusVisible": {
+            boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+          },
+        }),
+      },
+    },
   },
 });
diff --git a/src/providers/ThemeProvider/themes/ironsworn-light.ts b/src/providers/ThemeProvider/themes/ironsworn-light.ts
index bd03e2c3..9b57299e 100644
--- a/src/providers/ThemeProvider/themes/ironsworn-light.ts
+++ b/src/providers/ThemeProvider/themes/ironsworn-light.ts
@@ -39,13 +39,24 @@ export const ironswornLightTheme = createTheme({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          return {
+            "&.Mui-focusVisible": {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+            },
+          };
+        },
+      },
+    },
     MuiButtonBase: {
       styleOverrides: {
-        root: {
+        root: ({ ownerState, theme }) => ({
           "&.Mui-focusVisible": {
-            outline: `2px solid ${ironswornPink.dark}`,
+            boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
           },
-        },
+        }),
       },
     },
   },
diff --git a/src/providers/ThemeProvider/themes/starforged-dark.tsx b/src/providers/ThemeProvider/themes/starforged-dark.tsx
index e4004c46..d20a14bb 100644
--- a/src/providers/ThemeProvider/themes/starforged-dark.tsx
+++ b/src/providers/ThemeProvider/themes/starforged-dark.tsx
@@ -70,5 +70,25 @@ export const starforgedDarkTheme = createTheme({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          return {
+            "&.Mui-focusVisible": {
+              boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+            },
+          };
+        },
+      },
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          "&.Mui-focusVisible": {
+            boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+          },
+        }),
+      },
+    },
   },
 });
diff --git a/src/providers/ThemeProvider/themes/starforged-light.tsx b/src/providers/ThemeProvider/themes/starforged-light.tsx
index b8889184..f00561d4 100644
--- a/src/providers/ThemeProvider/themes/starforged-light.tsx
+++ b/src/providers/ThemeProvider/themes/starforged-light.tsx
@@ -4,6 +4,7 @@ import { baseFontFamilies, sharedStatusColors } from "./constants-shared";
 import { starforgedGold, starforgedGrey } from "./constants-starforged";
 import { HexboxUnchecked } from "assets/HexboxUnchecked";
 import { HexboxChecked } from "assets/HexboxChecked";
+import { ironswornPink } from "./constants-ironsworn";
 
 export const starforgedLightTheme = createTheme({
   palette: {
@@ -54,5 +55,25 @@ export const starforgedLightTheme = createTheme({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          return {
+            "&.Mui-focusVisible": {
+              boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+            },
+          };
+        },
+      },
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          "&.Mui-focusVisible": {
+            boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+          },
+        }),
+      },
+    },
   },
 });

From fb2f1932cce72abc837eb5cb4a80ecadde232a44 Mon Sep 17 00:00:00 2001
From: Scott Benton <scott@scottbenton.dev>
Date: Tue, 31 Oct 2023 21:02:53 -0400
Subject: [PATCH 3/3] fix(focus indicators): Added more accessible focus
 indicators to all buttons

---
 CHANGELOG.MD                                           |  4 ++++
 src/providers/ThemeProvider/themes/ironsworn-dark.ts   |  4 ++--
 src/providers/ThemeProvider/themes/ironsworn-light.ts  |  6 ++++++
 src/providers/ThemeProvider/themes/starforged-dark.tsx |  4 ++--
 .../ThemeProvider/themes/starforged-light.tsx          | 10 ++++++++--
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 904addc3..ec23928d 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -8,9 +8,13 @@
 
 ### Accessibility
 
+- Improved tab focus indicators
+
 ### Bug Fixes
 
 - Fixed Planet Class not being properly set when creating new planets
+- Fixed custom move and custom oracle ids not being created properly
+- Fixed action rolls being able to go over a 10 on the d6.
 
 ## 2.0.0
 
diff --git a/src/providers/ThemeProvider/themes/ironsworn-dark.ts b/src/providers/ThemeProvider/themes/ironsworn-dark.ts
index 8e1b5976..7797fd05 100644
--- a/src/providers/ThemeProvider/themes/ironsworn-dark.ts
+++ b/src/providers/ThemeProvider/themes/ironsworn-dark.ts
@@ -60,7 +60,7 @@ export const ironswornDarkTheme = createTheme({
         root: ({ ownerState, theme }) => {
           return {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
             },
           };
         },
@@ -70,7 +70,7 @@ export const ironswornDarkTheme = createTheme({
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
           "&.Mui-focusVisible": {
-            boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+            boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
           },
         }),
       },
diff --git a/src/providers/ThemeProvider/themes/ironsworn-light.ts b/src/providers/ThemeProvider/themes/ironsworn-light.ts
index 9b57299e..b0a7477e 100644
--- a/src/providers/ThemeProvider/themes/ironsworn-light.ts
+++ b/src/providers/ThemeProvider/themes/ironsworn-light.ts
@@ -45,6 +45,9 @@ export const ironswornLightTheme = createTheme({
           return {
             "&.Mui-focusVisible": {
               boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+              "&.dark-focus-outline": {
+                boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+              },
             },
           };
         },
@@ -55,6 +58,9 @@ export const ironswornLightTheme = createTheme({
         root: ({ ownerState, theme }) => ({
           "&.Mui-focusVisible": {
             boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+            "&.dark-focus-outline": {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+            },
           },
         }),
       },
diff --git a/src/providers/ThemeProvider/themes/starforged-dark.tsx b/src/providers/ThemeProvider/themes/starforged-dark.tsx
index d20a14bb..40022faa 100644
--- a/src/providers/ThemeProvider/themes/starforged-dark.tsx
+++ b/src/providers/ThemeProvider/themes/starforged-dark.tsx
@@ -75,7 +75,7 @@ export const starforgedDarkTheme = createTheme({
         root: ({ ownerState, theme }) => {
           return {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
             },
           };
         },
@@ -85,7 +85,7 @@ export const starforgedDarkTheme = createTheme({
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
           "&.Mui-focusVisible": {
-            boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+            boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
           },
         }),
       },
diff --git a/src/providers/ThemeProvider/themes/starforged-light.tsx b/src/providers/ThemeProvider/themes/starforged-light.tsx
index f00561d4..3b49fe0e 100644
--- a/src/providers/ThemeProvider/themes/starforged-light.tsx
+++ b/src/providers/ThemeProvider/themes/starforged-light.tsx
@@ -60,7 +60,10 @@ export const starforgedLightTheme = createTheme({
         root: ({ ownerState, theme }) => {
           return {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+              "&.dark-focus-outline": {
+                boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+              },
             },
           };
         },
@@ -70,7 +73,10 @@ export const starforgedLightTheme = createTheme({
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
           "&.Mui-focusVisible": {
-            boxShadow: `inset 0 0 0 2px ${sharedStatusColors.error.main}, 0 0 0 2px ${sharedStatusColors.error.main}`,
+            boxShadow: `inset 0 0 0 2px ${theme.palette.info.main}, 0 0 0 2px ${theme.palette.info.main}`,
+            "&.dark-focus-outline": {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+            },
           },
         }),
       },