From a21c4db647197a9c0b0bebd348d0a8842c9f89b0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 27 Jun 2026 21:44:39 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=95=B8=EF=B8=8F=20Spider:=20Add=20ARIA=20?=
 =?UTF-8?q?roles=20to=20AnnouncementPopup=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` attributes to the AnnouncementPopup modal component to improve semantic HTML structure and make it accessible and understandable for both screen readers and search engine crawlers.

Co-authored-by: kourdroid <36898160+kourdroid@users.noreply.github.com>
---
 .jules/spider.md                           | 2 ++
 src/components/AnnouncementPopup/index.tsx | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.jules/spider.md b/.jules/spider.md
index 572ac48..3dab004 100644
--- a/.jules/spider.md
+++ b/.jules/spider.md
@@ -10,3 +10,5 @@
 ## 2024-05-19 - Typechecking JSON-LD Date Properties
 **Learning:** When passing potentially null date fields (like `publishedAt`, `updatedAt`) from Payload CMS to jsonLd generator functions, using the fields directly can cause strict TypeScript compilation failures since the schemas explicitly expect `string | undefined` and not `null`.
 **Action:** Always use the logical OR operator with `undefined` (e.g., `datePublished: post.publishedAt || undefined`) when passing date properties to JSON-LD generator functions to satisfy strict type requirements and prevent build regressions.
+
+## 2024-06-27 - [Added dialog roles] **Learning:** Modals using Framer Motion (`motion.div`) in this codebase often act as dialogs but miss proper ARIA roles out of the box. **Action:** Always check interactive popups/modals for `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` attributes to ensure they are accessible and their semantic structure is understood by crawlers.
diff --git a/src/components/AnnouncementPopup/index.tsx b/src/components/AnnouncementPopup/index.tsx
index d7d89db..386cfce 100644
--- a/src/components/AnnouncementPopup/index.tsx
+++ b/src/components/AnnouncementPopup/index.tsx
@@ -109,12 +109,16 @@ export const AnnouncementPopup: React.FC<AnnouncementPopupProps> = ({ announceme
             />
 
             {/* Modal Content */}
+            {/* SEO: Added role="dialog", aria-modal="true", and aria-labelledby for proper semantic structure and accessibility for screen readers and crawlers */}
             <motion.div
               initial={{ opacity: 0, scale: 0.95, y: 20 }}
               animate={{ opacity: 1, scale: 1, y: 0 }}
               exit={{ opacity: 0, scale: 0.95, y: 20 }}
               transition={{ type: 'spring', duration: 0.5, bounce: 0.3 }}
               className="relative flex max-h-[85vh] w-full max-w-[1000px] flex-col overflow-hidden rounded-[20px] border border-white/10 bg-[#0A0A0A] shadow-2xl"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="announcement-title"
             >
               {/* Noise Overlay */}
               <div
@@ -153,7 +157,7 @@ export const AnnouncementPopup: React.FC<AnnouncementPopupProps> = ({ announceme
                 {/* Right Side: Content */}
                 <div className="flex w-full flex-col justify-between overflow-hidden p-5 sm:p-6 lg:w-1/2 lg:p-8">
                   {/* Title */}
-                  <h2 className="mb-2 font-heading text-2xl font-black uppercase tracking-tighter text-white sm:text-3xl lg:text-4xl">
+                  <h2 id="announcement-title" className="mb-2 font-heading text-2xl font-black uppercase tracking-tighter text-white sm:text-3xl lg:text-4xl">
                     {title}
                   </h2>