From 57e1bb8d9d4e1d06ef650c7f07d2daf37ca71a13 Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Sun, 7 Sep 2025 17:39:42 -0500
Subject: [PATCH] feat(a11y): Improve accessibility of demo cards - change
 outer <div> wrapper to <article> for improved semantic HTML - add
 "aria-labelledby" attribute to explicitly link each demo card to its title

---
 src/demos.njk | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/demos.njk b/src/demos.njk
index 480bbf5..83ddb6e 100644
--- a/src/demos.njk
+++ b/src/demos.njk
@@ -8,9 +8,9 @@ isLandingPage: false
 
 <h1>A Preview of What's Comming!</h1>
 {% for demo in demos.DEMOS %}
-    <div class="{{ demo.id }}-demo-card">
+    <article id="demo-{{ demo.id }}" class="{{ demo.id }}-demo-card" aria-labelledby="demo-title-{{ demo.id }}">
         <div class="{{ demo.id }}-demo module">
-            <h2 class="demo-title">{{ demo.title }}</h2>
+            <h2 id="demo-title-{{ demo.id }}" class="demo-title">{{ demo.title }}</h2>
             <img class="demo-image" src="/images/_demo-thumbs/{{ demo.imageFile }}" alt="{{ demo.altText }}">
             <p class="demo-description">{{ demo.description}}</p>
             <h3>Business Problem</h3>
@@ -24,5 +24,5 @@ isLandingPage: false
             {% endif %}
             <a href="{{ demo.repoUrl }}" class="demo-repo" target="_blank" rel="noopener noreferrer">View Demo's Source Code</a>
         </div>
-    </div>
+    </article>
 {% endfor %}
\ No newline at end of file