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
This commit is contained in:
Matt Van Horn 2026-05-09 07:05:57 -07:00
parent de87a55a1f
commit 790a6f8c37
No known key found for this signature in database
2 changed files with 2 additions and 0 deletions

View file

@ -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) => {

View file

@ -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) => {