Merge pull request #274 from scottbenton/fix/improve-focus-active-ind…

…icators Fix/improve focus active indicators
scottbenton · Nov 1, 2023 · 958ad3c · 958ad3c
2 parents dbe2ffd + fb2f193
commit 958ad3c
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 8 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/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
@@ -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
@@ -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
@@ -54,6 +54,7 @@ export function HomePage() {
           </Typography>
           {isLoggedIn ? (
             <Button
+              className={"dark-focus-outline"}
               color={"primary"}
               variant={"contained"}
               component={Link}
@@ -65,13 +66,15 @@ export function HomePage() {
           ) : (
             <Stack direction={"row"} spacing={1} mt={4}>
               <Button
+                className={"dark-focus-outline"}
                 color={"inherit"}
                 component={Link}
                 to={basePaths[BASE_ROUTES.LOGIN]}
               >
                 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
@@ -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.light}, 0 0 0 2px ${theme.palette.info.light}`,
+            },
+          };
+        },
+      },
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          "&.Mui-focusVisible": {
+            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
@@ -39,5 +39,31 @@ 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}`,
+              "&.dark-focus-outline": {
+                boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+              },
+            },
+          };
+        },
+      },
+    },
+    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}`,
+            "&.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
@@ -70,5 +70,25 @@ export const starforgedDarkTheme = createTheme({
         },
       },
     },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          return {
+            "&.Mui-focusVisible": {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+            },
+          };
+        },
+      },
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          "&.Mui-focusVisible": {
+            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
@@ -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,31 @@ export const starforgedLightTheme = 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}`,
+              "&.dark-focus-outline": {
+                boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+              },
+            },
+          };
+        },
+      },
+    },
+    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}`,
+            "&.dark-focus-outline": {
+              boxShadow: `inset 0 0 0 2px ${theme.palette.info.light}, 0 0 0 2px ${theme.palette.info.light}`,
+            },
+          },
+        }),
+      },
+    },
   },
 });