feat(a11y): Implement comprehensive accessibility improvements and E2E testing support

components/events/EventCard.tsx

@@ -93,8 +93,8 @@ function SafeImage({
 
     if (hasError || !src) {
         return (
-            <div className={`bg-muted flex items-center justify-center ${className}`}>
-                <ImageIcon className="w-8 h-8 text-muted-foreground" />
+            <div className={`bg-muted flex items-center justify-center ${className}`} role="img" aria-label="Event image unavailable">
+                <ImageIcon className="w-8 h-8 text-muted-foreground" aria-hidden="true" />
             </div>
         );
     }
@@ -166,12 +166,19 @@ export function EventCard({
 
 // Default Card Style (same as current homepage implementation)
 function DefaultCard({ event, size, featured, showImage, className, onClick, spotsRemaining, isUpcoming, hasPrice, lowestPrice, isSoon }: Readonly<CardComponentProps>) {
+    const cardId = `event-card-${event.id}`
+
+
     return (
         <Card
             size={size}
             variant={featured ? 'elevated' : 'default'}
             className={`hover:shadow-lg transition-shadow cursor-pointer group ${className}`}
             onClick={onClick}
+            role="article"
+            aria-labelledby={`${cardId}-title`}
+            aria-describedby={`${cardId}-description ${cardId}-details`}
+            data-test-id={`event-card-${event.id}`}
         >
             {showImage && event.image_url && (
                 <div className="relative w-full h-48 overflow-hidden rounded-t-lg">
@@ -186,7 +193,11 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
                     />
                     {featured && (
                         <div className="absolute top-3 left-3">
-                            <span className="bg-primary text-primary-foreground px-2 py-1 rounded-full text-xs font-medium">
+                            <span 
+                                className="bg-primary text-primary-foreground px-2 py-1 rounded-full text-xs font-medium"
+                                aria-label="Featured event"
+                                data-test-id="featured-badge"
+                            >
                                 Featured
                             </span>
                         </div>
@@ -196,59 +207,86 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
 
             <CardHeader>
                 <div className="flex items-start justify-between">
-                    <CardTitle as={featured ? 'h2' : 'h3'} className={`${featured ? 'text-lg' : 'text-base'} line-clamp-2 min-h-[3rem] leading-relaxed pr-2`}>
+                    <CardTitle 
+                        as={featured ? 'h2' : 'h3'} 
+                        className={`${featured ? 'text-lg' : 'text-base'} line-clamp-2 min-h-[3rem] leading-relaxed pr-2`}
+                        id={`${cardId}-title`}
+                    >
                         {event.title}
                     </CardTitle>
                     <div className="flex gap-2">
                         {!event.is_paid && isUpcoming && (
-                            <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                            <span 
+                                className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full"
+                                aria-label="Free event"
+                                data-test-id="free-badge"
+                            >
+
                                 Free
                             </span>
                         )}
                         {event.is_paid && (
-                            <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
+                            <span 
+                                className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full"
+                                aria-label={`Paid event, ${hasPrice ? `starting at ${formatPrice(lowestPrice)}` : 'pricing available'}`}
+                                data-test-id="paid-badge"
+                            >
+
                                 {hasPrice ? formatPrice(lowestPrice) : 'Paid'}
                             </span>
                         )}
                         {isSoon && (
-                            <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded-full">
+                            <span 
+                                className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded-full"
+                                aria-label="Event starting soon"
+                                data-test-id="soon-badge"
+                            >
+
                                 Soon
                             </span>
                         )}
                         {!isUpcoming && (
-                            <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">
+                            <span 
+                                className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full"
+                                aria-label="Past event"
+                                data-test-id="past-badge"
+                            >
+
                                 Past
                             </span>
                         )}
                     </div>
                 </div>
-                <CardDescription className="min-h-[3rem] line-clamp-2 text-sm leading-relaxed">
+                <CardDescription 
+                    className="min-h-[3rem] line-clamp-2 text-sm leading-relaxed"
+                    id={`${cardId}-description`}
+                >
                     {getEventCardDescription(event.description, event.short_description)}
                 </CardDescription>
             </CardHeader>
 
             <CardContent>
-                <div className="space-y-2 text-sm">
+                <div className="space-y-2 text-sm" id={`${cardId}-details`}>
                     <div className="flex items-center gap-2 text-muted-foreground">
-                        <Calendar className="w-4 h-4 flex-shrink-0" />
+                        <Calendar className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
                         <span>{formatDateTime(event.start_time)}</span>
                     </div>
 
                     <div className="flex items-center gap-2 text-muted-foreground">
-                        <MapPin className="w-4 h-4 flex-shrink-0" />
+                        <MapPin className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
                         <span className="line-clamp-2">{formatLocationForCard(event.location)}</span>
                     </div>
 
                     <div className="flex items-center gap-2 text-muted-foreground">
-                        <Users className="w-4 h-4 flex-shrink-0" />
+                        <Users className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
                         <span>
                             {event.rsvp_count} attending
                             {spotsRemaining && spotsRemaining > 0 && ` • ${spotsRemaining} spots left`}
                         </span>
                     </div>
 
                     <div className="flex items-center gap-2 text-muted-foreground">
-                        <Tag className="w-4 h-4 flex-shrink-0" />
+                        <Tag className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
                         <span className="capitalize">{event.category || 'General'}</span>
                     </div>
                 </div>
@@ -258,9 +296,13 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
                 <span className="text-sm text-muted-foreground">
                     by {event.organizer.display_name}
                 </span>
-                <button className="text-blue-600 hover:text-blue-800 font-medium text-sm group-hover:underline flex items-center gap-1">
+                <button 
+                    className="text-blue-600 hover:text-blue-800 font-medium text-sm group-hover:underline flex items-center gap-1"
+                    aria-label={`View details for ${event.title}`}
+                    data-test-id="view-details-button"
+                >
                     View Details
-                    <ExternalLink className="w-3 h-3" />
+                    <ExternalLink className="w-3 h-3" aria-hidden="true" />
                 </button>
             </CardFooter>
         </Card>

components/events/EventDetailClient.tsx

@@ -214,7 +214,7 @@ export function EventDetailClient({ event }: EventDetailClientProps) {
                             {/* Registration/Ticket Section */}
                             {event.is_paid && ticketTypes.length > 0 ? (
                                 checkoutStep === 'tickets' ? (
-                                    <div className="space-y-4" data-test-id="ticket-selection">
+                                    <div className="space-y-4" data-test-id="ticket-section">
                                         <div data-test-id="ticket-selection-component">
                                             <TicketSelection
                                                 eventId={event.id}
@@ -269,7 +269,7 @@ export function EventDetailClient({ event }: EventDetailClientProps) {
                                     </div>
                                 )
                             ) : (
-                                <div data-test-id="rsvp-component">
+                                <div data-test-id="rsvp-section">
                                     <RSVPTicketSection
                                         eventId={event.database_id || event.id}
                                         eventTitle={event.title}

components/ui/Navigation.tsx

@@ -36,15 +36,25 @@ export function Navigation({
 
 
     return (
-        <header className={`bg-card shadow-sm border-b border-border sticky top-0 z-50 ${className}`} data-test-id="homepage-header">
+        <>
+            {/* Skip link for keyboard navigation */}
+            <a
+                href="#main-content"
+                className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-primary focus:text-primary-foreground focus:px-4 focus:py-2 focus:rounded-lg focus:z-[60] focus:outline-none focus:ring-2 focus:ring-ring"
+                data-test-id="skip-to-main-content"
+            >
+                Skip to main content
+            </a>
+            <header className={`bg-card shadow-sm border-b border-border sticky top-0 z-50 ${className}`} data-test-id="homepage-header">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="flex items-center justify-between h-16">
                     {/* Left side - Logo and Admin/Staff Badge */}
                     <div className="flex items-center gap-3">
-                        <Link href="/" className="flex items-center gap-2">
+                        <Link href="/" className="flex items-center gap-2" data-test-id="homepage-logo">
                             <Image 
                                 src="/logo.svg" 
-                                alt="" 
+                                alt="LocalLoop logo" 
+
                                 width={48}
                                 height={48}
                                 className="w-12 h-12" 
@@ -54,15 +64,19 @@ export function Navigation({
 
                         {/* Admin/Staff Badge */}
                         {user && (isAdmin || isStaff) && (
-                            <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${
-                                isAdmin 
-                                    ? 'bg-red-100 text-red-700 border border-red-200' 
-                                    : 'bg-blue-100 text-blue-700 border border-blue-200'
-                            }`}>
+                            <div 
+                                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${
+                                    isAdmin 
+                                        ? 'bg-red-100 text-red-700 border border-red-200' 
+                                        : 'bg-blue-100 text-blue-700 border border-blue-200'
+                                }`}
+                                aria-label={`Current user role: ${isAdmin ? 'Administrator' : 'Staff member'}`}
+                                data-test-id="user-role-badge"
+                            >
                                 {isAdmin ? (
-                                    <Settings className="w-3 h-3" />
+                                    <Settings className="w-3 h-3" aria-hidden="true" />
                                 ) : (
-                                    <Shield className="w-3 h-3" />
+                                    <Shield className="w-3 h-3" aria-hidden="true" />
                                 )}
                                 <span className="hidden sm:inline">
                                     {isAdmin ? 'Admin' : 'Staff'}
@@ -74,10 +88,10 @@ export function Navigation({
                     {/* Right side - Full Navigation (always shown) */}
                     <>
                         {/* Desktop Navigation */}
-                        <nav className="hidden md:flex items-center gap-6" data-test-id="desktop-navigation">
+                        <nav className="hidden md:flex items-center gap-6" aria-label="Primary navigation" data-test-id="desktop-navigation">
 
                             {(isStaff || isAdmin) && (
-                                <Link href="/staff" className="text-muted-foreground hover:text-foreground transition-colors">
+                                <Link href="/staff" className="text-muted-foreground hover:text-foreground transition-colors" data-test-id="staff-link">
                                     Staff
                                 </Link>
                             )}
@@ -95,6 +109,7 @@ export function Navigation({
                             <Link
                                 href="/my-events"
                                 className="text-muted-foreground hover:text-foreground transition-colors"
+                                data-test-id="my-events-link"
                             >
                                 My Events
                             </Link>
@@ -119,6 +134,7 @@ export function Navigation({
                                     className={`bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200 ${
                                         authLoading ? 'opacity-75 pointer-events-none' : 'opacity-100'
                                     }`}
+                                    data-test-id="sign-in-link"
                                 >
                                     Sign In
                                 </Link>
@@ -133,17 +149,17 @@ export function Navigation({
                             data-test-id="mobile-menu-button"
                         >
                             {isMobileMenuOpen ? (
-                                <X className="w-6 h-6 text-muted-foreground" />
+                                <X className="w-6 h-6 text-muted-foreground" aria-hidden="true" />
                             ) : (
-                                <Menu className="w-6 h-6 text-muted-foreground" />
+                                <Menu className="w-6 h-6 text-muted-foreground" aria-hidden="true" />
                             )}
                         </button>
                     </>
                 </div>
 
                 {/* Mobile Navigation */}
                 {isMobileMenuOpen && (
-                    <div className="md:hidden border-t border-border py-4">
+                    <div className="md:hidden border-t border-border py-4" data-test-id="mobile-navigation">
                         {/* Mobile Admin/Staff Badge */}
                         {user && (isAdmin || isStaff) && (
                             <div className="mb-4 flex justify-center">
@@ -162,13 +178,15 @@ export function Navigation({
                             </div>
                         )}
 
-                        <nav className="flex flex-col space-y-4">
+                        <nav className="flex flex-col space-y-4" aria-label="Mobile navigation">
+
 
                             {(isStaff || isAdmin) && (
                                 <Link
                                     href="/staff"
                                     className="text-muted-foreground hover:text-foreground transition-colors py-2"
                                     onClick={() => setIsMobileMenuOpen(false)}
+                                    data-test-id="mobile-staff-link"
                                 >
                                     Staff
                                 </Link>
@@ -179,6 +197,7 @@ export function Navigation({
                                     href="/create-event"
                                     className="text-muted-foreground hover:text-foreground transition-colors py-2"
                                     onClick={() => setIsMobileMenuOpen(false)}
+                                    data-test-id="mobile-create-event-link"
                                 >
                                     Create Event
                                 </Link>
@@ -188,6 +207,7 @@ export function Navigation({
                                 href="/my-events"
                                 className="text-muted-foreground hover:text-foreground transition-colors py-2"
                                 onClick={() => setIsMobileMenuOpen(false)}
+                                data-test-id="mobile-my-events-link"
                             >
                                 My Events
                             </Link>
@@ -198,6 +218,7 @@ export function Navigation({
                                     setIsMobileMenuOpen(false)
                                 }}
                                 className="text-muted-foreground hover:text-foreground transition-colors py-2 text-left"
+                                data-test-id="mobile-browse-events-button"
                             >
                                 Browse Events
                             </button>
@@ -215,6 +236,7 @@ export function Navigation({
                                         authLoading ? 'opacity-75 pointer-events-none' : 'opacity-100'
                                     }`}
                                     onClick={() => setIsMobileMenuOpen(false)}
+                                    data-test-id="mobile-sign-in-link"
                                 >
                                     Sign In
                                 </Link>
@@ -224,5 +246,6 @@ export function Navigation({
                 )}
             </div>
         </header>
+        </>
     )
 } 

components/ui/button.tsx

@@ -6,6 +6,7 @@ export interface ButtonProps
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
     size?: "default" | "sm" | "lg" | "icon"
     asChild?: boolean
+    "data-testid"?: string
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(