From 790a6f8c37f64da8982926846cdf09ac8920cb76 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Date: Sat, 9 May 2026 07:05:57 -0700
Subject: [PATCH] feat(a11y): add aria-label to clickable media cards

The hero carousel video card and use-cases grid image card already had
role="button", tabIndex={0}, and onKeyDown handlers. Adds the missing
aria-label so screen readers announce what each clickable card does.

Both cards now use aria-label={`Expand ${title}`}, matching the example
in the issue.

Fixes #913
---
 surfsense_web/components/homepage/use-cases-grid.tsx | 1 +
 surfsense_web/components/ui/hero-carousel.tsx        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/surfsense_web/components/homepage/use-cases-grid.tsx b/surfsense_web/components/homepage/use-cases-grid.tsx
index 7aa272a5c..b51567700 100644
--- a/surfsense_web/components/homepage/use-cases-grid.tsx
+++ b/surfsense_web/components/homepage/use-cases-grid.tsx
@@ -68,6 +68,7 @@ function UseCaseCard({
 				<div
 					role="button"
 					tabIndex={0}
+					aria-label={`Expand ${title}`}
 					className="cursor-pointer overflow-hidden bg-neutral-50 p-2 dark:bg-neutral-950"
 					onClick={open}
 					onKeyDown={(e) => {
diff --git a/surfsense_web/components/ui/hero-carousel.tsx b/surfsense_web/components/ui/hero-carousel.tsx
index c93fe5979..2c1a98f46 100644
--- a/surfsense_web/components/ui/hero-carousel.tsx
+++ b/surfsense_web/components/ui/hero-carousel.tsx
@@ -118,6 +118,7 @@ function HeroCarouselCard({
 				<div
 					role="button"
 					tabIndex={0}
+					aria-label={`Expand ${title}`}
 					className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950"
 					onClick={open}
 					onKeyDown={(e) => {