Added aria lables and roles

Author: BekahHW

src/components/Welcome.astro

@@ -55,18 +55,18 @@ const resources = [
   Skip to main content
 </a>
 
-<header class="sticky top-0 bg-white dark:bg-gray-900 shadow-sm z-30">
+<header class="sticky top-0 bg-white dark:bg-gray-900 shadow-sm z-30" role="banner">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between h-16">
       <!-- Logo/Brand -->
       <div class="flex items-center">
-        <a href="/" class="flex-shrink-0 flex items-center">
+        <a href="/" class="flex-shrink-0 flex items-center" aria-label="OSS Communities Homepage">
           <span class="text-xl font-bold bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent">OSS Communities</span>
         </a>
       </div>
 
       <!-- Desktop Navigation -->
-      <nav class="hidden md:flex space-x-8 items-center">
+      <nav class="hidden md:flex space-x-8 items-center" aria-label="Main navigation" role="navigation">
         <a href="/#tips" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Weekly Tips</a>
         <a href="/#shoutouts" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Shoutouts</a>
         <a href="/#courses" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 px-3 py-2 text-sm font-medium">Courses</a>
@@ -76,10 +76,17 @@ const resources = [
 
       <!-- Mobile menu button -->
       <div class="md:hidden flex items-center">
-        <button type="button" id="mobile-menu-button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500">
+        <button 
+          type="button" 
+          id="mobile-menu-button" 
+          class="text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          aria-label="Open main menu"
+          aria-expanded="false"
+          aria-controls="mobile-menu"
+        >
           <span class="sr-only">Open main menu</span>
           <!-- Icon for menu (3 horizontal lines) -->
-          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
           </svg>
         </button>
@@ -88,7 +95,7 @@ const resources = [
   </div>
 
   <!-- Mobile Navigation -->
-  <div class="hidden md:hidden" id="mobile-menu">
+  <div class="hidden md:hidden" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
     <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
       <a href="/#tips" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">Weekly Tips</a>
       <a href="/#shoutouts" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">Shoutouts</a>
@@ -100,14 +107,33 @@ const resources = [
 </header>
 
 <script>
-  // Simple toggle for mobile menu
+  // Enhanced mobile menu toggle with ARIA state management
   document.addEventListener('DOMContentLoaded', () => {
     const mobileMenuButton = document.getElementById('mobile-menu-button');
     const mobileMenu = document.getElementById('mobile-menu');
 
     mobileMenuButton?.addEventListener('click', () => {
+      const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
+      mobileMenuButton.setAttribute('aria-expanded', (!isExpanded).toString());
       mobileMenu?.classList.toggle('hidden');
     });
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!mobileMenuButton?.contains(event.target as Node) && !mobileMenu?.contains(event.target as Node)) {
+        mobileMenu?.classList.add('hidden');
+        mobileMenuButton?.setAttribute('aria-expanded', 'false');
+      }
+    });
+
+    // Close mobile menu on escape key
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !mobileMenu?.classList.contains('hidden')) {
+        mobileMenu?.classList.add('hidden');
+        mobileMenuButton?.setAttribute('aria-expanded', 'false');
+        mobileMenuButton?.focus();
+      }
+    });
   });
 </script>
 
@@ -142,27 +168,27 @@ const resources = [
 </script>
 
 <!-- Sticky Work in Progress Banner -->
-<div class="sticky top-0 bg-gradient-to-r from-orange-500 to-red-500 text-white py-6 px-6 text-center font-medium z-50 shadow-lg">
+<div class="sticky top-0 bg-gradient-to-r from-orange-500 to-red-500 text-white py-6 px-6 text-center font-medium z-50 shadow-lg" role="alert" aria-live="polite">
   <div class="max-w-6xl mx-auto flex items-center justify-center gap-2 text-sm md:text-base">
-    <span class="text-lg">⚠️</span>
+    <span class="text-lg" aria-hidden="true">⚠️</span>
     <span class="font-semibold text-lg">PREVIEW SITE:</span>
     <span class="text-lg">This is a work-in-progress with placeholder data. Nothing is functional yet!</span>
-    <span class="text-lg">⚠️</span>
+    <span class="text-lg" aria-hidden="true">⚠️</span>
   </div>
 </div>
 
 <!-- Main Content -->
-<main id="main-content">
+<main id="main-content" role="main">
 <!-- Hero Section -->
-<section class="min-h-[80vh] flex flex-col justify-center items-center text-center px-4 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 z-0"></div>
+<section class="min-h-[80vh] flex flex-col justify-center items-center text-center px-4 relative overflow-hidden" aria-labelledby="hero-heading">
+    <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 z-0" aria-hidden="true"></div>
     <!-- Simple animated element -->
-    <div class="absolute inset-0 z-0">
+    <div class="absolute inset-0 z-0" aria-hidden="true">
       <div class="animate-float absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-blue-400/10 blur-3xl"></div>
       <div class="animate-float-delayed absolute bottom-1/4 right-1/3 w-96 h-96 rounded-full bg-purple-500/10 blur-3xl"></div>
     </div>
     <div class="relative z-10 max-w-4xl mx-auto">
-      <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent">
+      <h1 id="hero-heading" class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent">
         Open Source Communities
       </h1>
       <p class="text-xl md:text-2xl text-gray-900 dark:text-black mb-8 max-w-2xl mx-auto">
@@ -237,6 +263,8 @@ const resources = [
               <a
                 href="https://airtable.com/embed/YOUR_FORM_ID"
                 target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Submit a shoutout (opens in new window)"
                 class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-700 to-pink-700 text-white font-medium hover:opacity-90 transition-all"
               >
                 Submit a Shoutout
@@ -259,7 +287,7 @@ const resources = [
                     <p class="text-sm text-gray-700 dark:text-gray-300">to {shoutout.to}</p>
                   </div>
                   {shoutout.githubLink && (
-                    <a href={shoutout.githubLink} target="_blank" class="text-purple-700 hover:text-purple-900 dark:text-purple-300 dark:hover:text-purple-200">
+                    <a href={shoutout.githubLink} target="_blank" rel="noopener noreferrer" aria-label={`View ${shoutout.to} on GitHub`} class="text-purple-700 hover:text-purple-900 dark:text-purple-300 dark:hover:text-purple-200">
                       <span class="sr-only">GitHub</span>
                       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                         <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
@@ -287,6 +315,8 @@ const resources = [
           <a 
             href={course.url}
             target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`${course.title}: ${course.description} (opens in new window)`}
             class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-[1.02] group"
           >
             <div class="p-8">
@@ -320,6 +350,8 @@ const resources = [
           <a 
             href={resource.url}
             target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Visit ${resource.name} (opens in new window)`}
             class="bg-white dark:bg-gray-800 rounded-lg p-4 flex justify-center items-center border-2 border-transparent hover:border-purple-500 transition-all hover:shadow-md"
           >
             <span class="font-medium text-gray-900 dark:text-white">{resource.name}</span>