fix(focus indicators): Added more accessible focus indicators to all …

…buttons
scottbenton · Nov 1, 2023 · fb2f193 · fb2f193
1 parent b7a6979
commit fb2f193
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}`,
+            },
           },
         }),
       },