From bcee044f838fc70044dd19460e9ec785e96ca0e5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:13:10 +0000
Subject: [PATCH 1/9] fix: resolve accessibility issues in hero links and lab
 cards

Wrap hero social links in <nav>/<ul>/<li> for semantic list markup,
and add unique aria-label to each "View details" button to distinguish
links with the same text pointing to different destinations.

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/LabCard.vue      |  1 +
 app/components/landing/Hero.vue | 24 ++++++++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/components/LabCard.vue b/app/components/LabCard.vue
index 54d954d..f4b7785 100644
--- a/app/components/LabCard.vue
+++ b/app/components/LabCard.vue
@@ -62,6 +62,7 @@ defineProps<{
           color="neutral"
           size="sm"
           label="View details"
+          :aria-label="`View details for ${lab.title}`"
         />
         <UButton
           v-if="lab.url"
diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 12d2c1e..028b36d 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -67,14 +67,22 @@ defineProps<{
     </template>
 
     <template #links>
-      <div class="hero-enter hero-enter-4 flex flex-wrap items-center justify-center gap-3">
-        <UButton
-          v-for="link of footer?.links"
-          :key="link['aria-label'] || link.to"
-          v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
-          class="text-highlighted hover:text-highlighted"
-        />
-      </div>
+      <nav
+        aria-label="Social and contact links"
+        class="hero-enter hero-enter-4"
+      >
+        <ul class="flex flex-wrap items-center justify-center gap-3">
+          <li
+            v-for="link of footer?.links"
+            :key="link['aria-label'] || link.to"
+          >
+            <UButton
+              v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
+              class="text-highlighted hover:text-highlighted"
+            />
+          </li>
+        </ul>
+      </nav>
     </template>
   </UPageHero>
 </template>

From 564f66b27b79bf722d5c62384f585d777a264dfb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:17:07 +0000
Subject: [PATCH 2/9] fix: use empty alt on hero profile image to avoid
 redundant text

The image sits next to the visible name, so alt="" is correct per spec.

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/landing/Hero.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 028b36d..7928629 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -34,7 +34,7 @@ defineProps<{
         <NuxtImg
           class="size-18 rounded-full object-cover ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
           :src="avatarSrc"
-          :alt="global.picture?.alt ?? 'Profile picture'"
+          alt=""
           width="72"
           height="72"
           sizes="72px"

From 3a9f68813a0f3c803534140ca691e4ecab517ddd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:19:10 +0000
Subject: [PATCH 3/9] fix: use aria-labelledby on hero image to reference
 adjacent name text

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/landing/Hero.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 7928629..b6d8f35 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -35,6 +35,7 @@ defineProps<{
           class="size-18 rounded-full object-cover ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
           :src="avatarSrc"
           alt=""
+          aria-labelledby="hero-name"
           width="72"
           height="72"
           sizes="72px"
@@ -49,7 +50,10 @@ defineProps<{
     <template #title>
       <div class="space-y-4 text-center">
         <div class="hero-enter hero-enter-1">
-          <p class="text-sm font-medium uppercase tracking-[0.28em] text-muted">
+          <p
+            id="hero-name"
+            class="text-sm font-medium uppercase tracking-[0.28em] text-muted"
+          >
             {{ page.hero.name }}
           </p>
         </div>

From 784c3c2586b1b1491227fd19b1f251dd5183fd88 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:20:19 +0000
Subject: [PATCH 4/9] fix: remove conflicting alt="" from hero image, keep
 aria-labelledby only

alt="" removes the image from the accessibility tree, making aria-labelledby
ineffective. aria-labelledby alone is the correct pattern here.

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/landing/Hero.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index b6d8f35..59957b7 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -34,7 +34,6 @@ defineProps<{
         <NuxtImg
           class="size-18 rounded-full object-cover ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
           :src="avatarSrc"
-          alt=""
           aria-labelledby="hero-name"
           width="72"
           height="72"

From d34f642b2211ea0ca3a0b11912ce2d51eac15fca Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:27:09 +0000
Subject: [PATCH 5/9] fix: use sr-only span for unique lab card link text
 instead of aria-label

aria-label prop forwarding via UButton is unreliable; sr-only text in the
slot is guaranteed to reach the DOM and be announced by screen readers.

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/LabCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/LabCard.vue b/app/components/LabCard.vue
index f4b7785..359964c 100644
--- a/app/components/LabCard.vue
+++ b/app/components/LabCard.vue
@@ -61,9 +61,9 @@ defineProps<{
           icon="i-lucide-arrow-right"
           color="neutral"
           size="sm"
-          label="View details"
-          :aria-label="`View details for ${lab.title}`"
-        />
+        >
+          View details<span class="sr-only"> for {{ lab.title }}</span>
+        </UButton>
         <UButton
           v-if="lab.url"
           :to="lab.url"

From 755d5e73a875e3178f5554b52cb12a79345b327a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:34:22 +0000
Subject: [PATCH 6/9] fix: revert to alt="" on hero image per WCAG H67

aria-labelledby caused the name to be announced twice. Empty alt correctly
marks the image as redundant since the name is already in adjacent text.

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/landing/Hero.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 59957b7..7928629 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -34,7 +34,7 @@ defineProps<{
         <NuxtImg
           class="size-18 rounded-full object-cover ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
           :src="avatarSrc"
-          aria-labelledby="hero-name"
+          alt=""
           width="72"
           height="72"
           sizes="72px"
@@ -49,10 +49,7 @@ defineProps<{
     <template #title>
       <div class="space-y-4 text-center">
         <div class="hero-enter hero-enter-1">
-          <p
-            id="hero-name"
-            class="text-sm font-medium uppercase tracking-[0.28em] text-muted"
-          >
+          <p class="text-sm font-medium uppercase tracking-[0.28em] text-muted">
             {{ page.hero.name }}
           </p>
         </div>

From 3149bac96d1c246b2d634f3b42a6eb1b7bc6815a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:43:56 +0000
Subject: [PATCH 7/9] fix: add sr-only context to all repeated link labels
 across lab and talk cards

Covers: View details, Demo, Repository in LabCard; View details in LabsTeaser
and TalkPreviewCard (speaking listing page and homepage teaser).

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/components/LabCard.vue               | 10 ++++++----
 app/components/landing/LabsTeaser.vue    |  5 +++--
 app/components/talks/TalkPreviewCard.vue |  5 +++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/LabCard.vue b/app/components/LabCard.vue
index 359964c..50f249f 100644
--- a/app/components/LabCard.vue
+++ b/app/components/LabCard.vue
@@ -72,8 +72,9 @@ defineProps<{
           icon="i-lucide-external-link"
           color="neutral"
           size="sm"
-          label="Demo"
-        />
+        >
+          Demo<span class="sr-only"> of {{ lab.title }}</span>
+        </UButton>
         <UButton
           v-if="lab.repoUrl"
           :to="lab.repoUrl"
@@ -82,8 +83,9 @@ defineProps<{
           icon="i-simple-icons-github"
           color="neutral"
           size="sm"
-          label="Repository"
-        />
+        >
+          Repository<span class="sr-only"> for {{ lab.title }}</span>
+        </UButton>
       </div>
     </div>
   </UCard>
diff --git a/app/components/landing/LabsTeaser.vue b/app/components/landing/LabsTeaser.vue
index 8b465ce..6793e7a 100644
--- a/app/components/landing/LabsTeaser.vue
+++ b/app/components/landing/LabsTeaser.vue
@@ -69,8 +69,9 @@ defineProps<{
             color="neutral"
             size="sm"
             icon="i-lucide-arrow-right"
-            label="View details"
-          />
+          >
+            View details<span class="sr-only"> for {{ lab.title }}</span>
+          </UButton>
         </div>
       </div>
     </UCard>
diff --git a/app/components/talks/TalkPreviewCard.vue b/app/components/talks/TalkPreviewCard.vue
index 8788373..91035d2 100644
--- a/app/components/talks/TalkPreviewCard.vue
+++ b/app/components/talks/TalkPreviewCard.vue
@@ -137,8 +137,9 @@ const subtitle = computed(() => {
           color="neutral"
           size="sm"
           icon="i-lucide-arrow-right"
-          :label="primaryAction.label"
-        />
+        >
+          {{ primaryAction.label }}<span class="sr-only"> for {{ talk?.title }}</span>
+        </UButton>
       </div>
     </div>
 

From 7df496604d47dbf6a2423c34227b55f1b2f24451 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:44:51 +0000
Subject: [PATCH 8/9] fix: wrap lab detail page action links in nav/ul/li for
 semantic markup

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/pages/labs/[slug].vue | 56 ++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/pages/labs/[slug].vue b/app/pages/labs/[slug].vue
index 2721129..2bd3244 100644
--- a/app/pages/labs/[slug].vue
+++ b/app/pages/labs/[slug].vue
@@ -50,31 +50,37 @@ const hasImage = computed(() => Boolean(lab.value?.image))
       </template>
 
       <template #links>
-        <div class="flex flex-wrap items-center gap-3">
-          <UButton
-            to="/labs"
-            color="neutral"
-            variant="outline"
-            icon="i-lucide-arrow-left"
-            label="Back to Labs"
-          />
-          <UButton
-            v-if="lab.url"
-            :to="lab.url"
-            target="_blank"
-            color="neutral"
-            icon="i-lucide-external-link"
-            label="Open demo"
-          />
-          <UButton
-            v-if="lab.repoUrl"
-            :to="lab.repoUrl"
-            target="_blank"
-            color="neutral"
-            icon="i-simple-icons-github"
-            label="View repository"
-          />
-        </div>
+        <nav aria-label="Lab actions">
+          <ul class="flex flex-wrap items-center gap-3 list-none p-0">
+            <li>
+              <UButton
+                to="/labs"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-arrow-left"
+                label="Back to Labs"
+              />
+            </li>
+            <li v-if="lab.url">
+              <UButton
+                :to="lab.url"
+                target="_blank"
+                color="neutral"
+                icon="i-lucide-external-link"
+                label="Open demo"
+              />
+            </li>
+            <li v-if="lab.repoUrl">
+              <UButton
+                :to="lab.repoUrl"
+                target="_blank"
+                color="neutral"
+                icon="i-simple-icons-github"
+                label="View repository"
+              />
+            </li>
+          </ul>
+        </nav>
       </template>
 
       <template #default>

From 36959ab4652c6f0c13db9032c54e49cc152ad0d0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 9 May 2026 21:54:10 +0000
Subject: [PATCH 9/9] fix: wrap speaking detail page action links in nav/ul/li
 for semantic markup

Mirrors the labs detail page fix; tools skip nav landmarks when checking
for redundant links, so this also resolves the back-link redundancy warning.

https://claude.ai/code/session_01McFq4WpibdejyTF9WPHYrv
---
 app/pages/speaking/[slug].vue | 39 ++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/pages/speaking/[slug].vue b/app/pages/speaking/[slug].vue
index 8e37f15..3755b4a 100644
--- a/app/pages/speaking/[slug].vue
+++ b/app/pages/speaking/[slug].vue
@@ -77,23 +77,28 @@ const resourceKindLabels: Record<ResolvedTalkResource['kind'], string> = {
       </template>
 
       <template #links>
-        <div class="flex flex-wrap items-center gap-3">
-          <UButton
-            to="/speaking"
-            color="neutral"
-            variant="outline"
-            icon="i-lucide-arrow-left"
-            label="Back to Speaking"
-          />
-          <UButton
-            v-if="talk.url"
-            :to="talk.url"
-            target="_blank"
-            color="neutral"
-            icon="i-lucide-external-link"
-            label="View organizer session"
-          />
-        </div>
+        <nav aria-label="Talk actions">
+          <ul class="flex flex-wrap items-center gap-3 list-none p-0">
+            <li>
+              <UButton
+                to="/speaking"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-arrow-left"
+                label="Back to Speaking"
+              />
+            </li>
+            <li v-if="talk.url">
+              <UButton
+                :to="talk.url"
+                target="_blank"
+                color="neutral"
+                icon="i-lucide-external-link"
+                label="View organizer session"
+              />
+            </li>
+          </ul>
+        </nav>
       </template>
 
       <template #default>