Accessibility issues resolved (#113)

* RA - changed main colour code to that of the dark hex for colour accessibiblity in dark mode

* RA dark theme main colour now the same as light theme dark colour. dark theme dark colour made darker to pass accessibility with white text. old diamond theme kept. breadcrumbs and user components updated to use dark colouring

* RA lighter blue changed so that breadcrumb has better contrast in light mode

* RA prettier fix

* RA - resolved accessibility errors

* RA resolving test fails

* RA resolving prettier CI errors

* RA removed unused import from themeing files

* RA reverting type import to resolve pipeline

* RA created new DataBoxList wrapper component in order for dl tags to wrap all content inside DataBox and not each databox

* RA lint fix ran

* RA reverting DataBoxList changes

Author: RhysMAdey

package.json

@@ -65,7 +65,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/node": "^20.19.21",
     "@types/react": "^18.3.12",

pnpm-lock.yaml

@@ -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/ScrollableImages.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/controls/User.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/components/DataBox.tsx

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

src/components/helpers/jsonforms/controls/TextDateTimeControl.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/Footer.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.test.tsx

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

src/components/navigation/Navbar.tsx

@@ -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 };