From 6c49139b7e400e5a759303245d5301cb6941c4a8 Mon Sep 17 00:00:00 2001
From: Weronika Szalas <freelance.wszalas@thenational.academy>
Date: Tue, 3 Dec 2024 11:14:06 +0100
Subject: [PATCH] feat: updates to OakMediaClipList and OakVideoTranscript
 component

---
 .../InternalChevronAccordion.tsx              |  48 +++-
 .../InternalChevronAccordion.test.tsx.snap    |  98 +++++---
 .../OakMediaClipListAccordion.stories.tsx}    |  12 +-
 .../OakMediaClipListAccordion.test.tsx}       |  12 +-
 .../OakMediaClipListAccordion.tsx}            |   3 +-
 .../OakMediaClipListAccordion.test.tsx.snap}  | 126 +++++++---
 .../OakMediaClipListAccordion/index.ts        |   1 +
 .../OakOutlineAccordion.test.tsx.snap         |  98 +++++---
 .../OakSolidBorderAccordion/index.ts          |   1 -
 .../OakPupilJourneyUnitsFilter.test.tsx.snap  | 223 ++++++++++--------
 .../OakMediaClipList/OakMediaClipList.tsx     |   4 +-
 .../OakMediaClipList.test.tsx.snap            | 128 +++++++---
 .../OakVideoTranscript/OakVideoTranscript.tsx |   8 +-
 13 files changed, 480 insertions(+), 282 deletions(-)
 rename src/components/molecules/{OakSolidBorderAccordion/OakSolidBorderAccordion.stories.tsx => OakMediaClipListAccordion/OakMediaClipListAccordion.stories.tsx} (63%)
 rename src/components/molecules/{OakSolidBorderAccordion/OakSolidBorderAccordion.test.tsx => OakMediaClipListAccordion/OakMediaClipListAccordion.test.tsx} (75%)
 rename src/components/molecules/{OakSolidBorderAccordion/OakSolidBorderAccordion.tsx => OakMediaClipListAccordion/OakMediaClipListAccordion.tsx} (94%)
 rename src/components/molecules/{OakSolidBorderAccordion/__snapshots__/OakSolidBorderAccordion.test.tsx.snap => OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap} (76%)
 create mode 100644 src/components/molecules/OakMediaClipListAccordion/index.ts
 delete mode 100644 src/components/molecules/OakSolidBorderAccordion/index.ts

diff --git a/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx b/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx
index af30eb5d..866cbd16 100644
--- a/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx
+++ b/src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx
@@ -2,7 +2,14 @@ import React, { ReactNode } from "react";
 import styled from "styled-components";
 
 import { OakHandDrawnFocusUnderline } from "@/components/molecules/OakHandDrawnFocusUnderline";
-import { OakBoxProps, OakFlex, OakIcon, oakBoxCss } from "@/components/atoms";
+import {
+  OakBoxProps,
+  OakFlex,
+  OakIcon,
+  OakBox,
+  oakBoxCss,
+} from "@/components/atoms";
+import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
 import {
   InternalAccordionButton,
   InternalAccordionContent,
@@ -48,9 +55,16 @@ export const StyledAccordionButton = styled(
 )<FlexStyleProps>`
   ${flexStyle}
   ${oakBoxCss}
+  position: relative;
   &:hover {
     text-decoration: underline;
   }
+  &:focus-visible {
+    .shadow {
+      box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
+        ${parseDropShadow("drop-shadow-centered-grey")};
+    }
+  }
 `;
 
 const StyledContainer = styled(OakFlex)`
@@ -91,17 +105,27 @@ const Accordion = ({
         $alignItems={"center"}
       >
         {header}
-        <OakIcon
-          iconName="chevron-down"
-          $width="all-spacing-7"
-          $height="all-spacing-7"
-          alt="An arrow to indicate whether the item is open or closed"
-          style={{
-            transform: isOpen ? "rotate(180deg)" : "none",
-            transition: "all 0.3s ease 0s",
-          }}
-          $mr={"space-between-xs"}
-        />
+
+        <OakBox $position={"relative"} $mr={"space-between-xs"}>
+          <OakBox
+            className="shadow"
+            $position={"absolute"}
+            $borderRadius={"border-radius-s"}
+            $width={"100%"}
+            $height={"100%"}
+            $top="all-spacing-0"
+          />
+          <OakIcon
+            iconName="chevron-down"
+            $width="all-spacing-7"
+            $height="all-spacing-7"
+            alt="An arrow to indicate whether the item is open or closed"
+            style={{
+              transform: isOpen ? "rotate(180deg)" : "none",
+              transition: "all 0.3s ease 0s",
+            }}
+          />
+        </OakBox>
       </StyledAccordionButton>
       <InternalAccordionContent aria-labelledby={id} $overflow={"scroll"}>
         {children}
diff --git a/src/components/molecules/InternalChevronAccordion/__snapshots__/InternalChevronAccordion.test.tsx.snap b/src/components/molecules/InternalChevronAccordion/__snapshots__/InternalChevronAccordion.test.tsx.snap
index ec9d991d..11065642 100644
--- a/src/components/molecules/InternalChevronAccordion/__snapshots__/InternalChevronAccordion.test.tsx.snap
+++ b/src/components/molecules/InternalChevronAccordion/__snapshots__/InternalChevronAccordion.test.tsx.snap
@@ -17,26 +17,40 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
 }
 
 .c8 {
+  position: relative;
+  margin-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c9 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c10 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
-  margin-right: 0.75rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c10 {
+.c12 {
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
 }
 
-.c11 {
+.c13 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c9 {
+.c11 {
   object-fit: contain;
 }
 
@@ -62,7 +76,7 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   flex-grow: 1;
 }
 
-.c12 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -81,7 +95,7 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   padding: 0;
 }
 
-.c14 {
+.c16 {
   position: absolute;
   width: 100%;
   bottom: -0.25rem;
@@ -102,6 +116,7 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   justify-content: space-between;
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
+  position: relative;
 }
 
 .c7:hover {
@@ -109,6 +124,10 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   text-decoration: underline;
 }
 
+.c7:focus-visible .shadow {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
 .c2 {
   position: relative;
   padding-top: 0.75rem;
@@ -124,11 +143,11 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   gap: 0.25rem;
 }
 
-.c2 .c13 {
+.c2 .c15 {
   visibility: hidden;
 }
 
-.c2 .c6:focus-visible ~ .c13 {
+.c2 .c6:focus-visible ~ .c15 {
   visibility: visible;
 }
 
@@ -145,49 +164,56 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
     See more
     <div
       className="c8"
-      style={
-        {
-          "transform": "rotate(180deg)",
-          "transition": "all 0.3s ease 0s",
-        }
-      }
     >
-      <img
-        alt="An arrow to indicate whether the item is open or closed"
-        className="c9"
-        data-nimg="fill"
-        decoding="async"
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+      <div
+        className="c9 shadow"
+      />
+      <div
+        className="c10"
         style={
           {
-            "bottom": 0,
-            "color": "transparent",
-            "height": "100%",
-            "left": 0,
-            "objectFit": undefined,
-            "objectPosition": undefined,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "width": "100%",
+            "transform": "rotate(180deg)",
+            "transition": "all 0.3s ease 0s",
           }
         }
-      />
+      >
+        <img
+          alt="An arrow to indicate whether the item is open or closed"
+          className="c11"
+          data-nimg="fill"
+          decoding="async"
+          loading="lazy"
+          onError={[Function]}
+          onLoad={[Function]}
+          src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+          style={
+            {
+              "bottom": 0,
+              "color": "transparent",
+              "height": "100%",
+              "left": 0,
+              "objectFit": undefined,
+              "objectPosition": undefined,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": "100%",
+            }
+          }
+        />
+      </div>
     </div>
   </button>
   <div
     aria-labelledby="see-more"
-    className="c10"
+    className="c12"
     hidden={false}
     role="region"
   >
     Here it is
   </div>
   <div
-    className="c11 c12 c13 c14"
+    className="c13 c14 c15 c16"
   >
     <svg
       className=""
diff --git a/src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.stories.tsx b/src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.stories.tsx
similarity index 63%
rename from src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.stories.tsx
rename to src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.stories.tsx
index 82b08a10..ae555076 100644
--- a/src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.stories.tsx
+++ b/src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.stories.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
-import { OakSolidBorderAccordion } from "./OakSolidBorderAccordion";
+import { OakMediaClipListAccordion } from "./OakMediaClipListAccordion";
 
-const meta: Meta<typeof OakSolidBorderAccordion> = {
-  component: OakSolidBorderAccordion,
+const meta: Meta<typeof OakMediaClipListAccordion> = {
+  component: OakMediaClipListAccordion,
   tags: ["autodocs"],
-  title: "components/molecules/OakSolidBorderAccordion",
+  title: "components/molecules/OakMediaClipListAccordion",
   parameters: {
     controls: {
       include: ["header", "headerAfterSlot", "children"],
@@ -30,10 +30,10 @@ const meta: Meta<typeof OakSolidBorderAccordion> = {
     children:
       "Any cookies required for video or other embedded learning content to work",
   },
-  render: (args) => <OakSolidBorderAccordion {...args} />,
+  render: (args) => <OakMediaClipListAccordion {...args} />,
 };
 export default meta;
 
-type Story = StoryObj<typeof OakSolidBorderAccordion>;
+type Story = StoryObj<typeof OakMediaClipListAccordion>;
 
 export const Default: Story = {};
diff --git a/src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.test.tsx b/src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.test.tsx
similarity index 75%
rename from src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.test.tsx
rename to src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.test.tsx
index 472ab26e..962313e4 100644
--- a/src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.test.tsx
+++ b/src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.test.tsx
@@ -3,19 +3,19 @@ import { create } from "react-test-renderer";
 import { act, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { OakSolidBorderAccordion } from "./OakSolidBorderAccordion";
+import { OakMediaClipListAccordion } from "./OakMediaClipListAccordion";
 
 import { OakThemeProvider } from "@/components/atoms";
 import { oakDefaultTheme } from "@/styles";
 import renderWithTheme from "@/test-helpers/renderWithTheme";
 
-describe(OakSolidBorderAccordion, () => {
+describe(OakMediaClipListAccordion, () => {
   it("matches snapshot", () => {
     const tree = create(
       <OakThemeProvider theme={oakDefaultTheme}>
-        <OakSolidBorderAccordion initialOpen header="See more" id="see-more">
+        <OakMediaClipListAccordion initialOpen header="See more" id="see-more">
           Here it is
-        </OakSolidBorderAccordion>
+        </OakMediaClipListAccordion>
       </OakThemeProvider>,
     ).toJSON();
 
@@ -24,9 +24,9 @@ describe(OakSolidBorderAccordion, () => {
 
   it("toggles open and closed", () => {
     const { queryByRole, queryByText, getByText } = renderWithTheme(
-      <OakSolidBorderAccordion header="See more" id="see-more">
+      <OakMediaClipListAccordion header="See more" id="see-more">
         Here it is
-      </OakSolidBorderAccordion>,
+      </OakMediaClipListAccordion>,
     );
 
     expect(queryByRole("region")).not.toBeInTheDocument();
diff --git a/src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.tsx b/src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.tsx
similarity index 94%
rename from src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.tsx
rename to src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.tsx
index 94c6e664..8f13fe46 100644
--- a/src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.tsx
+++ b/src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.tsx
@@ -48,7 +48,7 @@ const AccordionWrapper = styled(OakFlex)`
 /**
  * An accordion component that can be used to show/hide content
  */
-export const OakSolidBorderAccordion = ({
+export const OakMediaClipListAccordion = ({
   header,
   children,
   id,
@@ -65,6 +65,7 @@ export const OakSolidBorderAccordion = ({
         $borderStyle={"solid"}
         $borderColor={"border-primary"}
         $ba={"border-solid-m"}
+        $bl={["border-solid-m", "border-solid-m", "border-solid-none"]}
         {...styleProps}
       >
         {children}
diff --git a/src/components/molecules/OakSolidBorderAccordion/__snapshots__/OakSolidBorderAccordion.test.tsx.snap b/src/components/molecules/OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap
similarity index 76%
rename from src/components/molecules/OakSolidBorderAccordion/__snapshots__/OakSolidBorderAccordion.test.tsx.snap
rename to src/components/molecules/OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap
index da0fd69a..42da3bd8 100644
--- a/src/components/molecules/OakSolidBorderAccordion/__snapshots__/OakSolidBorderAccordion.test.tsx.snap
+++ b/src/components/molecules/OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OakSolidBorderAccordion matches snapshot 1`] = `
+exports[`OakMediaClipListAccordion matches snapshot 1`] = `
 .c0 {
   position: relative;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -11,6 +11,7 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   padding-top: 0rem;
   padding-bottom: 0rem;
   border: 0.125rem solid;
+  border-left: 0.125rem solid;
   border-color: #222222;
   border-style: solid;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -25,26 +26,40 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
 }
 
 .c11 {
+  position: relative;
+  margin-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c12 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c13 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
-  margin-right: 0.75rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c13 {
+.c15 {
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
 }
 
-.c14 {
+.c16 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c12 {
+.c14 {
   object-fit: contain;
 }
 
@@ -80,7 +95,7 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   flex-grow: 1;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -99,7 +114,7 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   padding: 0;
 }
 
-.c17 {
+.c19 {
   position: absolute;
   width: 100%;
   bottom: -0.25rem;
@@ -120,6 +135,7 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   justify-content: space-between;
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
+  position: relative;
 }
 
 .c10:hover {
@@ -127,11 +143,16 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   text-decoration: underline;
 }
 
+.c10:focus-visible .shadow {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
 .c5 {
   position: relative;
   padding-top: 0rem;
   padding-bottom: 0rem;
   border: 0.125rem solid;
+  border-left: 0.125rem solid;
   border-color: #222222;
   border-style: solid;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -145,11 +166,11 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   gap: 0.25rem;
 }
 
-.c5 .c16 {
+.c5 .c18 {
   visibility: hidden;
 }
 
-.c5 .c9:focus-visible ~ .c16 {
+.c5 .c9:focus-visible ~ .c18 {
   visibility: visible;
 }
 
@@ -158,6 +179,30 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
   border-width: 2px;
 }
 
+@media (min-width:750px) {
+  .c3 {
+    border-left: 0.125rem solid;
+  }
+}
+
+@media (min-width:1280px) {
+  .c3 {
+    border-left: 0rem solid;
+  }
+}
+
+@media (min-width:750px) {
+  .c5 {
+    border-left: 0.125rem solid;
+  }
+}
+
+@media (min-width:1280px) {
+  .c5 {
+    border-left: 0rem solid;
+  }
+}
+
 <div
   className="c0 c1 c2"
 >
@@ -174,49 +219,56 @@ exports[`OakSolidBorderAccordion matches snapshot 1`] = `
       See more
       <div
         className="c11"
-        style={
-          {
-            "transform": "rotate(180deg)",
-            "transition": "all 0.3s ease 0s",
-          }
-        }
       >
-        <img
-          alt="An arrow to indicate whether the item is open or closed"
-          className="c12"
-          data-nimg="fill"
-          decoding="async"
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+        <div
+          className="c12 shadow"
+        />
+        <div
+          className="c13"
           style={
             {
-              "bottom": 0,
-              "color": "transparent",
-              "height": "100%",
-              "left": 0,
-              "objectFit": undefined,
-              "objectPosition": undefined,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "width": "100%",
+              "transform": "rotate(180deg)",
+              "transition": "all 0.3s ease 0s",
             }
           }
-        />
+        >
+          <img
+            alt="An arrow to indicate whether the item is open or closed"
+            className="c14"
+            data-nimg="fill"
+            decoding="async"
+            loading="lazy"
+            onError={[Function]}
+            onLoad={[Function]}
+            src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+            style={
+              {
+                "bottom": 0,
+                "color": "transparent",
+                "height": "100%",
+                "left": 0,
+                "objectFit": undefined,
+                "objectPosition": undefined,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "width": "100%",
+              }
+            }
+          />
+        </div>
       </div>
     </button>
     <div
       aria-labelledby="see-more"
-      className="c13"
+      className="c15"
       hidden={false}
       role="region"
     >
       Here it is
     </div>
     <div
-      className="c14 c15 c16 c17"
+      className="c16 c17 c18 c19"
     >
       <svg
         className=""
diff --git a/src/components/molecules/OakMediaClipListAccordion/index.ts b/src/components/molecules/OakMediaClipListAccordion/index.ts
new file mode 100644
index 00000000..69091227
--- /dev/null
+++ b/src/components/molecules/OakMediaClipListAccordion/index.ts
@@ -0,0 +1 @@
+export * from "./OakMediaClipListAccordion";
diff --git a/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap b/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap
index 47d9f6fc..af9bf524 100644
--- a/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap
+++ b/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap
@@ -26,22 +26,36 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
 }
 
 .c13 {
+  position: relative;
+  margin-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c14 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c15 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
-  margin-right: 0.75rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c15 {
+.c17 {
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
 }
 
-.c14 {
+.c16 {
   object-fit: contain;
 }
 
@@ -96,7 +110,7 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   padding: 0;
 }
 
-.c17 {
+.c19 {
   position: absolute;
   width: 100%;
   bottom: -0.25rem;
@@ -117,6 +131,7 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   justify-content: space-between;
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
+  position: relative;
 }
 
 .c12:hover {
@@ -124,6 +139,10 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   text-decoration: underline;
 }
 
+.c12:focus-visible .shadow {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
 .c7 {
   position: relative;
   padding-top: 0.75rem;
@@ -139,11 +158,11 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   gap: 0.25rem;
 }
 
-.c7 .c16 {
+.c7 .c18 {
   visibility: hidden;
 }
 
-.c7 .c11:focus-visible ~ .c16 {
+.c7 .c11:focus-visible ~ .c18 {
   visibility: visible;
 }
 
@@ -153,7 +172,7 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   bottom: 0.125rem;
 }
 
-.c18 {
+.c20 {
   height: 0.125rem;
   position: absolute;
   width: 100%;
@@ -197,49 +216,56 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
       See more
       <div
         className="c13"
-        style={
-          {
-            "transform": "rotate(180deg)",
-            "transition": "all 0.3s ease 0s",
-          }
-        }
       >
-        <img
-          alt="An arrow to indicate whether the item is open or closed"
-          className="c14"
-          data-nimg="fill"
-          decoding="async"
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+        <div
+          className="c14 shadow"
+        />
+        <div
+          className="c15"
           style={
             {
-              "bottom": 0,
-              "color": "transparent",
-              "height": "100%",
-              "left": 0,
-              "objectFit": undefined,
-              "objectPosition": undefined,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "width": "100%",
+              "transform": "rotate(180deg)",
+              "transition": "all 0.3s ease 0s",
             }
           }
-        />
+        >
+          <img
+            alt="An arrow to indicate whether the item is open or closed"
+            className="c16"
+            data-nimg="fill"
+            decoding="async"
+            loading="lazy"
+            onError={[Function]}
+            onLoad={[Function]}
+            src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+            style={
+              {
+                "bottom": 0,
+                "color": "transparent",
+                "height": "100%",
+                "left": 0,
+                "objectFit": undefined,
+                "objectPosition": undefined,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "width": "100%",
+              }
+            }
+          />
+        </div>
       </div>
     </button>
     <div
       aria-labelledby="see-more"
-      className="c15"
+      className="c17"
       hidden={false}
       role="region"
     >
       Here it is
     </div>
     <div
-      className="c2 c3 c16 c17"
+      className="c2 c3 c18 c19"
     >
       <svg
         className=""
@@ -261,7 +287,7 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="c2 c3 c18"
+    className="c2 c3 c20"
   >
     <svg
       className=""
diff --git a/src/components/molecules/OakSolidBorderAccordion/index.ts b/src/components/molecules/OakSolidBorderAccordion/index.ts
deleted file mode 100644
index 80deb9e5..00000000
--- a/src/components/molecules/OakSolidBorderAccordion/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./OakSolidBorderAccordion";
diff --git a/src/components/organisms/pupil/browse/OakPupilJourneyUnitsFilter/__snapshots__/OakPupilJourneyUnitsFilter.test.tsx.snap b/src/components/organisms/pupil/browse/OakPupilJourneyUnitsFilter/__snapshots__/OakPupilJourneyUnitsFilter.test.tsx.snap
index e81164ee..ad42b1fe 100644
--- a/src/components/organisms/pupil/browse/OakPupilJourneyUnitsFilter/__snapshots__/OakPupilJourneyUnitsFilter.test.tsx.snap
+++ b/src/components/organisms/pupil/browse/OakPupilJourneyUnitsFilter/__snapshots__/OakPupilJourneyUnitsFilter.test.tsx.snap
@@ -32,22 +32,36 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
 }
 
 .c16 {
+  position: relative;
+  margin-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c17 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c18 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
-  margin-right: 0.75rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c18 {
+.c20 {
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
 }
 
-.c20 {
+.c22 {
   position: relative;
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -55,16 +69,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c22 {
-  position: absolute;
-  top: 0rem;
-  width: 100%;
-  height: 100%;
-  border-radius: 0.25rem;
-  font-family: --var(google-font),Lexend,sans-serif;
-}
-
-.c17 {
+.c19 {
   object-fit: contain;
 }
 
@@ -115,7 +120,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   flex-grow: 1;
 }
 
-.c19 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,7 +135,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   gap: 1rem;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -160,7 +165,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c26 {
+.c27 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
   font-size: 1rem;
@@ -172,7 +177,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   text-align: left;
 }
 
-.c23 {
+.c24 {
   background: none;
   color: inherit;
   border: none;
@@ -194,12 +199,12 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   border-radius: 0.25rem;
 }
 
-.c23:disabled {
+.c24:disabled {
   pointer-events: none;
   cursor: default;
 }
 
-.c27 {
+.c28 {
   background: none;
   color: inherit;
   border: none;
@@ -221,19 +226,19 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   border-radius: 0.25rem;
 }
 
-.c27:disabled {
+.c28:disabled {
   pointer-events: none;
   cursor: default;
 }
 
-.c24 {
+.c25 {
   position: relative;
   width: 100%;
   height: 100%;
   display: inline-block;
 }
 
-.c24:hover {
+.c25:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   color: #ffffff;
@@ -241,26 +246,26 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   border-color: #575757;
 }
 
-.c24:active {
+.c25:active {
   background: #222222;
   border-color: #222222;
   color: #ffffff;
 }
 
-.c24:disabled {
+.c25:disabled {
   background: #808080;
   border-color: #808080;
   color: #ffffff;
 }
 
-.c28 {
+.c29 {
   position: relative;
   width: 100%;
   height: 100%;
   display: inline-block;
 }
 
-.c28:hover {
+.c29:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   color: #222222;
@@ -268,40 +273,40 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   border-color: #222222;
 }
 
-.c28:active {
+.c29:active {
   background: #ffffff;
   border-color: #222222;
   color: #222222;
 }
 
-.c28:disabled {
+.c29:disabled {
   background: #e4e4e4;
   border-color: #808080;
   color: #808080;
 }
 
-.c21 .grey-shadow:has(+ * + .internal-button:focus-visible) {
+.c23 .grey-shadow:has(+ * + .internal-button:focus-visible) {
   box-shadow: 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c21 .yellow-shadow:has(+ .internal-button:focus-visible) {
+.c23 .yellow-shadow:has(+ .internal-button:focus-visible) {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%);
 }
 
-.c21 .yellow-shadow:has(+ .internal-button:hover),
-.c21 .yellow-shadow:has(+ .internal-button:hover:not(:focus-visible,:active)) {
+.c23 .yellow-shadow:has(+ .internal-button:hover),
+.c23 .yellow-shadow:has(+ .internal-button:hover:not(:focus-visible,:active)) {
   box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%);
 }
 
-.c21 .grey-shadow:has(+ * + .internal-button:hover) {
+.c23 .grey-shadow:has(+ * + .internal-button:hover) {
   box-shadow: none;
 }
 
-.c21 .grey-shadow:has(+ * + .internal-button:active) {
+.c23 .grey-shadow:has(+ * + .internal-button:active) {
   box-shadow: 0.25rem 0.25rem 0 rgba(87,87,87,100%);
 }
 
-.c21 .yellow-shadow:has(+ .internal-button:active) {
+.c23 .yellow-shadow:has(+ .internal-button:active) {
   box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%);
 }
 
@@ -317,7 +322,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   padding: 0;
 }
 
-.c30 {
+.c31 {
   position: absolute;
   width: 100%;
   bottom: -0.25rem;
@@ -338,6 +343,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   justify-content: space-between;
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
+  position: relative;
 }
 
 .c14:hover {
@@ -345,6 +351,10 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   text-decoration: underline;
 }
 
+.c14:focus-visible .shadow {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
 .c9 {
   position: relative;
   padding-top: 1.5rem;
@@ -360,11 +370,11 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   gap: 1.5rem;
 }
 
-.c9 .c29 {
+.c9 .c30 {
   visibility: hidden;
 }
 
-.c9 .c13:focus-visible ~ .c29 {
+.c9 .c13:focus-visible ~ .c30 {
   visibility: visible;
 }
 
@@ -374,7 +384,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   bottom: 0.125rem;
 }
 
-.c31 {
+.c32 {
   height: 0.125rem;
   position: absolute;
   width: 100%;
@@ -398,7 +408,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
 }
 
 @media (min-width:750px) {
-  .c19 {
+  .c21 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
@@ -407,7 +417,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
 }
 
 @media (min-width:1280px) {
-  .c19 {
+  .c21 {
     -webkit-box-pack: end;
     -webkit-justify-content: end;
     -ms-flex-pack: end;
@@ -463,72 +473,79 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
           </h2>
           <div
             className="c16"
-            style={
-              {
-                "transform": "none",
-                "transition": "all 0.3s ease 0s",
-              }
-            }
           >
-            <img
-              alt="An arrow to indicate whether the item is open or closed"
-              className="c17"
-              data-nimg="fill"
-              decoding="async"
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+            <div
+              className="c17 shadow"
+            />
+            <div
+              className="c18"
               style={
                 {
-                  "bottom": 0,
-                  "color": "transparent",
-                  "height": "100%",
-                  "left": 0,
-                  "objectFit": undefined,
-                  "objectPosition": undefined,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "width": "100%",
+                  "transform": "none",
+                  "transition": "all 0.3s ease 0s",
                 }
               }
-            />
+            >
+              <img
+                alt="An arrow to indicate whether the item is open or closed"
+                className="c19"
+                data-nimg="fill"
+                decoding="async"
+                loading="lazy"
+                onError={[Function]}
+                onLoad={[Function]}
+                src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+                style={
+                  {
+                    "bottom": 0,
+                    "color": "transparent",
+                    "height": "100%",
+                    "left": 0,
+                    "objectFit": undefined,
+                    "objectPosition": undefined,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                    "width": "100%",
+                  }
+                }
+              />
+            </div>
           </div>
         </button>
         <div
           aria-labelledby="mobile-unit-filter-accordion"
-          className="c18"
+          className="c20"
           hidden={true}
           role="region"
         >
           <div
             aria-label="OakPupilJourneyUnitsFilter"
-            className="c4 c19"
+            className="c4 c21"
             role="radiogroup"
           >
             <div
-              className="c20 c21"
+              className="c22 c23"
             >
               <div
-                className="c22 grey-shadow"
+                className="c17 grey-shadow"
               />
               <div
-                className="c22 yellow-shadow"
+                className="c17 yellow-shadow"
               />
               <button
                 aria-checked={true}
-                className="c23 c24 internal-button"
+                className="c24 c25 internal-button"
                 onClick={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
                 role="radio"
               >
                 <div
-                  className="c4 c25"
+                  className="c4 c26"
                 >
                   <span
-                    className="c26"
+                    className="c27"
                   >
                     All
                   </span>
@@ -536,27 +553,27 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
               </button>
             </div>
             <div
-              className="c20 c21"
+              className="c22 c23"
             >
               <div
-                className="c22 grey-shadow"
+                className="c17 grey-shadow"
               />
               <div
-                className="c22 yellow-shadow"
+                className="c17 yellow-shadow"
               />
               <button
                 aria-checked={false}
-                className="c27 c28 internal-button"
+                className="c28 c29 internal-button"
                 onClick={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
                 role="radio"
               >
                 <div
-                  className="c4 c25"
+                  className="c4 c26"
                 >
                   <span
-                    className="c26"
+                    className="c27"
                   >
                     Biology
                   </span>
@@ -564,27 +581,27 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
               </button>
             </div>
             <div
-              className="c20 c21"
+              className="c22 c23"
             >
               <div
-                className="c22 grey-shadow"
+                className="c17 grey-shadow"
               />
               <div
-                className="c22 yellow-shadow"
+                className="c17 yellow-shadow"
               />
               <button
                 aria-checked={false}
-                className="c27 c28 internal-button"
+                className="c28 c29 internal-button"
                 onClick={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
                 role="radio"
               >
                 <div
-                  className="c4 c25"
+                  className="c4 c26"
                 >
                   <span
-                    className="c26"
+                    className="c27"
                   >
                     Chemistry
                   </span>
@@ -592,27 +609,27 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
               </button>
             </div>
             <div
-              className="c20 c21"
+              className="c22 c23"
             >
               <div
-                className="c22 grey-shadow"
+                className="c17 grey-shadow"
               />
               <div
-                className="c22 yellow-shadow"
+                className="c17 yellow-shadow"
               />
               <button
                 aria-checked={false}
-                className="c27 c28 internal-button"
+                className="c28 c29 internal-button"
                 onClick={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
                 role="radio"
               >
                 <div
-                  className="c4 c25"
+                  className="c4 c26"
                 >
                   <span
-                    className="c26"
+                    className="c27"
                   >
                     Physics
                   </span>
@@ -622,7 +639,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
           </div>
         </div>
         <div
-          className="c4 c5 c29 c30"
+          className="c4 c5 c30 c31"
         >
           <svg
             className=""
@@ -644,7 +661,7 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
         </div>
       </div>
       <div
-        className="c4 c5 c31"
+        className="c4 c5 c32"
       >
         <svg
           className=""
@@ -670,14 +687,6 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c2 {
-  position: relative;
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  font-family: --var(google-font),Lexend,sans-serif;
-}
-
 .c5 {
   position: absolute;
   top: 0rem;
@@ -687,6 +696,14 @@ exports[`PupilJourneyUnitsFilter matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
+.c2 {
+  position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
 .c0 {
   display: none;
   font-family: --var(google-font),Lexend,sans-serif;
diff --git a/src/components/organisms/shared/OakMediaClipList/OakMediaClipList.tsx b/src/components/organisms/shared/OakMediaClipList/OakMediaClipList.tsx
index f7491b22..70037423 100644
--- a/src/components/organisms/shared/OakMediaClipList/OakMediaClipList.tsx
+++ b/src/components/organisms/shared/OakMediaClipList/OakMediaClipList.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 
 import { OakFlex } from "@/components/atoms/OakFlex";
 import { OakTypography, OakUL } from "@/components/atoms";
-import { OakSolidBorderAccordion } from "@/components/molecules/OakSolidBorderAccordion";
+import { OakMediaClipListAccordion } from "@/components/molecules/OakMediaClipListAccordion";
 
 export type OakMediaClipListProps = {
   lessonTitle: string;
@@ -48,7 +48,7 @@ export const OakMediaClipList = ({
   );
 
   return (
-    <OakSolidBorderAccordion
+    <OakMediaClipListAccordion
       header={mediaClipListHeader}
       children={mediaClipListContent}
       id="media-clip-list"
diff --git a/src/components/organisms/shared/OakMediaClipList/__snapshots__/OakMediaClipList.test.tsx.snap b/src/components/organisms/shared/OakMediaClipList/__snapshots__/OakMediaClipList.test.tsx.snap
index edfb7e3a..0225e11c 100644
--- a/src/components/organisms/shared/OakMediaClipList/__snapshots__/OakMediaClipList.test.tsx.snap
+++ b/src/components/organisms/shared/OakMediaClipList/__snapshots__/OakMediaClipList.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   padding-top: 0rem;
   padding-bottom: 0rem;
   border: 0.125rem solid;
+  border-left: 0.125rem solid;
   border-color: #222222;
   border-style: solid;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -71,22 +72,36 @@ exports[`OakMediaClipList matches snapshot 1`] = `
 }
 
 .c17 {
+  position: relative;
+  margin-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c18 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c19 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
-  margin-right: 0.75rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c19 {
+.c21 {
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
 }
 
-.c21 {
+.c23 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -122,14 +137,14 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   flex-grow: 1;
 }
 
-.c22 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c18 {
+.c20 {
   object-fit: contain;
 }
 
@@ -155,7 +170,7 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c20 {
+.c22 {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -177,7 +192,7 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   padding: 0;
 }
 
-.c24 {
+.c26 {
   position: absolute;
   width: 100%;
   bottom: -0.25rem;
@@ -198,6 +213,7 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   justify-content: space-between;
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
+  position: relative;
 }
 
 .c10:hover {
@@ -205,12 +221,17 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   text-decoration: underline;
 }
 
+.c10:focus-visible .shadow {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
 .c5 {
   position: relative;
   max-height: 30rem;
   padding-top: 0rem;
   padding-bottom: 0rem;
   border: 0.125rem solid;
+  border-left: 0.125rem solid;
   border-color: #222222;
   border-style: solid;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -224,11 +245,11 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   gap: 0.25rem;
 }
 
-.c5 .c23 {
+.c5 .c25 {
   visibility: hidden;
 }
 
-.c5 .c9:focus-visible ~ .c23 {
+.c5 .c9:focus-visible ~ .c25 {
   visibility: visible;
 }
 
@@ -237,6 +258,30 @@ exports[`OakMediaClipList matches snapshot 1`] = `
   border-width: 2px;
 }
 
+@media (min-width:750px) {
+  .c3 {
+    border-left: 0.125rem solid;
+  }
+}
+
+@media (min-width:1280px) {
+  .c3 {
+    border-left: 0rem solid;
+  }
+}
+
+@media (min-width:750px) {
+  .c5 {
+    border-left: 0.125rem solid;
+  }
+}
+
+@media (min-width:1280px) {
+  .c5 {
+    border-left: 0rem solid;
+  }
+}
+
 <div
     className="c0 c1 c2"
   >
@@ -274,53 +319,60 @@ exports[`OakMediaClipList matches snapshot 1`] = `
         </div>
         <div
           className="c17"
-          style={
-            {
-              "transform": "rotate(180deg)",
-              "transition": "all 0.3s ease 0s",
-            }
-          }
         >
-          <img
-            alt="An arrow to indicate whether the item is open or closed"
-            className="c18"
-            data-nimg="fill"
-            decoding="async"
-            loading="lazy"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+          <div
+            className="c18 shadow"
+          />
+          <div
+            className="c19"
             style={
               {
-                "bottom": 0,
-                "color": "transparent",
-                "height": "100%",
-                "left": 0,
-                "objectFit": undefined,
-                "objectPosition": undefined,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": "100%",
+                "transform": "rotate(180deg)",
+                "transition": "all 0.3s ease 0s",
               }
             }
-          />
+          >
+            <img
+              alt="An arrow to indicate whether the item is open or closed"
+              className="c20"
+              data-nimg="fill"
+              decoding="async"
+              loading="lazy"
+              onError={[Function]}
+              onLoad={[Function]}
+              src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+              style={
+                {
+                  "bottom": 0,
+                  "color": "transparent",
+                  "height": "100%",
+                  "left": 0,
+                  "objectFit": undefined,
+                  "objectPosition": undefined,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "width": "100%",
+                }
+              }
+            />
+          </div>
         </div>
       </button>
       <div
         aria-labelledby="media-clip-list"
-        className="c19"
+        className="c21"
         hidden={false}
         role="region"
       >
         <ul
-          className="c20"
+          className="c22"
         >
           children
         </ul>
       </div>
       <div
-        className="c21 c22 c23 c24"
+        className="c23 c24 c25 c26"
       >
         <svg
           className=""
diff --git a/src/components/organisms/shared/OakVideoTranscript/OakVideoTranscript.tsx b/src/components/organisms/shared/OakVideoTranscript/OakVideoTranscript.tsx
index a6af2d3d..0209f264 100644
--- a/src/components/organisms/shared/OakVideoTranscript/OakVideoTranscript.tsx
+++ b/src/components/organisms/shared/OakVideoTranscript/OakVideoTranscript.tsx
@@ -74,8 +74,8 @@ export const OakVideoTranscript = ({
         )}
 
         {/* mobile */}
-        <OakBox $display={["block", "none"]}>
-          {children && (
+        {children && (
+          <OakBox $display={["block", "none"]}>
             <OakSmallSecondaryButton
               onClick={handleClick}
               aria-controls={id}
@@ -83,8 +83,8 @@ export const OakVideoTranscript = ({
             >
               {label}
             </OakSmallSecondaryButton>
-          )}
-        </OakBox>
+          </OakBox>
+        )}
         {copyLinkControl && <OakBox>{copyLinkControl}</OakBox>}
         {signLanguageControl && <OakBox>{signLanguageControl}</OakBox>}
       </OakFlex>