Accessibility issues resolved

package.json

@@ -66,7 +66,7 @@
     "@storybook/react": "^8.4.4",
     "@storybook/react-webpack5": "^8.4.4",
     "@storybook/test": "^8.4.4",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.17.6",

src/components/controls/ScrollableImages.tsx

@@ -169,6 +169,7 @@ const ScrollableImages = ({
         >
           {renderButtons && (
             <Button
+              aria-label="Previous Image"
               onClick={handlePrev}
               size="small"
               sx={{ minWidth: 36, width: 36, height: 36 }}
@@ -220,6 +221,7 @@ const ScrollableImages = ({
 
           {renderButtons && (
             <Button
+              aria-label="Next Image"
               onClick={handleNext}
               size="small"
               sx={{ minWidth: 36, width: 36, height: 36 }}
@@ -232,6 +234,7 @@ const ScrollableImages = ({
         {renderNumbers && (
           <Box sx={{ display: "flex" }}>
             <Box
+              aria-label="Total Images Numeration"
               data-testid="numeration"
               component="input"
               type="number"

src/components/controls/User.tsx

@@ -136,7 +136,7 @@ const User = ({
           onClick={handleLogin}
           startIcon={<MdLogin />}
           sx={{
-            backgroundColor: theme.palette.primary.light,
+            backgroundColor: theme.palette.primary.main,
             color: theme.palette.primary.contrastText,
           }}
         >

src/components/helpers/jsonforms/components/DataBox.tsx

@@ -19,25 +19,28 @@ export const DataOrEmpty = ({ data }: { data?: string | null }) =>
 const DataBox = ({ label, data }: DataBoxProps) => (
   <Box className="data-box">
     <Stack direction="column">
-      <Box className="data-box-label">
-        <Typography
-          component="dt"
-          variant="h6"
-          sx={{
-            fontWeight: "bold",
-            textTransform: "capitalize",
-            fontSize: "smaller",
-          }}
-        >
-          {label}
-        </Typography>
-      </Box>
+      {/* tag needed for JSON Forms accessibility check */}
+      <dl>
+        <Box className="data-box-label">
+          <Typography
+            component="dt"
+            variant="h6"
+            sx={{
+              fontWeight: "bold",
+              textTransform: "capitalize",
+              fontSize: "smaller",
+            }}
+          >
+            {label}
+          </Typography>
+        </Box>
 
-      <Box className="data-box-data">
-        <Typography component="dd">
-          <DataOrEmpty data={data} />
-        </Typography>
-      </Box>
+        <Box className="data-box-data">
+          <Typography component="dd">
+            <DataOrEmpty data={data} />
+          </Typography>
+        </Box>
+      </dl>
     </Stack>
   </Box>
 );

src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx

@@ -6,7 +6,6 @@ import {
   schemaMatches,
   ControlProps,
 } from "@jsonforms/core";
-
 import { DataBox } from "../components/DataBox";
 
 const TextDateTimeControlTester = rankWith(

src/components/navigation/Footer.tsx

@@ -88,7 +88,7 @@ const BarStyled = styled(Bar)<BarSlotsProps>(({ theme }) => ({
   position: "relative",
   bottom: 0,
   marginTop: "auto",
-  backgroundColor: theme.vars.palette.primary.light,
+  backgroundColor: theme.vars.palette.primary.main,
 }));
 
 interface FooterProps extends BarSlotsProps {

src/components/navigation/Navbar.test.tsx

@@ -9,15 +9,15 @@ import { MemoryRouter, Link } from "react-router-dom";
 describe("Navbar", () => {
   it("should render", async () => {
     renderWithProviders(<Navbar />);
-    expect(await screen.findByRole("banner")).toBeInTheDocument();
+    expect(await screen.findByTestId("navbar")).toBeInTheDocument();
   });
 
   it("should render with styles", async () => {
     const borderStyle = "1px solid orange";
     renderWithProviders(<Navbar style={{ border: borderStyle }} />);
 
     const headerComputedStyle = window.getComputedStyle(
-      await screen.findByRole("banner"),
+      await screen.findByTestId("navbar"),
     );
 
     // check new style is set

src/components/navigation/Navbar.tsx

@@ -152,7 +152,7 @@ const Navbar = ({
 }: NavbarProps) => {
   return (
     <BarStyled
-      role="banner"
+      data-testid="navbar"
       {...props}
       leftSlot={
         <>

src/themes/DiamondTheme.old

@@ -0,0 +1,101 @@
+import { createTheme, Theme } from "@mui/material/styles";
+
+import { mergeThemeOptions } from "./ThemeManager";
+
+import logoImageDark from "../public/diamond/logo-dark.svg";
+import logoImageLight from "../public/diamond/logo-light.svg";
+import logoShort from "../public/diamond/logo-short.svg";
+
+const dlsLogoBlue = "#202740";
+const dlsLogoYellow = "#facf07";
+
+const DiamondThemeOptions = mergeThemeOptions({
+  logos: {
+    normal: {
+      src: logoImageDark, // Use the dark image for light backgrounds
+      srcDark: logoImageLight, // Use the light image for dark backgrounds
+      alt: "Diamond Light Source Logo",
+      width: "100",
+    },
+    short: {
+      src: logoShort,
+      alt: "Diamond Light Source Logo",
+      width: "35",
+    },
+  },
+  colorSchemes: {
+    // https://zenoo.github.io/mui-theme-creator/
+    light: {
+      palette: {
+        primary: {
+          main: dlsLogoBlue,
+          light: "#4C5266", // dark grey
+          dark: "#161B2C", // dark blue
+          contrastText: "#ffffff", // white
+        },
+        secondary: {
+          main: dlsLogoYellow,
+          light: "#FBD838", // light yellow
+          dark: "#AF9004", // dark yellow
+          contrastText: "#000000", // black
+        },
+        text: {
+          secondary: "#161B2C",
+        },
+      },
+    },
+    dark: {
+      palette: {
+        primary: {
+          main: "#6175bd", //lightened version of {dlsLogoBlue}
+          light: "#8090CA", // lighter blue
+          dark: "#435184", // mid blue
+          contrastText: "#ffffff", // white
+        },
+        secondary: {
+          main: dlsLogoYellow,
+          light: "#FBD838", // light yellow
+          dark: "#AF9004", // dark yellow
+          contrastText: "#000000", // black
+        },
+        text: {
+          secondary: "#8090CA",
+        },
+      },
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: ({ theme }: { theme: Theme }) => ({
+          textTransform: "none",
+          "&.MuiButton-contained": {},
+          "&.default": {
+            color: theme.palette.primary.contrastText,
+            backgroundColor: theme.palette.primary.dark,
+            "&:hover": {
+              backgroundImage: "linear-gradient(rgb(0 0 0/30%) 0 0)",
+              "&:disabled": {
+                backgroundColor: theme.palette.primary.light,
+              },
+            },
+          },
+          "&.onBlue": {
+            color: theme.palette.secondary.light,
+            borderColor: theme.palette.secondary.light,
+            border: "1px solid",
+            fontSize: "0.875rem",
+            "&:hover": {
+              color: theme.palette.primary.dark,
+              backgroundColor: theme.palette.secondary.light,
+            },
+          },
+        }),
+      },
+    },
+  },
+});
+
+const DiamondTheme: Theme = createTheme(DiamondThemeOptions);
+
+export { DiamondTheme, DiamondThemeOptions };

src/themes/DiamondTheme.ts

@@ -3,7 +3,6 @@ import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";
 
-import logoImageDark from "../public/diamond/logo-dark.svg";
 import logoImageLight from "../public/diamond/logo-light.svg";
 import logoShort from "../public/diamond/logo-short.svg";
 
@@ -13,8 +12,8 @@ const dlsLogoYellow = "#facf07";
 const DiamondThemeOptions = mergeThemeOptions({
   logos: {
     normal: {
-      src: logoImageDark, // Use the dark image for light backgrounds
-      srcDark: logoImageLight, // Use the light image for dark backgrounds
+      src: logoImageLight,
+      srcDark: logoImageLight,
       alt: "Diamond Light Source Logo",
       width: "100",
     },
@@ -48,8 +47,8 @@ const DiamondThemeOptions = mergeThemeOptions({
     dark: {
       palette: {
         primary: {
-          main: "#6175bd", //lightened version of {dlsLogoBlue}
-          light: "#8090CA", // lighter blue
+          main: dlsLogoBlue,
+          light: "#3b4c8c", // lighter blue
           dark: "#435184", // mid blue
           contrastText: "#ffffff", // white
         },

src/themes/GenericTheme.ts

@@ -1,4 +1,3 @@
-import type {} from "@mui/material/themeCssVarsAugmentation";
 import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";