feat: Enhance accessibility by adding keyboard shortcut for SkipToContent; update main content areas with appropriate IDs

Author: Punitkumar756

Frontend/src/components/skip-to-content.tsx

@@ -1,4 +1,4 @@
-// Skip to Main Content - Accessibility Component
+// Skip to Main Content - Enhanced Accessibility Component
 import { useEffect } from "react";
 
 export function SkipToContent() {
@@ -16,36 +16,69 @@ export function SkipToContent() {
       }
     };
 
+    // Handle keyboard shortcut (Ctrl+/)
+    const handleKeyboardShortcut = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === "/") {
+        e.preventDefault();
+        const mainContent = document.getElementById("main-content");
+        if (mainContent) {
+          mainContent.focus();
+          mainContent.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    };
+
     document.addEventListener("click", handleSkipClick);
-    return () => document.removeEventListener("click", handleSkipClick);
+    document.addEventListener("keydown", handleKeyboardShortcut);
+    
+    return () => {
+      document.removeEventListener("click", handleSkipClick);
+      document.removeEventListener("keydown", handleKeyboardShortcut);
+    };
   }, []);
 
   return (
-    <a
-      href="#main-content"
-      className="skip-to-content"
-      style={{
-        position: "absolute",
-        left: "-9999px",
-        zIndex: 999,
-        padding: "1rem 1.5rem",
-        backgroundColor: "hsl(262.1, 83.3%, 57.8%)",
-        color: "white",
-        textDecoration: "none",
-        borderRadius: "0 0 0.375rem 0.375rem",
-        fontWeight: 600,
-        fontSize: "0.875rem",
-        transition: "left 0.2s ease-in-out",
-      }}
-      onFocus={(e) => {
-        e.currentTarget.style.left = "1rem";
-        e.currentTarget.style.top = "1rem";
-      }}
-      onBlur={(e) => {
-        e.currentTarget.style.left = "-9999px";
-      }}
-    >
-      Skip to Main Content
-    </a>
+    <>
+      <a
+        href="#main-content"
+        className="skip-to-content"
+        aria-label="Skip to main content"
+        role="navigation"
+        style={{
+          position: "absolute",
+          left: "-9999px",
+          zIndex: 999,
+          padding: "1rem 1.5rem",
+          backgroundColor: "hsl(262.1, 83.3%, 57.8%)",
+          color: "white",
+          textDecoration: "none",
+          borderRadius: "0 0 0.375rem 0.375rem",
+          fontWeight: 600,
+          fontSize: "0.875rem",
+          transition: "left 0.2s ease-in-out",
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.left = "1rem";
+          e.currentTarget.style.top = "1rem";
+          e.currentTarget.style.outline = "3px solid hsl(262.1, 83.3%, 57.8%)";
+          e.currentTarget.style.outlineOffset = "2px";
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.left = "-9999px";
+          e.currentTarget.style.outline = "none";
+        }}
+      >
+        Skip to Main Content (Ctrl+/)
+      </a>
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        Press Tab to navigate, Ctrl+/ to skip to main content
+      </div>
+    </>
   );
 }

Frontend/src/pages/CollaborationDetails.tsx

@@ -390,7 +390,7 @@ export default function CollaborationDetails() {
         </div>
       </div>
 
-      <main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
+      <main id="main-content" tabIndex={-1} className="flex-1 space-y-4 p-4 md:p-8 pt-6">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           {/* Main Content */}
           <div className="lg:col-span-2 space-y-6">

Frontend/src/pages/HomePage.tsx

@@ -466,7 +466,7 @@ export default function HomePage() {
         </header>
 
         {/* Hero Section - Image Left, Text Right, Text More Centered */}
-        <main className="flex-1">
+        <main id="main-content" tabIndex={-1} className="flex-1">
           <section className="w-full min-h-screen flex items-center relative pt-16 overflow-hidden">
             {/* Background elements */}
             <div className="absolute inset-0 bg-gradient-to-br from-purple-100/50 via-blue-100/50 to-indigo-100/50"></div>

Frontend/src/pages/Messages.tsx

@@ -234,7 +234,7 @@ export default function MessagesPage() {
         </div>
       </header>
       {/* Old Code */}
-      <main className="flex-1 hidden">
+      <main id="main-content" tabIndex={-1} className="flex-1 hidden">
         {/* Sidebar */}
         <div className="w-full md:w-175 border-r flex flex-col bg-white dark:bg-gray-900">
           {/* Search Input */}