fix: improve keyboard and screenreader accessibility for Video Shorts

[daniellefrappier18]

What are the relevant tickets?

Fixes https://github.com/mitodl/hq/issues/11527

Description (What does it do?)

Addresses accessibility issues in the Video Shorts modal and section carousel. The feature was previously unusable for keyboard-only and screenreader users due to unconditional preventDefault breaking all non-handled keys (tab, browser shortcuts), and the modal having no dialog semantics.

VideoShortsModal

• Add FocusTrap, role="dialog", aria-modal so screenreaders announce it correctly
• Fix preventDefault
• Auto-focus Mute button on open (video starts muted)
• Add aria-label/aria-pressed to Close, Mute, and a new Play/Pause button
• Play/Pause button: invisible by default, visible on hover over the video and on keyboard focus
• Add slide ARIA attributes (role, aria-roledescription, aria-label, tabIndex) for screenreader navigation
• Fix Enter double-firing on Play/Pause by stopping propagation before it reaches the slide handler

VideoShortsSection

• Make each slide the interactive target with role="button", aria-label, and keyboard handler

CarouselV2Vertical

• Fix preventDefault

Screen Recording (if appropriate):

• Without SR

video-shorts-carousel.mov

• Using NVDA

nvda-video-shorts-carousel.mp4

How can this be tested?

• Open the modal. Focus should automatically land on the Mute button
• Tab through modal. The cycle is: Mute → Up → Down → Slide → Play/Pause → Close → (wraps back to Mute)

Note: When on the first video, the Up button is disabled and skipped — the tab cycle becomes Mute → Down → Slide → Play/Pause → Close → (wraps). Similarly, on the last video, Down is skipped. This is expected behavior.

• Press Escape. The modal should close
• When focused on the Play/Pause button, both Enter and Space toggle playback
• When focused on the slide itself (before tabbing to the button), Enter toggles playback
• Hover over video. Play/Pause button appears; move mouse off video. It should disappear immediately
• Arrow keys navigate between videos; other keys (tab, browser shortcuts) are not blocked
• Screenreader announces the modal as a dialog and each slide with its title and position
• Tab through section carousel. Each slide should be focusable; Enter and Space open the modal
• Arrow keys navigate between videos for keyboard-only users. Screen reader users use the Up/Down buttons (Tab to reach them, Enter/Space to activate); other keys (browser shortcuts etc.) are not blocked
• With a screenreader active, use the Up/Down arrow buttons to navigate between videos; the new video title and position should be announced (e.g. "2 of 12: Video Title")

Additional Context

Known limitation (out of scope): The Featured Courses carousel has a focus trap issue. Once focus enters a card, Tab moves to the next focusable element within the card (e.g. bookmark button) rather than exiting the carousel. This needs a roving tabindex implementation similar to what was applied to the Video Shorts section. Tracked in https://github.com/mitodl/hq/issues/11575

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

frontends/main/src/app-pages/HomePage/VideoShortsModal.tsx:301

• CarouselSlide is focusable and triggers playback on Enter, but it’s marked role="group" (non-interactive). Screen readers may not convey that it’s actionable. Either remove the Enter key handler (and keep it purely for slide navigation/announcement) or change the role/semantics to reflect interactivity (e.g., role="button" or move the keyboard activation onto an actual <button> element).

        player.muted(muted)
        // On iOS, only autoplay if muted or if user has interacted
        if (!isIOS() || muted || hasUserInteracted) {
          player.play()?.catch(() => {
            setPlaying(false)
          })
          setPlaying(true)
        }
      }
    }
  }

  const onClickMute = () => {
    if (selectedIndex !== null && playersRef.current[selectedIndex]) {

[Copilot]

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

[shanbady]

looks good. worked as noted 👍