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] 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}`,
+            },
           },
         }),
       },