fix: improve keyboard and screenreader accessibility for Video Shorts

frontends/main/package.json

@@ -16,6 +16,7 @@
     "@mitodl/course-search-utils": "^3.5.2",
     "@mitodl/mitxonline-api-axios": "2026.5.28-1",
     "@mitodl/smoot-design": "^6.27.0",
+    "@mui/base": "5.0.0-beta.70",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",
     "@opentelemetry/api": "^1.9.1",

frontends/main/src/app-pages/HomePage/VideoShortsModal.test.tsx

@@ -200,6 +200,89 @@ describe("VideoShortsModal", () => {
     expect(slides.length).toBe(defaultProps.videoData.length)
   })
 
+  test("overlay has dialog role and aria-modal attributes", () => {
+    renderWithProviders(<VideoShortsModal {...defaultProps} />)
+
+    const dialog = screen.getByRole("dialog")
+    expect(dialog).toHaveAttribute("aria-modal", "true")
+    expect(dialog).toHaveAttribute("aria-label", "Video Shorts")
+  })
+
+  test("close button has aria-label Close", () => {
+    renderWithProviders(<VideoShortsModal {...defaultProps} />)
+
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument()
+  })
+
+  test("mute button receives focus on open", async () => {
+    renderWithProviders(<VideoShortsModal {...defaultProps} />)
+
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+    })
+
+    expect(screen.getByRole("button", { name: "Unmute" })).toHaveFocus()
+  })
+
+  test("mute button has correct aria-label reflecting muted state", async () => {
+    renderWithProviders(<VideoShortsModal {...defaultProps} />)
+
+    expect(screen.getByRole("button", { name: "Unmute" })).toBeInTheDocument()
+
+    await user.click(screen.getByRole("button", { name: "Unmute" }))
+
+    expect(screen.getByRole("button", { name: "Mute" })).toBeInTheDocument()
+  })
+
+  test("play/pause button renders only for the selected slide", () => {
+    renderWithProviders(<VideoShortsModal {...defaultProps} />)
+
+    // Only one play/pause button should exist — for the selected (first) slide
+    const playButtons = screen.getAllByRole("button", { name: /play|pause/i })
+    expect(playButtons).toHaveLength(1)
+    expect(playButtons[0]).toHaveAttribute("aria-label", "Play")
+  })
+
+  test("play/pause button updates aria-label when clicked", async () => {
+    const videoData = [makeVideoResource({ title: "Test Video" })]
+    renderWithProviders(
+      <VideoShortsModal
+        startIndex={0}
+        videoData={videoData}
+        onClose={jest.fn()}
+      />,
+    )
+
+    await act(async () => {
+      mockHandles[0]?.triggerReady()
+    })
+
+    const handle = mockHandles[0]
+    handle.player.paused.mockReturnValue(true)
+
+    const playButton = screen.getByRole("button", { name: "Play" })
+    await user.click(playButton)
+
+    expect(handle.player.play).toHaveBeenCalled()
+    await screen.findByRole("button", { name: "Pause" })
+  })
+
+  test("Enter key on selected slide triggers play/pause", async () => {
+    renderWithProviders(<VideoShortsModal {...defaultProps} />)
+
+    await act(async () => {
+      mockHandles[0]?.triggerReady()
+    })
+
+    const handle = mockHandles[0]
+    handle.player.paused.mockReturnValue(true)
+
+    const slide = document.querySelector("[data-index='0']")!
+    fireEvent.keyDown(slide, { key: "Enter" })
+
+    expect(handle.player.play).toHaveBeenCalled()
+  })
+
   test("handles empty videoData gracefully", () => {
     renderWithProviders(
       <VideoShortsModal startIndex={0} videoData={[]} onClose={jest.fn()} />,