From 648c314349ef42c466a09b32a25b949babb8ef5a Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Wed, 15 Oct 2025 16:11:52 +0100
Subject: [PATCH 01/12] RA - changed main colour code to that of the dark hex
 for colour accessibiblity in dark mode

---
 src/components/navigation/Footer.tsx | 2 +-
 src/themes/DiamondTheme.ts           | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/navigation/Footer.tsx b/src/components/navigation/Footer.tsx
index 8aa3832..d1229e8 100644
--- a/src/components/navigation/Footer.tsx
+++ b/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 {
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index c2c16ad..6c64fde 100644
--- a/src/themes/DiamondTheme.ts
+++ b/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,7 +12,7 @@ const dlsLogoYellow = "#facf07";
 const DiamondThemeOptions = mergeThemeOptions({
   logos: {
     normal: {
-      src: logoImageDark, // Use the dark image for light backgrounds
+      src: logoImageLight,
       srcDark: logoImageLight, // Use the light image for dark backgrounds
       alt: "Diamond Light Source Logo",
       width: "100",
@@ -48,9 +47,9 @@ const DiamondThemeOptions = mergeThemeOptions({
     dark: {
       palette: {
         primary: {
-          main: "#6175bd", //lightened version of {dlsLogoBlue}
+          main: "#435184", // mid blue
           light: "#8090CA", // lighter blue
-          dark: "#435184", // mid blue
+          dark: "#6175bd",
           contrastText: "#ffffff", // white
         },
         secondary: {

From 7ba659950e950c10c83aaa3126fa317f9ee7b0a7 Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Thu, 16 Oct 2025 11:52:52 +0100
Subject: [PATCH 02/12] 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

---
 src/components/controls/User.tsx          |   2 +-
 src/components/navigation/Breadcrumbs.tsx |   6 +-
 src/themes/DiamondTheme.old               | 102 ++++++++++++++++++++++
 src/themes/DiamondTheme.ts                |   6 +-
 4 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 src/themes/DiamondTheme.old

diff --git a/src/components/controls/User.tsx b/src/components/controls/User.tsx
index 270d613..77cd4cd 100644
--- a/src/components/controls/User.tsx
+++ b/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,
           }}
         >
diff --git a/src/components/navigation/Breadcrumbs.tsx b/src/components/navigation/Breadcrumbs.tsx
index 22c812c..74ea490 100644
--- a/src/components/navigation/Breadcrumbs.tsx
+++ b/src/components/navigation/Breadcrumbs.tsx
@@ -22,7 +22,7 @@ interface BreadcrumbsProps extends BarProps {
  * @param path A single string path, an array of string parts or an array of CustomLink parts
  */
 export function getCrumbs(
-  path: string | string[] | CustomLink[],
+  path: string | string[] | CustomLink[]
 ): CustomLink[] {
   if (typeof path === "string") {
     path = path.split("/");
@@ -53,14 +53,14 @@ export function getCrumbs(
 }
 
 const BarStyled = styled(Bar)<BarProps>(({ theme }) => ({
-  backgroundColor: theme.vars.palette.primary.light,
+  backgroundColor: theme.vars.palette.primary.dark,
 }));
 
 const Mui_BreadcrumbsStyled = styled(Mui_Breadcrumbs)<Mui_BreadcrumbsProps>(
   ({ theme }) => ({
     color: theme.vars.palette.primary.contrastText,
     padding: 0,
-  }),
+  })
 );
 
 const Breadcrumbs = ({
diff --git a/src/themes/DiamondTheme.old b/src/themes/DiamondTheme.old
new file mode 100644
index 0000000..c2c16ad
--- /dev/null
+++ b/src/themes/DiamondTheme.old
@@ -0,0 +1,102 @@
+import type {} from "@mui/material/themeCssVarsAugmentation";
+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 };
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index 6c64fde..b781270 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -13,7 +13,7 @@ const DiamondThemeOptions = mergeThemeOptions({
   logos: {
     normal: {
       src: logoImageLight,
-      srcDark: logoImageLight, // Use the light image for dark backgrounds
+      srcDark: logoImageLight,
       alt: "Diamond Light Source Logo",
       width: "100",
     },
@@ -47,9 +47,9 @@ const DiamondThemeOptions = mergeThemeOptions({
     dark: {
       palette: {
         primary: {
-          main: "#435184", // mid blue
+          main: "#202740", // dark blue
           light: "#8090CA", // lighter blue
-          dark: "#6175bd",
+          dark: "#435184", // mid blue
           contrastText: "#ffffff", // white
         },
         secondary: {

From f70a7f05649c137c478f166b9037035735a2ec23 Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Thu, 16 Oct 2025 12:15:33 +0100
Subject: [PATCH 03/12] RA lighter blue changed so that breadcrumb has better
 contrast in light mode

---
 src/components/navigation/Breadcrumbs.tsx | 2 +-
 src/themes/DiamondTheme.ts                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/Breadcrumbs.tsx b/src/components/navigation/Breadcrumbs.tsx
index 74ea490..383ae6f 100644
--- a/src/components/navigation/Breadcrumbs.tsx
+++ b/src/components/navigation/Breadcrumbs.tsx
@@ -53,7 +53,7 @@ export function getCrumbs(
 }
 
 const BarStyled = styled(Bar)<BarProps>(({ theme }) => ({
-  backgroundColor: theme.vars.palette.primary.dark,
+  backgroundColor: theme.vars.palette.primary.light,
 }));
 
 const Mui_BreadcrumbsStyled = styled(Mui_Breadcrumbs)<Mui_BreadcrumbsProps>(
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index b781270..be9ebc5 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -47,8 +47,8 @@ const DiamondThemeOptions = mergeThemeOptions({
     dark: {
       palette: {
         primary: {
-          main: "#202740", // dark blue
-          light: "#8090CA", // lighter blue
+          main: dlsLogoBlue,
+          light: "#3b4c8c", // lighter blue
           dark: "#435184", // mid blue
           contrastText: "#ffffff", // white
         },

From f31c698930317ebedf0bbb3a7cb763d9bf93e397 Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Thu, 16 Oct 2025 12:20:58 +0100
Subject: [PATCH 04/12] RA prettier fix

---
 src/components/navigation/Breadcrumbs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/Breadcrumbs.tsx b/src/components/navigation/Breadcrumbs.tsx
index 383ae6f..22c812c 100644
--- a/src/components/navigation/Breadcrumbs.tsx
+++ b/src/components/navigation/Breadcrumbs.tsx
@@ -22,7 +22,7 @@ interface BreadcrumbsProps extends BarProps {
  * @param path A single string path, an array of string parts or an array of CustomLink parts
  */
 export function getCrumbs(
-  path: string | string[] | CustomLink[]
+  path: string | string[] | CustomLink[],
 ): CustomLink[] {
   if (typeof path === "string") {
     path = path.split("/");
@@ -60,7 +60,7 @@ const Mui_BreadcrumbsStyled = styled(Mui_Breadcrumbs)<Mui_BreadcrumbsProps>(
   ({ theme }) => ({
     color: theme.vars.palette.primary.contrastText,
     padding: 0,
-  })
+  }),
 );
 
 const Breadcrumbs = ({

From 71c70f9def6bffc2cfe05a7d2d014ad372d2984d Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Mon, 20 Oct 2025 13:52:13 +0100
Subject: [PATCH 05/12] RA - resolved accessibility errors

---
 src/components/controls/ScrollableImages.tsx  |  3 ++
 .../helpers/jsonforms/components/DataBox.tsx  | 39 ++++++++++---------
 src/components/navigation/Navbar.tsx          |  1 -
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/controls/ScrollableImages.tsx b/src/components/controls/ScrollableImages.tsx
index a35af17..2992336 100644
--- a/src/components/controls/ScrollableImages.tsx
+++ b/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"
diff --git a/src/components/helpers/jsonforms/components/DataBox.tsx b/src/components/helpers/jsonforms/components/DataBox.tsx
index 5dd6a76..a9b2bb8 100644
--- a/src/components/helpers/jsonforms/components/DataBox.tsx
+++ b/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>
 );
diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx
index adad9e0..594e310 100644
--- a/src/components/navigation/Navbar.tsx
+++ b/src/components/navigation/Navbar.tsx
@@ -152,7 +152,6 @@ const Navbar = ({
 }: NavbarProps) => {
   return (
     <BarStyled
-      role="banner"
       {...props}
       leftSlot={
         <>

From 3f14e1fceed6987cc32b4c4ac60409ef144b5fb0 Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Mon, 20 Oct 2025 14:09:21 +0100
Subject: [PATCH 06/12] RA resolving test fails

---
 src/components/navigation/Navbar.test.tsx | 40 +++++++++++------------
 src/components/navigation/Navbar.tsx      |  1 +
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/navigation/Navbar.test.tsx b/src/components/navigation/Navbar.test.tsx
index d62f61a..0d47ff8 100644
--- a/src/components/navigation/Navbar.test.tsx
+++ b/src/components/navigation/Navbar.test.tsx
@@ -9,7 +9,7 @@ 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 () => {
@@ -17,7 +17,7 @@ describe("Navbar", () => {
     renderWithProviders(<Navbar style={{ border: borderStyle }} />);
 
     const headerComputedStyle = window.getComputedStyle(
-      await screen.findByRole("banner"),
+      await screen.findByTestId("navbar")
     );
 
     // check new style is set
@@ -42,10 +42,10 @@ describe("Navbar Links", () => {
     renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
-      </NavLinks>,
+      </NavLinks>
     );
     expect(
-      screen.getByRole("button", { name: /open menu/i }),
+      screen.getByRole("button", { name: /open menu/i })
     ).toBeInTheDocument();
   });
 
@@ -54,7 +54,7 @@ describe("Navbar Links", () => {
     renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
-      </NavLinks>,
+      </NavLinks>
     );
     const menu = screen.getByRole("button", { name: /open menu/i });
     fireEvent.click(menu);
@@ -67,7 +67,7 @@ describe("Navbar Links", () => {
     renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
-      </NavLinks>,
+      </NavLinks>
     );
     expect(screen.getByText("Proposals")).toBeInTheDocument();
   });
@@ -78,7 +78,7 @@ it("should render multiple links properly", () => {
     <NavLinks>
       <NavLink href="/first">First</NavLink>
       <NavLink href="/second">Second</NavLink>
-    </NavLinks>,
+    </NavLinks>
   );
 
   expect(screen.getByText("First")).toBeInTheDocument();
@@ -89,7 +89,7 @@ it("should have correct aria-label on hamburger menu", () => {
   renderWithProviders(
     <NavLinks>
       <NavLink>Proposals</NavLink>
-    </NavLinks>,
+    </NavLinks>
   );
 
   const button = screen.getByRole("button", { name: /open menu/i });
@@ -106,7 +106,7 @@ test("should render Navbar with linkComponent and 'to' prop", async () => {
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>,
+    </MemoryRouter>
   );
 
   const link = await screen.findByText("About");
@@ -118,7 +118,7 @@ it("should render logo with linkComponent and 'to' prop", () => {
   renderWithProviders(
     <MemoryRouter>
       <Navbar logo={{ src: "/logo.svg", alt: "Home" }} linkComponent={Link} />
-    </MemoryRouter>,
+    </MemoryRouter>
   );
   const logoLink = screen.getByRole("link");
   expect(logoLink).toHaveAttribute("href", "/");
@@ -128,7 +128,7 @@ it("should render logo with correct alt text", () => {
   renderWithProviders(
     <MemoryRouter>
       <Navbar logo={{ src: "/logo.svg", alt: "Home" }} linkComponent={Link} />
-    </MemoryRouter>,
+    </MemoryRouter>
   );
 
   const logo = screen.getByRole("img");
@@ -139,7 +139,7 @@ it("should render NavLink without crashing when no 'to' or 'href' is provided",
   renderWithProviders(
     <NavLinks>
       <NavLink>Proposal</NavLink>
-    </NavLinks>,
+    </NavLinks>
   );
 
   expect(screen.getByText("Proposal")).toBeInTheDocument();
@@ -151,7 +151,7 @@ it("should render NavLink with href when linkComponent is not provided", () => {
       <NavLinks>
         <NavLink href="/docs">Docs</NavLink>
       </NavLinks>
-    </Navbar>,
+    </Navbar>
   );
 
   const link = screen.getByText("Docs");
@@ -170,7 +170,7 @@ it("should render NavLink with linkComponent and 'to' prop", () => {
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>,
+    </MemoryRouter>
   );
 
   const link = screen.getByText("About");
@@ -193,7 +193,7 @@ it("should render logo with linkComponent without 'to' prop", () => {
   renderWithProviders(
     <MemoryRouter>
       <Navbar logo={{ src: "/logo.svg", alt: "Home" }} linkComponent={Link} />
-    </MemoryRouter>,
+    </MemoryRouter>
   );
 
   const logoLink = screen.getByRole("link");
@@ -210,7 +210,7 @@ it("should not render a valid link when only 'to' is provided without linkCompon
       <NavLinks>
         <NavLink to="/about">About</NavLink>
       </NavLinks>
-    </Navbar>,
+    </Navbar>
   );
 
   const link = screen.getByText("About");
@@ -228,7 +228,7 @@ it("should not use linkComponent without 'to'", () => {
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>,
+    </MemoryRouter>
   );
 
   const link = screen.getByText("About");
@@ -245,7 +245,7 @@ it("should use 'href' when both 'href' and 'to' are provided without linkCompone
           About
         </NavLink>
       </NavLinks>
-    </Navbar>,
+    </Navbar>
   );
 
   const link = screen.getByText("About");
@@ -263,7 +263,7 @@ it("should use 'to' when both 'href' and 'to' are provided with linkComponent",
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>,
+    </MemoryRouter>
   );
 
   const link = screen.getByText("About");
@@ -277,7 +277,7 @@ describe("Navbar logo position", () => {
       <Navbar
         logo={{ src: "/logo.svg", alt: "Home" }}
         leftSlot={<div data-testid="left-slot">Left</div>}
-      />,
+      />
     );
     const logo = screen.getByRole("link");
     const logoBox = logo.parentElement;
diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx
index 594e310..f233c67 100644
--- a/src/components/navigation/Navbar.tsx
+++ b/src/components/navigation/Navbar.tsx
@@ -152,6 +152,7 @@ const Navbar = ({
 }: NavbarProps) => {
   return (
     <BarStyled
+      data-testid="navbar"
       {...props}
       leftSlot={
         <>

From a24b6a73458883e5c7b4bbf10070fba0f57207d6 Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Mon, 20 Oct 2025 16:44:42 +0100
Subject: [PATCH 07/12] RA resolving prettier CI errors

---
 src/components/navigation/Navbar.test.tsx | 38 +++++++++++------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/navigation/Navbar.test.tsx b/src/components/navigation/Navbar.test.tsx
index 0d47ff8..c9190b5 100644
--- a/src/components/navigation/Navbar.test.tsx
+++ b/src/components/navigation/Navbar.test.tsx
@@ -17,7 +17,7 @@ describe("Navbar", () => {
     renderWithProviders(<Navbar style={{ border: borderStyle }} />);
 
     const headerComputedStyle = window.getComputedStyle(
-      await screen.findByTestId("navbar")
+      await screen.findByTestId("navbar"),
     );
 
     // check new style is set
@@ -42,10 +42,10 @@ describe("Navbar Links", () => {
     renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
-      </NavLinks>
+      </NavLinks>,
     );
     expect(
-      screen.getByRole("button", { name: /open menu/i })
+      screen.getByRole("button", { name: /open menu/i }),
     ).toBeInTheDocument();
   });
 
@@ -54,7 +54,7 @@ describe("Navbar Links", () => {
     renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
-      </NavLinks>
+      </NavLinks>,
     );
     const menu = screen.getByRole("button", { name: /open menu/i });
     fireEvent.click(menu);
@@ -67,7 +67,7 @@ describe("Navbar Links", () => {
     renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
-      </NavLinks>
+      </NavLinks>,
     );
     expect(screen.getByText("Proposals")).toBeInTheDocument();
   });
@@ -78,7 +78,7 @@ it("should render multiple links properly", () => {
     <NavLinks>
       <NavLink href="/first">First</NavLink>
       <NavLink href="/second">Second</NavLink>
-    </NavLinks>
+    </NavLinks>,
   );
 
   expect(screen.getByText("First")).toBeInTheDocument();
@@ -89,7 +89,7 @@ it("should have correct aria-label on hamburger menu", () => {
   renderWithProviders(
     <NavLinks>
       <NavLink>Proposals</NavLink>
-    </NavLinks>
+    </NavLinks>,
   );
 
   const button = screen.getByRole("button", { name: /open menu/i });
@@ -106,7 +106,7 @@ test("should render Navbar with linkComponent and 'to' prop", async () => {
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const link = await screen.findByText("About");
@@ -118,7 +118,7 @@ it("should render logo with linkComponent and 'to' prop", () => {
   renderWithProviders(
     <MemoryRouter>
       <Navbar logo={{ src: "/logo.svg", alt: "Home" }} linkComponent={Link} />
-    </MemoryRouter>
+    </MemoryRouter>,
   );
   const logoLink = screen.getByRole("link");
   expect(logoLink).toHaveAttribute("href", "/");
@@ -128,7 +128,7 @@ it("should render logo with correct alt text", () => {
   renderWithProviders(
     <MemoryRouter>
       <Navbar logo={{ src: "/logo.svg", alt: "Home" }} linkComponent={Link} />
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const logo = screen.getByRole("img");
@@ -139,7 +139,7 @@ it("should render NavLink without crashing when no 'to' or 'href' is provided",
   renderWithProviders(
     <NavLinks>
       <NavLink>Proposal</NavLink>
-    </NavLinks>
+    </NavLinks>,
   );
 
   expect(screen.getByText("Proposal")).toBeInTheDocument();
@@ -151,7 +151,7 @@ it("should render NavLink with href when linkComponent is not provided", () => {
       <NavLinks>
         <NavLink href="/docs">Docs</NavLink>
       </NavLinks>
-    </Navbar>
+    </Navbar>,
   );
 
   const link = screen.getByText("Docs");
@@ -170,7 +170,7 @@ it("should render NavLink with linkComponent and 'to' prop", () => {
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const link = screen.getByText("About");
@@ -193,7 +193,7 @@ it("should render logo with linkComponent without 'to' prop", () => {
   renderWithProviders(
     <MemoryRouter>
       <Navbar logo={{ src: "/logo.svg", alt: "Home" }} linkComponent={Link} />
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const logoLink = screen.getByRole("link");
@@ -210,7 +210,7 @@ it("should not render a valid link when only 'to' is provided without linkCompon
       <NavLinks>
         <NavLink to="/about">About</NavLink>
       </NavLinks>
-    </Navbar>
+    </Navbar>,
   );
 
   const link = screen.getByText("About");
@@ -228,7 +228,7 @@ it("should not use linkComponent without 'to'", () => {
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const link = screen.getByText("About");
@@ -245,7 +245,7 @@ it("should use 'href' when both 'href' and 'to' are provided without linkCompone
           About
         </NavLink>
       </NavLinks>
-    </Navbar>
+    </Navbar>,
   );
 
   const link = screen.getByText("About");
@@ -263,7 +263,7 @@ it("should use 'to' when both 'href' and 'to' are provided with linkComponent",
           </NavLink>
         </NavLinks>
       </Navbar>
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const link = screen.getByText("About");
@@ -277,7 +277,7 @@ describe("Navbar logo position", () => {
       <Navbar
         logo={{ src: "/logo.svg", alt: "Home" }}
         leftSlot={<div data-testid="left-slot">Left</div>}
-      />
+      />,
     );
     const logo = screen.getByRole("link");
     const logoBox = logo.parentElement;

From a57ec2de62ee4ae4183756aa9c1c14a392b67a51 Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Tue, 4 Nov 2025 15:08:21 +0000
Subject: [PATCH 08/12] RA removed unused import from themeing files

---
 src/themes/DiamondTheme.old | 1 -
 src/themes/DiamondTheme.ts  | 1 -
 src/themes/GenericTheme.ts  | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/themes/DiamondTheme.old b/src/themes/DiamondTheme.old
index c2c16ad..0969f5d 100644
--- a/src/themes/DiamondTheme.old
+++ b/src/themes/DiamondTheme.old
@@ -1,4 +1,3 @@
-import type {} from "@mui/material/themeCssVarsAugmentation";
 import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index be9ebc5..9460c9a 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -1,4 +1,3 @@
-import type {} from "@mui/material/themeCssVarsAugmentation";
 import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";
diff --git a/src/themes/GenericTheme.ts b/src/themes/GenericTheme.ts
index 1b91d88..6fb29d9 100644
--- a/src/themes/GenericTheme.ts
+++ b/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";

From e50725c7ce9610cf57f7325a73500675c8a740cf Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Tue, 4 Nov 2025 15:21:15 +0000
Subject: [PATCH 09/12] RA reverting type import to resolve pipeline

---
 src/themes/DiamondTheme.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index 9460c9a..be9ebc5 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -1,3 +1,4 @@
+import type {} from "@mui/material/themeCssVarsAugmentation";
 import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";

From 6ee94e4d7b7eba6329b5edaa03db7e5d4789b56b Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Tue, 11 Nov 2025 11:32:51 +0000
Subject: [PATCH 10/12] RA created new DataBoxList wrapper component in order
 for dl tags to wrap all content inside DataBox and not each databox

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 13 +++---
 .../helpers/jsonforms/components/DataBox.tsx  | 45 +++++++++----------
 .../jsonforms/components/DataBoxList.test.tsx | 22 +++++++++
 .../jsonforms/components/DataBoxList.tsx      | 21 +++++++++
 .../jsonforms/controls/TextControl.tsx        |  8 ++--
 .../controls/TextDateTimeControl.tsx          | 19 ++++----
 7 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 src/components/helpers/jsonforms/components/DataBoxList.test.tsx
 create mode 100644 src/components/helpers/jsonforms/components/DataBoxList.tsx

diff --git a/package.json b/package.json
index 02cc606..5f7f39f 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb36c64..d613891 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,8 +112,8 @@ importers:
         specifier: ^8.4.4
         version: 8.4.7(storybook@8.4.7(prettier@3.4.2))
       '@testing-library/jest-dom':
-        specifier: ^6.6.3
-        version: 6.6.3
+        specifier: ^6.9.1
+        version: 6.9.1
       '@testing-library/react':
         specifier: ^16.1.0
         version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1858,8 +1858,8 @@ packages:
     resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
-  '@testing-library/jest-dom@6.6.3':
-    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
   '@testing-library/react@16.1.0':
@@ -7019,14 +7019,13 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/jest-dom@6.6.3':
+  '@testing-library/jest-dom@6.9.1':
     dependencies:
       '@adobe/css-tools': 4.4.1
       aria-query: 5.3.2
-      chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
+      picocolors: 1.1.1
       redent: 3.0.0
 
   '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
diff --git a/src/components/helpers/jsonforms/components/DataBox.tsx b/src/components/helpers/jsonforms/components/DataBox.tsx
index a9b2bb8..bf9b017 100644
--- a/src/components/helpers/jsonforms/components/DataBox.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.tsx
@@ -17,32 +17,27 @@ export const DataOrEmpty = ({ data }: { data?: string | null }) =>
   );
 
 const DataBox = ({ label, data }: DataBoxProps) => (
-  <Box className="data-box">
-    <Stack direction="column">
-      {/* 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-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>
-      </dl>
-    </Stack>
-  </Box>
+    <Box className="data-box-data">
+      <Typography component="dd">
+        <DataOrEmpty data={data} />
+      </Typography>
+    </Box>
+  </>
 );
 
 export { DataBox };
diff --git a/src/components/helpers/jsonforms/components/DataBoxList.test.tsx b/src/components/helpers/jsonforms/components/DataBoxList.test.tsx
new file mode 100644
index 0000000..2b5fa33
--- /dev/null
+++ b/src/components/helpers/jsonforms/components/DataBoxList.test.tsx
@@ -0,0 +1,22 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { DataBoxList } from "./DataBoxList";
+
+describe("Data Box List - ", () => {
+  it("Should render a list of DataBox items inside a dl tag", () => {
+    const items = [
+      { label: "Name", data: "Alice" },
+      { label: "Age", data: "30" },
+    ];
+
+    const { container } = render(<DataBoxList items={items} />);
+
+    expect(container.querySelector("dl")).toBeInTheDocument();
+
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+
+    expect(screen.getByText("Age")).toBeInTheDocument();
+    expect(screen.getByText("30")).toBeInTheDocument();
+  });
+});
diff --git a/src/components/helpers/jsonforms/components/DataBoxList.tsx b/src/components/helpers/jsonforms/components/DataBoxList.tsx
new file mode 100644
index 0000000..7488576
--- /dev/null
+++ b/src/components/helpers/jsonforms/components/DataBoxList.tsx
@@ -0,0 +1,21 @@
+import { Box, Stack } from "@mui/material";
+import { DataBox } from "./DataBox";
+
+interface DataBoxListProps {
+  items: { label: string; data?: string | null }[];
+}
+
+const DataBoxList = ({ items }: DataBoxListProps) => (
+  <Box className="data-box-list">
+    <Stack direction="column">
+      {/* tag needed for JSON Forms to pass accessibility */}
+      <dl>
+        {items.map((item, index) => (
+          <DataBox key={index} label={item.label} data={item.data} />
+        ))}
+      </dl>
+    </Stack>
+  </Box>
+);
+
+export { DataBoxList };
diff --git a/src/components/helpers/jsonforms/controls/TextControl.tsx b/src/components/helpers/jsonforms/controls/TextControl.tsx
index 6816a3a..9a77a25 100644
--- a/src/components/helpers/jsonforms/controls/TextControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextControl.tsx
@@ -8,18 +8,18 @@ import {
   schemaTypeIs,
   uiTypeIs,
 } from "@jsonforms/core";
-import { DataBox } from "../components/DataBox";
+import { DataBoxList } from "../components/DataBoxList";
 
 const TextControlTester = rankWith(
   10,
   and(
     uiTypeIs("Control"),
-    or(schemaTypeIs("integer"), schemaTypeIs("number"), schemaTypeIs("string")),
-  ),
+    or(schemaTypeIs("integer"), schemaTypeIs("number"), schemaTypeIs("string"))
+  )
 );
 
 const TextControlComponent = ({ data, label }: ControlProps) => (
-  <DataBox label={label} data={data} />
+  <DataBoxList items={[label, data]} />
 );
 
 const TextControl = withJsonFormsControlProps(TextControlComponent);
diff --git a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
index 519b702..2eadcdb 100644
--- a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
@@ -6,25 +6,28 @@ import {
   schemaMatches,
   ControlProps,
 } from "@jsonforms/core";
-
-import { DataBox } from "../components/DataBox";
+import { DataBoxList } from "../components/DataBoxList";
 
 const TextDateTimeControlTester = rankWith(
   15,
   and(
     isStringControl,
-    schemaMatches((schema) => schema.format === "date-time"),
-  ),
+    schemaMatches((schema) => schema.format === "date-time")
+  )
 );
 
 const TextDateTimeControlComponent = ({ data, label }: ControlProps) => (
-  <DataBox
-    label={label}
-    data={data ? new Date(data).toLocaleString("en-GB") : undefined}
+  <DataBoxList
+    items={[
+      {
+        label,
+        data: data ? new Date(data).toLocaleString("en-GB") : undefined,
+      },
+    ]}
   />
 );
 
 const TextDateTimeControl = withJsonFormsControlProps(
-  TextDateTimeControlComponent,
+  TextDateTimeControlComponent
 );
 export { TextDateTimeControl, TextDateTimeControlTester };

From 59c4461fb31d85d72fae859c96867f27be58be1b Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Tue, 11 Nov 2025 11:35:08 +0000
Subject: [PATCH 11/12] RA lint fix ran

---
 src/components/helpers/jsonforms/components/DataBox.tsx     | 2 +-
 src/components/helpers/jsonforms/controls/TextControl.tsx   | 4 ++--
 .../helpers/jsonforms/controls/TextDateTimeControl.tsx      | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/helpers/jsonforms/components/DataBox.tsx b/src/components/helpers/jsonforms/components/DataBox.tsx
index bf9b017..94f85fc 100644
--- a/src/components/helpers/jsonforms/components/DataBox.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 interface DataBoxProps {
   label: string;
diff --git a/src/components/helpers/jsonforms/controls/TextControl.tsx b/src/components/helpers/jsonforms/controls/TextControl.tsx
index 9a77a25..ef4c70d 100644
--- a/src/components/helpers/jsonforms/controls/TextControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextControl.tsx
@@ -14,8 +14,8 @@ const TextControlTester = rankWith(
   10,
   and(
     uiTypeIs("Control"),
-    or(schemaTypeIs("integer"), schemaTypeIs("number"), schemaTypeIs("string"))
-  )
+    or(schemaTypeIs("integer"), schemaTypeIs("number"), schemaTypeIs("string")),
+  ),
 );
 
 const TextControlComponent = ({ data, label }: ControlProps) => (
diff --git a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
index 2eadcdb..64e0f06 100644
--- a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
@@ -12,8 +12,8 @@ const TextDateTimeControlTester = rankWith(
   15,
   and(
     isStringControl,
-    schemaMatches((schema) => schema.format === "date-time")
-  )
+    schemaMatches((schema) => schema.format === "date-time"),
+  ),
 );
 
 const TextDateTimeControlComponent = ({ data, label }: ControlProps) => (
@@ -28,6 +28,6 @@ const TextDateTimeControlComponent = ({ data, label }: ControlProps) => (
 );
 
 const TextDateTimeControl = withJsonFormsControlProps(
-  TextDateTimeControlComponent
+  TextDateTimeControlComponent,
 );
 export { TextDateTimeControl, TextDateTimeControlTester };

From ee3461904ceeea80b9eda23ca61c2f376a9a62ec Mon Sep 17 00:00:00 2001
From: Rhys Adey <rhys.adey@diamond.ac.uk>
Date: Tue, 11 Nov 2025 15:58:02 +0000
Subject: [PATCH 12/12] RA reverting DataBoxList changes

---
 .../helpers/jsonforms/components/DataBox.tsx  | 47 ++++++++++---------
 .../jsonforms/components/DataBoxList.test.tsx | 22 ---------
 .../jsonforms/components/DataBoxList.tsx      | 21 ---------
 .../jsonforms/controls/TextControl.tsx        |  4 +-
 .../controls/TextDateTimeControl.tsx          | 12 ++---
 5 files changed, 32 insertions(+), 74 deletions(-)
 delete mode 100644 src/components/helpers/jsonforms/components/DataBoxList.test.tsx
 delete mode 100644 src/components/helpers/jsonforms/components/DataBoxList.tsx

diff --git a/src/components/helpers/jsonforms/components/DataBox.tsx b/src/components/helpers/jsonforms/components/DataBox.tsx
index 94f85fc..a9b2bb8 100644
--- a/src/components/helpers/jsonforms/components/DataBox.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 
 interface DataBoxProps {
   label: string;
@@ -17,27 +17,32 @@ export const DataOrEmpty = ({ data }: { data?: string | null }) =>
   );
 
 const DataBox = ({ label, data }: DataBoxProps) => (
-  <>
-    <Box className="data-box-label">
-      <Typography
-        component="dt"
-        variant="h6"
-        sx={{
-          fontWeight: "bold",
-          textTransform: "capitalize",
-          fontSize: "smaller",
-        }}
-      >
-        {label}
-      </Typography>
-    </Box>
+  <Box className="data-box">
+    <Stack direction="column">
+      {/* 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>
 );
 
 export { DataBox };
diff --git a/src/components/helpers/jsonforms/components/DataBoxList.test.tsx b/src/components/helpers/jsonforms/components/DataBoxList.test.tsx
deleted file mode 100644
index 2b5fa33..0000000
--- a/src/components/helpers/jsonforms/components/DataBoxList.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import { DataBoxList } from "./DataBoxList";
-
-describe("Data Box List - ", () => {
-  it("Should render a list of DataBox items inside a dl tag", () => {
-    const items = [
-      { label: "Name", data: "Alice" },
-      { label: "Age", data: "30" },
-    ];
-
-    const { container } = render(<DataBoxList items={items} />);
-
-    expect(container.querySelector("dl")).toBeInTheDocument();
-
-    expect(screen.getByText("Name")).toBeInTheDocument();
-    expect(screen.getByText("Alice")).toBeInTheDocument();
-
-    expect(screen.getByText("Age")).toBeInTheDocument();
-    expect(screen.getByText("30")).toBeInTheDocument();
-  });
-});
diff --git a/src/components/helpers/jsonforms/components/DataBoxList.tsx b/src/components/helpers/jsonforms/components/DataBoxList.tsx
deleted file mode 100644
index 7488576..0000000
--- a/src/components/helpers/jsonforms/components/DataBoxList.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Box, Stack } from "@mui/material";
-import { DataBox } from "./DataBox";
-
-interface DataBoxListProps {
-  items: { label: string; data?: string | null }[];
-}
-
-const DataBoxList = ({ items }: DataBoxListProps) => (
-  <Box className="data-box-list">
-    <Stack direction="column">
-      {/* tag needed for JSON Forms to pass accessibility */}
-      <dl>
-        {items.map((item, index) => (
-          <DataBox key={index} label={item.label} data={item.data} />
-        ))}
-      </dl>
-    </Stack>
-  </Box>
-);
-
-export { DataBoxList };
diff --git a/src/components/helpers/jsonforms/controls/TextControl.tsx b/src/components/helpers/jsonforms/controls/TextControl.tsx
index ef4c70d..6816a3a 100644
--- a/src/components/helpers/jsonforms/controls/TextControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextControl.tsx
@@ -8,7 +8,7 @@ import {
   schemaTypeIs,
   uiTypeIs,
 } from "@jsonforms/core";
-import { DataBoxList } from "../components/DataBoxList";
+import { DataBox } from "../components/DataBox";
 
 const TextControlTester = rankWith(
   10,
@@ -19,7 +19,7 @@ const TextControlTester = rankWith(
 );
 
 const TextControlComponent = ({ data, label }: ControlProps) => (
-  <DataBoxList items={[label, data]} />
+  <DataBox label={label} data={data} />
 );
 
 const TextControl = withJsonFormsControlProps(TextControlComponent);
diff --git a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
index 64e0f06..b0cb8e4 100644
--- a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
@@ -6,7 +6,7 @@ import {
   schemaMatches,
   ControlProps,
 } from "@jsonforms/core";
-import { DataBoxList } from "../components/DataBoxList";
+import { DataBox } from "../components/DataBox";
 
 const TextDateTimeControlTester = rankWith(
   15,
@@ -17,13 +17,9 @@ const TextDateTimeControlTester = rankWith(
 );
 
 const TextDateTimeControlComponent = ({ data, label }: ControlProps) => (
-  <DataBoxList
-    items={[
-      {
-        label,
-        data: data ? new Date(data).toLocaleString("en-GB") : undefined,
-      },
-    ]}
+  <DataBox
+    label={label}
+    data={data ? new Date(data).toLocaleString("en-GB") : undefined}
   />
 );