Description

The hero carousel and use-cases grid use <div onClick> for expanding media. These elements are inaccessible to keyboard-only users — they cannot be focused or activated with Enter/Space.

Files to Update

• surfsense_web/components/ui/hero-carousel.tsx (line 107)
• surfsense_web/components/homepage/use-cases-grid.tsx (lines 66–74)

What to Do

Add role, tabIndex, onKeyDown, and aria-label to each clickable <div>:

// Before
<div className="cursor-pointer ..." onClick={open}>

// After
<div
  className="cursor-pointer ..."
  role="button"
  tabIndex={0}
  aria-label={`Expand ${title}`}
  onClick={open}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      open();
    }
  }}
>

Apply this pattern to both the hero carousel video card and the use-cases grid image card.