From b3ad4df91410e7071b7a6867583970f440d2c562 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 13:16:39 +0200
Subject: [PATCH 1/8] fix(a11y): apply external a11y-skill audit findings

Audited against frontend-a11y (mikemai2awesome), accessibility-skills
(mgifford), and the Intopia web-accessibility skill.

- Navbar: hamburger keeps a constant `aria-label="Menu"`; `aria-expanded`
  carries open/closed instead of flipping the name (keep-name-constant rule).
- ConsentBanner: drop redundant `title` on the reset button (title attribute
  is for `<iframe>` only; `aria-label` already names it).
- AboutSection, ChallengeHighlights: drop synthetic `<section aria-label>`
  landmarks with no real heading; render plain `<div>`s so the landmarks menu
  is not cluttered by generically named regions.
- SolutionDetail: rename the sidebar `<aside>` label from "Solution navigation"
  to "Solution sidebar" (it is a complementary region, not navigation).
- External links: move the "opens in a new tab" hint out of each link's
  accessible name into a single shared hidden `#new-tab-hint` node referenced
  via `aria-describedby`. Removes the inline sr-only spans and the phrase from
  social-icon `aria-label`s across components and pages, and updates the
  adventure generator (`annotateExternalLinks`) to emit `aria-describedby`.
- Update tests and styleguide for the new external-link pattern.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 scripts/generate-adventures.mjs        | 12 +++++--
 src/Layout.tsx                         |  5 +++
 src/components/AboutSection.tsx        |  4 +--
 src/components/BottomCTA.tsx           |  8 ++---
 src/components/ChallengeHighlights.tsx |  4 +--
 src/components/ChallengeShareLinks.tsx | 16 ++++-----
 src/components/CodespacesButton.tsx    |  4 +--
 src/components/CommunitySection.tsx    |  4 +--
 src/components/CommunitySidebar.tsx    |  4 +--
 src/components/ConsentBanner.tsx       |  1 -
 src/components/ContributorBadge.tsx    |  4 +--
 src/components/DiscussionSection.tsx   |  8 ++---
 src/components/Footer.tsx              | 16 ++++-----
 src/components/Hero.tsx                |  4 +--
 src/components/LevelCard.tsx           |  8 ++---
 src/components/Navbar.tsx              |  6 ++--
 src/components/PageHero.tsx            |  4 +--
 src/components/PersonNameLink.tsx      |  4 +--
 src/components/RewardsCard.tsx         |  8 ++---
 src/pages/Accessibility.tsx            | 20 +++++------
 src/pages/ChallengeDetail.tsx          | 18 +++++-----
 src/pages/CommunityGuide.tsx           | 28 +++++++--------
 src/pages/Contribute.tsx               | 48 +++++++++++++-------------
 src/pages/Index.tsx                    |  4 +--
 src/pages/Privacy.tsx                  | 12 +++----
 src/pages/SolutionDetail.tsx           | 14 ++++----
 src/pages/Sponsors.tsx                 |  4 +--
 src/test/footer.test.tsx               | 15 ++++----
 src/test/layout.test.tsx               | 15 ++++++++
 src/test/navbar.test.tsx               | 38 ++++++++++----------
 src/test/pageHero.test.tsx             |  6 ++--
 src/test/rewardsCard.test.tsx          |  4 +--
 styleguide.md                          | 38 ++++++++++++++------
 33 files changed, 216 insertions(+), 172 deletions(-)

diff --git a/scripts/generate-adventures.mjs b/scripts/generate-adventures.mjs
index 72388209e..293bf8968 100644
--- a/scripts/generate-adventures.mjs
+++ b/scripts/generate-adventures.mjs
@@ -176,8 +176,11 @@ const mdProcessor = unified()
   .use(expandAbbr)
   .use(rehypeStringify);
 
-/** Add target/rel/sr-only to http/https <a> tags. The external link icon is
- *  rendered via CSS ::after on [target="_blank"] — no inline SVG needed. */
+/** Add target/rel and the shared "opens in a new tab" hint to http/https <a>
+ *  tags. The hint is exposed as an accessible description via
+ *  aria-describedby="new-tab-hint" (a single hidden node rendered once in
+ *  Layout.tsx), not folded into each link's accessible name. The external link
+ *  icon is rendered via CSS ::after on [target="_blank"] — no inline SVG. */
 function annotateExternalLinks(html) {
   return html.replace(
     /<a href="(https?:\/\/[^"]+)"([^>]*)>([\s\S]*?)<\/a>/gi,
@@ -185,7 +188,10 @@ function annotateExternalLinks(html) {
       const attrs = restAttrs.includes("target=")
         ? restAttrs
         : ` target="_blank" rel="noopener noreferrer"${restAttrs}`;
-      return `<a href="${href}"${attrs}>${content}<span class="sr-only"> (opens in new tab)</span></a>`;
+      const described = restAttrs.includes("aria-describedby=")
+        ? attrs
+        : `${attrs} aria-describedby="new-tab-hint"`;
+      return `<a href="${href}"${described}>${content}</a>`;
     }
   );
 }
diff --git a/src/Layout.tsx b/src/Layout.tsx
index b7ef3d381..a677732d0 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -145,6 +145,11 @@ export function Layout(): JSX.Element {
         <FocusReset />
         <RouteAnnouncer />
         <ThemeAnnouncer />
+        {/* Shared description for every external link. Referenced via
+            aria-describedby="new-tab-hint" so the "opens in a new tab" hint is
+            an accessible description, not part of each link's accessible name.
+            hidden still resolves for aria-describedby. */}
+        <span id="new-tab-hint" hidden>opens in a new tab</span>
         <PageViewTracker />
         <ClickTracker />
         <ConsentBanner />
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index 5ef6e0827..5849822db 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -5,7 +5,7 @@ import { SectionLabel } from "@/components/SectionLabel";
 
 export const AboutSection = (): JSX.Element => {
   return (
-    <section id="approach" aria-label="Our foundation" className="pb-16">
+    <div id="approach" className="pb-16">
       <div>
         <SectionLabel>our foundation</SectionLabel>
 
@@ -81,6 +81,6 @@ export const AboutSection = (): JSX.Element => {
           </div>
         </div>
       </div>
-    </section>
+    </div>
   );
 };
diff --git a/src/components/BottomCTA.tsx b/src/components/BottomCTA.tsx
index b05a22d77..2ac967421 100644
--- a/src/components/BottomCTA.tsx
+++ b/src/components/BottomCTA.tsx
@@ -34,18 +34,18 @@ export const BottomCTA = (): JSX.Element => {
               <a
                 href={COMMUNITY_URL}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
               className="btn-inverse"
               >
-                Join the Community <ExternalLink size={14} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                Join the Community <ExternalLink size={14} aria-hidden="true" />
               </a>
               <a
                 href="https://github.com/off-on-dev/open-source-challenges"
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
               className="btn-ghost-inverse"
               >
-                View Challenges on GitHub <ExternalLink size={14} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                View Challenges on GitHub <ExternalLink size={14} aria-hidden="true" />
               </a>
             </div>
           </div>
diff --git a/src/components/ChallengeHighlights.tsx b/src/components/ChallengeHighlights.tsx
index a0de173fa..9e2ebf8bd 100644
--- a/src/components/ChallengeHighlights.tsx
+++ b/src/components/ChallengeHighlights.tsx
@@ -27,7 +27,7 @@ const highlights: Highlight[] = [
 
 export const ChallengeHighlights = (): JSX.Element => {
   return (
-    <section aria-label="Challenge highlights" className="bg-card py-16 px-6 md:px-16 border-y border-border">
+    <div className="bg-card py-16 px-6 md:px-16 border-y border-border">
       <div className="mx-auto max-w-6xl grid gap-8 sm:grid-cols-3">
         {highlights.map((h) => (
           <div key={h.title} className="flex gap-4">
@@ -39,6 +39,6 @@ export const ChallengeHighlights = (): JSX.Element => {
           </div>
         ))}
       </div>
-    </section>
+    </div>
   );
 };
diff --git a/src/components/ChallengeShareLinks.tsx b/src/components/ChallengeShareLinks.tsx
index be60357a6..fb3372467 100644
--- a/src/components/ChallengeShareLinks.tsx
+++ b/src/components/ChallengeShareLinks.tsx
@@ -22,8 +22,8 @@ export const ChallengeShareLinks = ({ url, levelName }: Props): JSX.Element => {
       <a
         href={linkedinHref}
         target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Share on LinkedIn (opens in new tab)"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
+        aria-label="Share on LinkedIn"
         className="social-icon-link"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
@@ -33,8 +33,8 @@ export const ChallengeShareLinks = ({ url, levelName }: Props): JSX.Element => {
       <a
         href={xHref}
         target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Share on X / Twitter (opens in new tab)"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
+        aria-label="Share on X / Twitter"
         className="social-icon-link"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
@@ -44,8 +44,8 @@ export const ChallengeShareLinks = ({ url, levelName }: Props): JSX.Element => {
       <a
         href={blueskyHref}
         target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Share on Bluesky (opens in new tab)"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
+        aria-label="Share on Bluesky"
         className="social-icon-link"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
@@ -55,8 +55,8 @@ export const ChallengeShareLinks = ({ url, levelName }: Props): JSX.Element => {
       <a
         href={mastodonHref}
         target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Share on Mastodon (opens in new tab)"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
+        aria-label="Share on Mastodon"
         className="social-icon-link"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
diff --git a/src/components/CodespacesButton.tsx b/src/components/CodespacesButton.tsx
index 33afdfe61..28f6c4f5a 100644
--- a/src/components/CodespacesButton.tsx
+++ b/src/components/CodespacesButton.tsx
@@ -11,11 +11,11 @@ export const CodespacesButton = ({ href, fullWidth = false }: CodespacesButtonPr
     <a
       href={href}
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener noreferrer" aria-describedby="new-tab-hint"
       className={fullWidth ? "btn-primary w-full justify-center" : "btn-primary w-fit"}
     >
       Open in Codespaces <ExternalLink size={14} aria-hidden="true" />
-      <span className="sr-only"> (opens in new tab)</span>
+      
     </a>
     <p className={`mt-2.5 text-xs text-faint font-mono${fullWidth ? " text-center" : ""}`}>
       Free GitHub account required
diff --git a/src/components/CommunitySection.tsx b/src/components/CommunitySection.tsx
index 84a1d8ae1..8104d15a3 100644
--- a/src/components/CommunitySection.tsx
+++ b/src/components/CommunitySection.tsx
@@ -65,10 +65,10 @@ export const CommunitySection = ({ aside }: { aside?: ReactNode }): JSX.Element
             <a
               href={card.href}
               target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer" aria-describedby="new-tab-hint"
               className="docs-ext-link mt-5 text-sm font-medium"
             >
-              {card.cta} <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+              {card.cta} <ExternalLink size={12} aria-hidden="true" />
             </a>
           </div>
         ))}
diff --git a/src/components/CommunitySidebar.tsx b/src/components/CommunitySidebar.tsx
index 7e8b7475f..c18a14135 100644
--- a/src/components/CommunitySidebar.tsx
+++ b/src/components/CommunitySidebar.tsx
@@ -131,13 +131,13 @@ export const CommunitySidebar = ({
         <a
           href={hasThread ? discussionUrl : COMMUNITY_URL}
           target="_blank"
-          rel="noopener noreferrer"
+          rel="noopener noreferrer" aria-describedby="new-tab-hint"
           className="btn-soft w-full"
         >
           <MessageCircle size={14} aria-hidden="true" />
           {hasThread ? "Share & Discuss" : "Join the Community"}
           <ExternalLink size={14} aria-hidden="true" />
-          <span className="sr-only"> (opens in new tab)</span>
+          
         </a>
         <p className="mt-2.5 text-xs text-faint font-mono text-center">
           Get help or share your solution
diff --git a/src/components/ConsentBanner.tsx b/src/components/ConsentBanner.tsx
index ba20eb24f..4b014314a 100644
--- a/src/components/ConsentBanner.tsx
+++ b/src/components/ConsentBanner.tsx
@@ -35,7 +35,6 @@ export function ConsentBanner(): JSX.Element {
           type="button"
           onClick={reset}
           aria-label="Reset cookie preferences"
-          title="Reset cookie preferences"
           style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5rem)' }}
           className="fixed right-4 z-50 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus-ring"
         >
diff --git a/src/components/ContributorBadge.tsx b/src/components/ContributorBadge.tsx
index 016843788..2c6674a73 100644
--- a/src/components/ContributorBadge.tsx
+++ b/src/components/ContributorBadge.tsx
@@ -28,12 +28,12 @@ export const ContributorBadge = ({ name, url, glow = false, label = "Challenge B
       <a
         href={url}
         target="_blank"
-        rel="noopener noreferrer"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
         className={`${pillClass} hover:border-primary/40 hover:bg-primary/10 transition-colors focus-ring-tight`}
       >
         {content}
         <ExternalLink size={11} aria-hidden="true" />
-        <span className="sr-only"> (opens in new tab)</span>
+        
       </a>
     );
   }
diff --git a/src/components/DiscussionSection.tsx b/src/components/DiscussionSection.tsx
index 6b40b322a..11bc1d50f 100644
--- a/src/components/DiscussionSection.tsx
+++ b/src/components/DiscussionSection.tsx
@@ -24,10 +24,10 @@ export const DiscussionSection = ({ adventureId, levelId, discussionUrl }: Discu
     <a
       href={discussionUrl || COMMUNITY_URL}
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener noreferrer" aria-describedby="new-tab-hint"
       className="docs-ext-link mt-4 text-sm font-medium"
     >
-      Join the Discussion on {COMMUNITY_DISPLAY_NAME} <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+      Join the Discussion on {COMMUNITY_DISPLAY_NAME} <ExternalLink size={12} aria-hidden="true" />
     </a>
   );
 
@@ -58,7 +58,7 @@ export const DiscussionSection = ({ adventureId, levelId, discussionUrl }: Discu
               key={`${post.username}-${post.created_at}`}
               href={post.topicUrl}
               target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer" aria-describedby="new-tab-hint"
               className="block card-glow rounded-xl border border-border bg-[hsl(var(--surface))] p-5 transition-all focus-ring"
             >
               <div className="flex items-center justify-between mb-3">
@@ -101,7 +101,7 @@ export const DiscussionSection = ({ adventureId, levelId, discussionUrl }: Discu
                 {isCertificatePost(post) && <Trophy size={14} className="inline mr-1 text-primary" aria-hidden="true" />}
                 {displaySnippet(post)}
               </p>
-              <span className="sr-only"> (opens in new tab)</span>
+              
             </a>
           ))}
           {joinLink}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ef1ef4472..0b9da9606 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -42,8 +42,8 @@ export const Footer = (): JSX.Element => {
             <nav aria-label="Community">
               <p className="font-sans font-normal text-xs uppercase tracking-widest text-faint mb-3">community</p>
               <div className="flex flex-col">
-                <a href={COMMUNITY_URL} target="_blank" rel="noopener noreferrer" className={linkCls}>Community Hub <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span></a>
-                <a href={CODE_OF_CONDUCT_URL} target="_blank" rel="noopener noreferrer" className={linkCls}>Code of Conduct <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span></a>
+                <a href={COMMUNITY_URL} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={linkCls}>Community Hub <ExternalLink size={12} aria-hidden="true" /></a>
+                <a href={CODE_OF_CONDUCT_URL} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={linkCls}>Code of Conduct <ExternalLink size={12} aria-hidden="true" /></a>
                 <NavLink to="/privacy/" className={linkCls}>Privacy Policy</NavLink>
                 <NavLink to="/accessibility/" className={linkCls}>Accessibility</NavLink>
                 <a href={`mailto:${CONTACT_EMAIL}`} className={linkCls}>Contact</a>
@@ -68,8 +68,8 @@ export const Footer = (): JSX.Element => {
             <a
               href={LINKEDIN_URL}
               target="_blank"
-              rel="noopener noreferrer"
-              aria-label="LinkedIn (opens in new tab)"
+              rel="noopener noreferrer" aria-describedby="new-tab-hint"
+              aria-label="LinkedIn"
               className="flex items-center justify-center p-3 text-faint hover:text-foreground dark:hover:text-primary transition-colors focus-ring-tight rounded-sm"
             >
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
@@ -79,8 +79,8 @@ export const Footer = (): JSX.Element => {
             <a
               href={BLUESKY_URL}
               target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Bluesky (opens in new tab)"
+              rel="noopener noreferrer" aria-describedby="new-tab-hint"
+              aria-label="Bluesky"
               className="flex items-center justify-center p-3 text-faint hover:text-foreground dark:hover:text-primary transition-colors focus-ring-tight rounded-sm"
             >
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
@@ -90,8 +90,8 @@ export const Footer = (): JSX.Element => {
             <a
               href={X_URL}
               target="_blank"
-              rel="noopener noreferrer"
-              aria-label="X / Twitter (opens in new tab)"
+              rel="noopener noreferrer" aria-describedby="new-tab-hint"
+              aria-label="X / Twitter"
               className="flex items-center justify-center p-3 text-faint hover:text-foreground dark:hover:text-primary transition-colors focus-ring-tight rounded-sm"
             >
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-3.5 h-3.5" fill="currentColor">
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index fb25e2a58..0f133b4f9 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -42,10 +42,10 @@ export const Hero = (): JSX.Element => {
               <a
                 href={COMMUNITY_URL}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
                 className="btn-ghost"
               >
-                Join the Community <ExternalLink size={16} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                Join the Community <ExternalLink size={16} aria-hidden="true" />
               </a>
             </div>
       </div>
diff --git a/src/components/LevelCard.tsx b/src/components/LevelCard.tsx
index 5b84bfd08..761fab366 100644
--- a/src/components/LevelCard.tsx
+++ b/src/components/LevelCard.tsx
@@ -37,10 +37,10 @@ export const LevelCard = ({ level, headingLevel = "h2" }: LevelCardProps): JSX.E
     <a
       href={level.codespacesUrl}
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener noreferrer" aria-describedby="new-tab-hint"
       className="btn-primary"
     >
-      Open in GitHub Codespaces <ExternalLink size={14} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+      Open in GitHub Codespaces <ExternalLink size={14} aria-hidden="true" />
     </a>
     <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
       <p className="text-xs text-faint font-mono">
@@ -49,8 +49,8 @@ export const LevelCard = ({ level, headingLevel = "h2" }: LevelCardProps): JSX.E
       <a
         href={level.discussionUrl}
         target="_blank"
-        rel="noopener noreferrer"
-        aria-label={`Discussion for ${level.name} (opens in new tab)`}
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
+        aria-label={`Discussion for ${level.name}`}
         className="docs-ext-link text-xs font-medium"
       >
         Discussion <ExternalLink size={12} aria-hidden="true" />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 58d533302..ae04f726c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -44,11 +44,11 @@ const NavLinks = ({ onNavigate }: NavLinksProps): JSX.Element => (
       <a
         href={COMMUNITY_URL}
         target="_blank"
-        rel="noopener noreferrer"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
         className={linkCls}
         onClick={onNavigate}
       >
-        Community <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+        Community <ExternalLink size={12} aria-hidden="true" />
       </a>
     </li>
     <li className="contents">
@@ -135,7 +135,7 @@ export const Navbar = (): JSX.Element => {
             ref={triggerRef}
             onClick={() => setMenuOpen((o) => !o)}
             className="flex h-11 w-11 items-center justify-center rounded-md border border-border bg-[hsl(var(--surface))] text-foreground/70 hover:text-foreground transition-all focus-ring"
-            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            aria-label="Menu"
             aria-expanded={menuOpen}
             aria-controls="mobile-menu"
           >
diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
index 968144ce1..099dd7b3a 100644
--- a/src/components/PageHero.tsx
+++ b/src/components/PageHero.tsx
@@ -22,9 +22,9 @@ const renderCta = (cta: Cta, isPrimary: boolean): JSX.Element => {
 
   if (cta.external) {
     return (
-      <a key={cta.href} href={cta.href} target="_blank" rel="noopener noreferrer" className={cls}>
+      <a key={cta.href} href={cta.href} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={cls}>
         {cta.label}
-        <span className="sr-only"> (opens in new tab)</span>
+        
       </a>
     );
   }
diff --git a/src/components/PersonNameLink.tsx b/src/components/PersonNameLink.tsx
index bd2853f8a..bf25b0ff6 100644
--- a/src/components/PersonNameLink.tsx
+++ b/src/components/PersonNameLink.tsx
@@ -15,12 +15,12 @@ export const PersonNameLink = ({ name, url }: PersonNameLinkProps): JSX.Element
     <a
       href={url}
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener noreferrer" aria-describedby="new-tab-hint"
       className="docs-ext-link text-base font-semibold"
     >
       {name}
       <ExternalLink size={12} aria-hidden="true" />
-      <span className="sr-only"> (opens in new tab)</span>
+      
     </a>
   );
 };
diff --git a/src/components/RewardsCard.tsx b/src/components/RewardsCard.tsx
index c39f8be8c..13f080ac9 100644
--- a/src/components/RewardsCard.tsx
+++ b/src/components/RewardsCard.tsx
@@ -28,12 +28,12 @@ export const RewardsCard = ({ rewards, compact = false, levelDeadline, deadlineP
             <a
               href={`${COMMUNITY_URL}/c/community-voices/38`}
               target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer" aria-describedby="new-tab-hint"
               className="docs-ext-link"
             >
               Community Voices
               <ExternalLink size={10} aria-hidden="true" />
-              <span className="sr-only"> (opens in new tab)</span>
+              
             </a>
             .
           </p>
@@ -67,12 +67,12 @@ export const RewardsCard = ({ rewards, compact = false, levelDeadline, deadlineP
           <a
             href={rewards.rankingRulesUrl}
             target="_blank"
-            rel="noopener noreferrer"
+            rel="noopener noreferrer" aria-describedby="new-tab-hint"
             className="docs-ext-link"
           >
             See the points & ranking rules for the full breakdown
             <ExternalLink size={10} aria-hidden="true" />
-            <span className="sr-only"> (opens in new tab)</span>
+            
           </a>
         )}
       </p>
diff --git a/src/pages/Accessibility.tsx b/src/pages/Accessibility.tsx
index 55f955af7..ed3b5b848 100644
--- a/src/pages/Accessibility.tsx
+++ b/src/pages/Accessibility.tsx
@@ -42,10 +42,10 @@ const Accessibility = (): JSX.Element => {
             <ul role="list" className={list}>
               <li>
                 <strong>Target:</strong>{" "}
-                <a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noopener noreferrer" className={link}>
+                <a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={link}>
                   {/* Plain <abbr> (no tabIndex) inside a link: the link is the
                       interactive element; AT reads the title attribute natively. */}
-                  <abbr data-title="Web Content Accessibility Guidelines" aria-label="Web Content Accessibility Guidelines">WCAG</abbr> 2.2 Level <abbr data-title="double-A conformance level" aria-label="double-A conformance level">AA</abbr> <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <abbr data-title="Web Content Accessibility Guidelines" aria-label="Web Content Accessibility Guidelines">WCAG</abbr> 2.2 Level <abbr data-title="double-A conformance level" aria-label="double-A conformance level">AA</abbr> <ExternalLink size={12} aria-hidden="true" />
                 </a>{" "}
                 across every page on {SITE_NAME}, with selected Level <Abbr title="triple-A conformance level">AAA</Abbr> criteria applied wherever practical.
               </li>
@@ -91,8 +91,8 @@ const Accessibility = (): JSX.Element => {
               </li>
               <li>
                 Tested with{" "}
-                <a href="https://github.com/dequelabs/axe-core" target="_blank" rel="noopener noreferrer" className={link}>
-                  axe-core <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href="https://github.com/dequelabs/axe-core" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={link}>
+                  axe-core <ExternalLink size={12} aria-hidden="true" />
                 </a>{" "}
                 on every pull request preview, in both light and dark mode.
               </li>
@@ -203,10 +203,10 @@ const Accessibility = (): JSX.Element => {
               <a
                 href="https://github.com/off-on-dev/website/issues/new?template=accessibility.yml"
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
                 className={link}
               >
-                open an accessibility issue <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                open an accessibility issue <ExternalLink size={12} aria-hidden="true" />
               </a>
               . The form prompts for the page, your assistive technology, and severity, which helps
               us reproduce and prioritize.
@@ -264,10 +264,10 @@ const Accessibility = (): JSX.Element => {
               <a
                 href="https://github.com/off-on-dev/website/blob/main/ACCESSIBILITY.md"
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
                 className={link}
               >
-                ACCESSIBILITY.md <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                ACCESSIBILITY.md <ExternalLink size={12} aria-hidden="true" />
               </a>{" "}
               and applies to every change.
             </p>
@@ -286,10 +286,10 @@ const Accessibility = (): JSX.Element => {
               <a
                 href="https://github.com/mgifford/ACCESSIBILITY.md"
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
                 className={link}
               >
-                mgifford/ACCESSIBILITY.md <ExternalLink size={10} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                mgifford/ACCESSIBILITY.md <ExternalLink size={10} aria-hidden="true" />
               </a>
               , a community resource for accessibility best practices, testing criteria, and
               issue severity frameworks. Thank you to Mike Gifford and all contributors for
diff --git a/src/pages/ChallengeDetail.tsx b/src/pages/ChallengeDetail.tsx
index 730ea5ac1..50da9cb22 100644
--- a/src/pages/ChallengeDetail.tsx
+++ b/src/pages/ChallengeDetail.tsx
@@ -219,7 +219,7 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold, hasSolution }: S
                 {
                   title: "Get Started",
                   content: [
-                    `<p><a href="${level.codespacesUrl.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}" target="_blank" rel="noopener noreferrer">Open in GitHub Codespaces</a>. The <abbr data-title="development container: a portable, reproducible coding environment defined by a configuration file" aria-describedby="abbr-devcontainer" tabindex="0">devcontainer</abbr><span id="abbr-devcontainer" class="sr-only">development container: a portable, reproducible coding environment defined by a configuration file</span> is pre-configured and starts automatically. When you push from Codespaces, GitHub forks the repository to your account automatically.</p>`,
+                    `<p><a href="${level.codespacesUrl.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">Open in GitHub Codespaces</a>. The <abbr data-title="development container: a portable, reproducible coding environment defined by a configuration file" aria-describedby="abbr-devcontainer" tabindex="0">devcontainer</abbr><span id="abbr-devcontainer" class="sr-only">development container: a portable, reproducible coding environment defined by a configuration file</span> is pre-configured and starts automatically. When you push from Codespaces, GitHub forks the repository to your account automatically.</p>`,
                     `<p>Prefer working locally? Clone the repo and open it in any editor that supports the Dev Containers specification (<abbr data-title="Visual Studio Code" aria-describedby="abbr-vscode" tabindex="0">VS Code</abbr><span id="abbr-vscode" class="sr-only">Visual Studio Code</span>, JetBrains, and others). The devcontainer config will be detected automatically.</p>`,
                   ].join("\n"),
                 },
@@ -262,10 +262,10 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold, hasSolution }: S
                   <a
                     href={resolveDiscussionUrl(level.discussionUrl, COMMUNITY_URL)}
                     target="_blank"
-                    rel="noopener noreferrer"
+                    rel="noopener noreferrer" aria-describedby="new-tab-hint"
                     className="docs-ext-link font-medium"
                   >
-                    challenge thread <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                    challenge thread <ExternalLink size={12} aria-hidden="true" />
                   </a>{" "}
                   on {COMMUNITY_DISPLAY_NAME}.
                 </span>
@@ -276,12 +276,12 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold, hasSolution }: S
               <a
                 href={linkedinShareUrl}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
                 className="docs-ext-link text-xs"
               >
                 Share your achievement on LinkedIn
                 <ExternalLink size={11} aria-hidden="true" />
-                <span className="sr-only"> (opens in new tab)</span>
+                
               </a>
             </p>
           </section>
@@ -323,12 +323,12 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold, hasSolution }: S
                             <a
                               href={tool.url}
                               target="_blank"
-                              rel="noopener noreferrer"
+                              rel="noopener noreferrer" aria-describedby="new-tab-hint"
                               className="docs-ext-link font-medium"
                             >
                               {tool.name}
                               <ExternalLink size={12} aria-hidden="true" />
-                              <span className="sr-only"> (opens in new tab)</span>
+                              
                             </a>
                           ) : (
                             <span className="font-medium text-foreground">{tool.name}</span>
@@ -354,12 +354,12 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold, hasSolution }: S
                           <a
                             href={link.url}
                             target="_blank"
-                            rel="noopener noreferrer"
+                            rel="noopener noreferrer" aria-describedby="new-tab-hint"
                             className="docs-ext-link font-medium"
                           >
                             {link.title}
                             <ExternalLink size={11} aria-hidden="true" />
-                            <span className="sr-only"> (opens in new tab)</span>
+                            
                           </a>
                         </span>
                       </li>
diff --git a/src/pages/CommunityGuide.tsx b/src/pages/CommunityGuide.tsx
index c752e2acf..4da385e83 100644
--- a/src/pages/CommunityGuide.tsx
+++ b/src/pages/CommunityGuide.tsx
@@ -55,8 +55,8 @@ const CommunityGuide = (): JSX.Element => {
                 <p className="text-sm text-dim leading-relaxed flex-1">
                   Create your account to access challenges, Q&amp;A, community discussions, and everything else.
                 </p>
-                <a href={`${COMMUNITY_URL}/signup`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                  Create an account <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href={`${COMMUNITY_URL}/signup`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                  Create an account <ExternalLink size={12} aria-hidden="true" />
                 </a>
               </div>
 
@@ -65,8 +65,8 @@ const CommunityGuide = (): JSX.Element => {
                 <p className="text-sm text-dim leading-relaxed flex-1">
                   Say hello and tell the community who you are and what you're working on. It's the first step.
                 </p>
-                <a href={`${COMMUNITY_URL}/c/general/introductions/18`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                  Say hello <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href={`${COMMUNITY_URL}/c/general/introductions/18`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                  Say hello <ExternalLink size={12} aria-hidden="true" />
                 </a>
               </div>
 
@@ -75,8 +75,8 @@ const CommunityGuide = (): JSX.Element => {
                 <p className="text-sm text-dim leading-relaxed flex-1">
                   Stuck on a technical problem? Post a clear question and get answers from the community. No question is too basic.
                 </p>
-                <a href={`${COMMUNITY_URL}/c/public-categories/q-a/10`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                  Ask a question <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href={`${COMMUNITY_URL}/c/public-categories/q-a/10`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                  Ask a question <ExternalLink size={12} aria-hidden="true" />
                 </a>
               </div>
 
@@ -85,8 +85,8 @@ const CommunityGuide = (): JSX.Element => {
                 <p className="text-sm text-dim leading-relaxed flex-1">
                   Share a tutorial, showcase a project, or write about what you've learned. Every contribution makes the community stronger.
                 </p>
-                <a href={`${COMMUNITY_URL}/c/community-voices/38`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                  Share something <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href={`${COMMUNITY_URL}/c/community-voices/38`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                  Share something <ExternalLink size={12} aria-hidden="true" />
                 </a>
               </div>
             </div>
@@ -101,8 +101,8 @@ const CommunityGuide = (): JSX.Element => {
                 <p className="text-sm text-dim leading-relaxed flex-1">
                   Hands-on scenarios with broken environments, misconfigured pipelines, and real-world failures to debug and fix. Post your solution and see how others approached it.
                 </p>
-                <a href={`${COMMUNITY_URL}/c/challenges/11`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                  Start a challenge <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href={`${COMMUNITY_URL}/c/challenges/11`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                  Start a challenge <ExternalLink size={12} aria-hidden="true" />
                 </a>
               </div>
 
@@ -111,8 +111,8 @@ const CommunityGuide = (): JSX.Element => {
                 <p className="text-sm text-dim leading-relaxed flex-1">
                   Bring your expertise and experience. Help build adventures for others to learn from open source tech with a broken scenario, a real-world failure, or a skill gap. Shape the next adventure.
                 </p>
-                <a href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md#propose-an-adventure-idea" target="_blank" rel="noopener noreferrer" className={extLink}>
-                  Submit an idea <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                <a href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md#propose-an-adventure-idea" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                  Submit an idea <ExternalLink size={12} aria-hidden="true" />
                 </a>
               </div>
             </div>
@@ -130,8 +130,8 @@ const CommunityGuide = (): JSX.Element => {
               ].map((item) => (
                 <li key={item.label} className="flex items-center gap-2.5 text-sm">
                   <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
-                  <a href={item.href} target="_blank" rel="noopener noreferrer" className={extLink}>
-                    {item.label} <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href={item.href} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    {item.label} <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </li>
               ))}
diff --git a/src/pages/Contribute.tsx b/src/pages/Contribute.tsx
index b2d68a30c..cb2209e53 100644
--- a/src/pages/Contribute.tsx
+++ b/src/pages/Contribute.tsx
@@ -62,8 +62,8 @@ const Contribute = (): JSX.Element => {
                   <p className="text-sm text-dim leading-relaxed flex-1">
                     Browse the forum, see what the community is building, and sign up to get started. Introduce yourself and get a feel for how {BRAND_NAME} works.
                   </p>
-                  <a href={`${COMMUNITY_URL}/signup`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Create an account <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href={`${COMMUNITY_URL}/signup`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Create an account <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
 
@@ -83,21 +83,21 @@ const Contribute = (): JSX.Element => {
                   <p className="text-sm text-dim leading-relaxed flex-1">
                     Have a scenario that would make a great challenge? Submit your idea on GitHub. Ready to go further? Pick up an approved idea and implement the full adventure.
                   </p>
-                  <a href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md#propose-an-adventure-idea" target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Read the adventure ideas guide <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md#propose-an-adventure-idea" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Read the adventure ideas guide <ExternalLink size={12} aria-hidden="true" />
                   </a>
-                  <a href="https://github.com/off-on-dev/open-source-challenges/issues?q=is%3Aissue+is%3Aopen+label%3A%22adventure+idea%22" target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Browse open adventure ideas <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href="https://github.com/off-on-dev/open-source-challenges/issues?q=is%3Aissue+is%3Aopen+label%3A%22adventure+idea%22" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Browse open adventure ideas <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
 
                 <div className="p-5 rounded-lg border border-border bg-card flex flex-col gap-3">
                   <h3 className="font-semibold text-foreground">Join the Conversation</h3>
                   <p className="text-sm text-dim leading-relaxed flex-1">
-                    <a href={`${COMMUNITY_URL}/c/public-categories/q-a/10`} target="_blank" rel="noopener noreferrer" className={extLink}>Ask a question <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span></a>{" "}or answer one, take part in discussions, and support newcomers getting started. Share tutorials, post tips, and write about what you have learned. Introduce the community to open source tools you use or maintain.
+                    <a href={`${COMMUNITY_URL}/c/public-categories/q-a/10`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>Ask a question <ExternalLink size={12} aria-hidden="true" /></a>{" "}or answer one, take part in discussions, and support newcomers getting started. Share tutorials, post tips, and write about what you have learned. Introduce the community to open source tools you use or maintain.
                   </p>
-                  <a href={`${COMMUNITY_URL}/c/community-voices/38`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Post in Community Voices <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href={`${COMMUNITY_URL}/c/community-voices/38`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Post in Community Voices <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
 
@@ -107,8 +107,8 @@ const Contribute = (): JSX.Element => {
                   <p className="text-sm text-dim leading-relaxed flex-1">
                     Stay up to date with what is happening across the open source community. Answer the question of the week and tell us what topics you would like to see covered next.
                   </p>
-                  <a href={`${COMMUNITY_URL}/tag/weekly-digest/95`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Read the weekly digest <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href={`${COMMUNITY_URL}/tag/weekly-digest/95`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Read the weekly digest <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
 
@@ -117,8 +117,8 @@ const Contribute = (): JSX.Element => {
                   <p className="text-sm text-dim leading-relaxed flex-1">
                     Running a local meetup, user group, or open source community? Use {BRAND_NAME} as a vendor-agnostic home for your discussions and announcements. Find existing groups, join as a speaker, or bring open source to your local community.
                   </p>
-                  <a href={`${COMMUNITY_URL}/c/local-meetups-and-groups/19`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Explore meetups and groups <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href={`${COMMUNITY_URL}/c/local-meetups-and-groups/19`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Explore meetups and groups <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
 
@@ -129,17 +129,17 @@ const Contribute = (): JSX.Element => {
                     Follow us, repost what we share, and mention {BRAND_NAME} to your network. Writing about us in a blog post or podcast episode? <a href={`mailto:${CONTACT_EMAIL}`} className={extLink}>Share it with us by email</a> or mention us on social media and we would love to repost.
                   </p>
                   <div className="flex flex-wrap gap-4">
-                    <a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn (opens in new tab)" className="social-icon-link">
+                    <a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" aria-label="LinkedIn" className="social-icon-link">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-4 h-4" fill="currentColor">
                         <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                       </svg>
                     </a>
-                    <a href={BLUESKY_URL} target="_blank" rel="noopener noreferrer" aria-label="Bluesky (opens in new tab)" className="social-icon-link">
+                    <a href={BLUESKY_URL} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" aria-label="Bluesky" className="social-icon-link">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-4 h-4" fill="currentColor">
                         <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.479 0-.689-.139-1.861-.902-2.203-.659-.299-1.664-.621-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" />
                       </svg>
                     </a>
-                    <a href={X_URL} target="_blank" rel="noopener noreferrer" aria-label="X / Twitter (opens in new tab)" className="social-icon-link">
+                    <a href={X_URL} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" aria-label="X / Twitter" className="social-icon-link">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="w-4 h-4" fill="currentColor">
                         <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                       </svg>
@@ -152,11 +152,11 @@ const Contribute = (): JSX.Element => {
                   <p className="text-sm text-dim leading-relaxed flex-1">
                     Each adventure has level guides and missing solution walkthroughs. If you have solved a level, write it up. You can also improve this website by reporting an issue or contributing to the site. Typos and broken links across either repo need no issue, just open a <Abbr title="pull request">PR</Abbr>.
                   </p>
-                  <a href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" className={extLink}>
-                    See the challenges contributing guide <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    See the challenges contributing guide <ExternalLink size={12} aria-hidden="true" />
                   </a>
-                  <a href="https://github.com/off-on-dev/website/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Contribute to the website <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href="https://github.com/off-on-dev/website/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Contribute to the website <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
 
@@ -169,11 +169,11 @@ const Contribute = (): JSX.Element => {
                   Found a gap or something that could work better? Your feedback shapes what we build next.
                 </p>
                 <div className="flex flex-col gap-1.5">
-                  <a href={`${COMMUNITY_URL}/c/general/site-feedback/2`} target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Post in Site Feedback <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href={`${COMMUNITY_URL}/c/general/site-feedback/2`} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Post in Site Feedback <ExternalLink size={12} aria-hidden="true" />
                   </a>
-                  <a href="https://github.com/off-on-dev/website/issues" target="_blank" rel="noopener noreferrer" className={extLink}>
-                    Open a GitHub issue <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  <a href="https://github.com/off-on-dev/website/issues" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className={extLink}>
+                    Open a GitHub issue <ExternalLink size={12} aria-hidden="true" />
                   </a>
                 </div>
               </div>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index a92152109..2b36949dc 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -47,10 +47,10 @@ const Index = (): JSX.Element => {
                 <a
                   href="https://github.com/off-on-dev/open-source-challenges/blob/main/CONTRIBUTING.md#propose-an-adventure-idea"
                   target="_blank"
-                  rel="noopener noreferrer"
+                  rel="noopener noreferrer" aria-describedby="new-tab-hint"
                   className="btn-inverse"
                 >
-                  Propose an Adventure Idea <ExternalLink size={14} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+                  Propose an Adventure Idea <ExternalLink size={14} aria-hidden="true" />
                 </a>
               </div>
             </div>
diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx
index 890b8e1d3..788cb9622 100644
--- a/src/pages/Privacy.tsx
+++ b/src/pages/Privacy.tsx
@@ -110,12 +110,12 @@ const Privacy = (): JSX.Element => {
           may transfer data to and process it in the United States. Such transfers occur under the
           EU-U.S. Data Privacy Framework and Standard Contractual Clauses as appropriate
           safeguards. For more information, see{" "}
-          <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" className="docs-ext-link">
-            Google's Privacy Policy <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+          <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className="docs-ext-link">
+            Google's Privacy Policy <ExternalLink size={12} aria-hidden="true" />
           </a>{" "}
           and{" "}
-          <a href="https://support.google.com/analytics/answer/6004245" target="_blank" rel="noopener noreferrer" className="docs-ext-link">
-            Google Analytics data safeguards <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+          <a href="https://support.google.com/analytics/answer/6004245" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className="docs-ext-link">
+            Google Analytics data safeguards <ExternalLink size={12} aria-hidden="true" />
           </a>
           .
         </p>
@@ -179,8 +179,8 @@ const Privacy = (): JSX.Element => {
           lodge a complaint with a supervisory authority. In the EU, this is typically the data
           protection authority in your country of residence or the country where the alleged
           violation occurred. A list of EU supervisory authorities is available from the{" "}
-          <a href="https://edpb.europa.eu/about-edpb/about-edpb/members_en" target="_blank" rel="noopener noreferrer" className="docs-ext-link">
-            European Data Protection Board <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+          <a href="https://edpb.europa.eu/about-edpb/about-edpb/members_en" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className="docs-ext-link">
+            European Data Protection Board <ExternalLink size={12} aria-hidden="true" />
           </a>
           . We do ask that you contact us first so we have an opportunity to address the issue
           directly.
diff --git a/src/pages/SolutionDetail.tsx b/src/pages/SolutionDetail.tsx
index c98c78778..6d9df088d 100644
--- a/src/pages/SolutionDetail.tsx
+++ b/src/pages/SolutionDetail.tsx
@@ -238,10 +238,10 @@ const FurtherReadingList = ({ links }: { links: Array<{ title: string; url: stri
   <ul className="space-y-1" role="list">
     {links.map((link) => (
       <li key={link.url}>
-        <a href={link.url} target="_blank" rel="noopener noreferrer" className="docs-ext-link text-sm">
+        <a href={link.url} target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className="docs-ext-link text-sm">
           {link.title}
           <ExternalLink size={11} aria-hidden="true" />
-          <span className="sr-only"> (opens in new tab)</span>
+          
         </a>
       </li>
     ))}
@@ -409,7 +409,7 @@ const SolutionSidebar = ({
   furtherReading,
 }: SolutionSidebarProps): JSX.Element => (
   <aside
-    aria-label="Solution navigation"
+    aria-label="Solution sidebar"
     className="mt-10 lg:mt-0 space-y-4 lg:sticky lg:top-28 lg:self-start"
   >
     {level.codespacesUrl && (
@@ -448,12 +448,12 @@ const SolutionSidebar = ({
       <a
         href={discussionUrl}
         target="_blank"
-        rel="noopener noreferrer"
+        rel="noopener noreferrer" aria-describedby="new-tab-hint"
         className="docs-ext-link text-sm font-medium"
       >
         Join the discussion
         <ExternalLink size={12} aria-hidden="true" />
-        <span className="sr-only"> (opens in new tab)</span>
+        
       </a>
     </SidebarCard>
   </aside>
@@ -596,12 +596,12 @@ const SolutionArticle = ({ solution, discussionUrl }: SolutionArticleProps): JSX
               <a
                 href={discussionUrl}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer" aria-describedby="new-tab-hint"
                 className="docs-ext-link text-sm font-medium mt-4"
               >
                 Browse the discussion
                 <ExternalLink size={12} aria-hidden="true" />
-                <span className="sr-only"> (opens in new tab)</span>
+                
               </a>
             </div>
           </div>
diff --git a/src/pages/Sponsors.tsx b/src/pages/Sponsors.tsx
index be69f5316..4674f86f9 100644
--- a/src/pages/Sponsors.tsx
+++ b/src/pages/Sponsors.tsx
@@ -48,7 +48,7 @@ const Sponsors = (): JSX.Element => {
                     key={sponsor.name}
                     href={sponsor.url}
                     target="_blank"
-                    rel="noopener noreferrer"
+                    rel="noopener noreferrer" aria-describedby="new-tab-hint"
                     className="card-glow inline-flex items-center rounded-xl border border-border bg-[hsl(var(--surface))] px-8 py-6 focus-ring"
                   >
                     {logoSrc ? (
@@ -56,7 +56,7 @@ const Sponsors = (): JSX.Element => {
                     ) : (
                       <span className="text-xl font-semibold text-foreground group-hover:text-foreground/80 transition-colors">{sponsor.name}</span>
                     )}
-                    <span className="sr-only"> (opens in new tab)</span>
+                    
                   </a>
                 );
               })}
diff --git a/src/test/footer.test.tsx b/src/test/footer.test.tsx
index 130f90442..021517c73 100644
--- a/src/test/footer.test.tsx
+++ b/src/test/footer.test.tsx
@@ -93,34 +93,37 @@ describe("Footer - Community nav", () => {
 // ---------------------------------------------------------------------------
 
 describe("Footer - bottom strip", () => {
-  it("renders the LinkedIn link with an aria-label that mentions 'opens in new tab'", () => {
+  it("renders the LinkedIn link with a new-tab hint via aria-describedby, not in its name", () => {
     renderFooter();
-    const linkedInLink = screen.getByRole("link", { name: /LinkedIn.*opens in new tab/i });
+    const linkedInLink = screen.getByRole("link", { name: "LinkedIn" });
     expect(linkedInLink).toBeTruthy();
     expect(linkedInLink.getAttribute("target")).toBe("_blank");
+    expect(linkedInLink.getAttribute("aria-describedby")).toBe("new-tab-hint");
   });
 
-  it("renders the Bluesky link with an aria-label that mentions 'opens in new tab'", () => {
+  it("renders the Bluesky link with a new-tab hint via aria-describedby", () => {
     renderFooter();
-    const link = screen.getByRole("link", { name: /Bluesky.*opens in new tab/i });
+    const link = screen.getByRole("link", { name: "Bluesky" });
     expect(link).toBeTruthy();
     expect(link.getAttribute("target")).toBe("_blank");
     expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(link.getAttribute("aria-describedby")).toBe("new-tab-hint");
   });
 
   it("Bluesky link href matches BLUESKY_URL constant", () => {
     renderFooter();
-    const link = screen.getByRole("link", { name: /Bluesky.*opens in new tab/i });
+    const link = screen.getByRole("link", { name: "Bluesky" });
     expect(link.getAttribute("href")).toBe("https://bsky.app/profile/off-on-dev.bsky.social");
   });
 
   it("renders the X / Twitter link as an external link that opens in a new tab", () => {
     renderFooter();
-    const link = screen.getByRole("link", { name: /X \/ Twitter.*opens in new tab/i });
+    const link = screen.getByRole("link", { name: "X / Twitter" });
     expect(link).toBeTruthy();
     expect(link.getAttribute("href")).toBe("https://x.com/OffonDev");
     expect(link.getAttribute("target")).toBe("_blank");
     expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(link.getAttribute("aria-describedby")).toBe("new-tab-hint");
   });
 
   it("renders all three slogan parts in the bottom strip", () => {
diff --git a/src/test/layout.test.tsx b/src/test/layout.test.tsx
index 437a41c2f..ecedc7efc 100644
--- a/src/test/layout.test.tsx
+++ b/src/test/layout.test.tsx
@@ -259,3 +259,18 @@ describe("Layout file-content regression", () => {
     expect(trackerBody).toMatch(/consent\s*!==\s*["']granted["']/);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Shared external-link hint
+// ---------------------------------------------------------------------------
+
+describe("Shared new-tab hint", () => {
+  it("renders a single hidden #new-tab-hint node used by aria-describedby on external links", () => {
+    renderLayout("/");
+    const hint = document.getElementById("new-tab-hint");
+    expect(hint).toBeTruthy();
+    expect(hint?.hasAttribute("hidden")).toBe(true);
+    expect(hint?.textContent).toBe("opens in a new tab");
+    expect(document.querySelectorAll("#new-tab-hint").length).toBe(1);
+  });
+});
diff --git a/src/test/navbar.test.tsx b/src/test/navbar.test.tsx
index 53d8e431a..9d118f7cf 100644
--- a/src/test/navbar.test.tsx
+++ b/src/test/navbar.test.tsx
@@ -135,7 +135,7 @@ describe("Navbar - theme toggle", () => {
 describe("Navbar - mobile menu", () => {
   it("hamburger button has aria-expanded='false' when closed", () => {
     renderNavbar();
-    const hamburger = screen.getByRole("button", { name: /Open menu/i });
+    const hamburger = screen.getByRole("button", { name: "Menu" });
     expect(hamburger.getAttribute("aria-expanded")).toBe("false");
   });
 
@@ -146,27 +146,27 @@ describe("Navbar - mobile menu", () => {
 
   it("clicking the hamburger reveals the mobile menu", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     expect(document.getElementById("mobile-menu")?.hasAttribute("hidden")).toBe(false);
   });
 
   it("hamburger button has aria-expanded='true' when menu is open", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
-    const hamburger = screen.getByRole("button", { name: /Close menu/i });
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
+    const hamburger = screen.getByRole("button", { name: "Menu" });
     expect(hamburger.getAttribute("aria-expanded")).toBe("true");
   });
 
   it("clicking the hamburger again closes the mobile menu", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
-    fireEvent.click(screen.getByRole("button", { name: /Close menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     expect(document.getElementById("mobile-menu")?.hasAttribute("hidden")).toBe(true);
   });
 
   it("mobile menu contains navigation links when open", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     const mobileMenu = document.getElementById("mobile-menu");
     expect(mobileMenu).toBeTruthy();
     const mobileNav = within(mobileMenu!);
@@ -175,7 +175,7 @@ describe("Navbar - mobile menu", () => {
 
   it("mobile menu has aria-controls pointing to 'mobile-menu'", () => {
     renderNavbar();
-    const hamburger = screen.getByRole("button", { name: /Open menu/i });
+    const hamburger = screen.getByRole("button", { name: "Menu" });
     expect(hamburger.getAttribute("aria-controls")).toBe("mobile-menu");
   });
 
@@ -187,7 +187,7 @@ describe("Navbar - mobile menu", () => {
 
   it("pressing Escape closes the mobile menu", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     expect(document.getElementById("mobile-menu")?.hasAttribute("hidden")).toBe(false);
     fireEvent.keyDown(document, { key: "Escape" });
     expect(document.getElementById("mobile-menu")?.hasAttribute("hidden")).toBe(true);
@@ -195,15 +195,15 @@ describe("Navbar - mobile menu", () => {
 
   it("pressing Escape returns focus to the hamburger button", () => {
     renderNavbar();
-    const hamburger = screen.getByRole("button", { name: /Open menu/i });
+    const hamburger = screen.getByRole("button", { name: "Menu" });
     fireEvent.click(hamburger);
     fireEvent.keyDown(document, { key: "Escape" });
-    expect(document.activeElement).toBe(screen.getByRole("button", { name: /Open menu/i }));
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "Menu" }));
   });
 
   it("Tab on the last menu item wraps focus back to the first menu item", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     const menu = document.getElementById("mobile-menu")!;
     const focusable = Array.from(
       menu.querySelectorAll<HTMLElement>('a[href], button:not([disabled])')
@@ -217,7 +217,7 @@ describe("Navbar - mobile menu", () => {
 
   it("Shift+Tab on the first menu item wraps focus to the last menu item", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     const menu = document.getElementById("mobile-menu")!;
     const focusable = Array.from(
       menu.querySelectorAll<HTMLElement>('a[href], button:not([disabled])')
@@ -241,7 +241,7 @@ describe("Navbar - mobile menu", () => {
 
     try {
       renderNavbar();
-      fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+      fireEvent.click(screen.getByRole("button", { name: "Menu" }));
       expect(main.hasAttribute("inert")).toBe(true);
       expect(main.getAttribute("aria-hidden")).toBe("true");
       expect(footer.hasAttribute("inert")).toBe(true);
@@ -249,7 +249,7 @@ describe("Navbar - mobile menu", () => {
       expect(aside.hasAttribute("inert")).toBe(true);
       expect(aside.getAttribute("aria-hidden")).toBe("true");
 
-      fireEvent.click(screen.getByRole("button", { name: /Close menu/i }));
+      fireEvent.click(screen.getByRole("button", { name: "Menu" }));
       expect(main.hasAttribute("inert")).toBe(false);
       expect(main.getAttribute("aria-hidden")).toBeNull();
       expect(footer.hasAttribute("inert")).toBe(false);
@@ -271,11 +271,11 @@ describe("Navbar - mobile menu", () => {
 
     try {
       renderNavbar();
-      fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+      fireEvent.click(screen.getByRole("button", { name: "Menu" }));
       expect(footer.hasAttribute("inert")).toBe(true);
       expect(footer.getAttribute("aria-hidden")).toBe("true");
 
-      fireEvent.click(screen.getByRole("button", { name: /Close menu/i }));
+      fireEvent.click(screen.getByRole("button", { name: "Menu" }));
       expect(footer.hasAttribute("inert")).toBe(false);
       expect(footer.getAttribute("aria-hidden")).toBeNull();
     } finally {
@@ -285,12 +285,12 @@ describe("Navbar - mobile menu", () => {
 
   it("clicking a nav link closes the menu without moving focus to the hamburger", () => {
     renderNavbar();
-    fireEvent.click(screen.getByRole("button", { name: /Open menu/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Menu" }));
     const links = screen.getAllByRole("link", { name: /About/i });
     const mobileLink = links.find((l) => l.closest("#mobile-menu"));
     expect(mobileLink).toBeTruthy();
     fireEvent.click(mobileLink!);
     expect(document.getElementById("mobile-menu")?.hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).not.toBe(screen.queryByRole("button", { name: /Open menu/i }));
+    expect(document.activeElement).not.toBe(screen.queryByRole("button", { name: "Menu" }));
   });
 });
diff --git a/src/test/pageHero.test.tsx b/src/test/pageHero.test.tsx
index b86eaec4f..3d288b907 100644
--- a/src/test/pageHero.test.tsx
+++ b/src/test/pageHero.test.tsx
@@ -101,14 +101,14 @@ describe("PageHero", () => {
       expect(link.getAttribute("rel")).toBe("noopener noreferrer");
     });
 
-    it("includes a sr-only '(opens in new tab)' span on external links", () => {
+    it("points external links at the shared new-tab hint via aria-describedby", () => {
       renderHero({
         title: "T",
         description: "D",
         primaryCta: { label: "Community", href: "https://example.com", external: true },
       });
-      const srSpan = screen.getByText("(opens in new tab)");
-      expect(srSpan.className).toContain("sr-only");
+      const link = screen.getByRole("link", { name: /Community/ });
+      expect(link.getAttribute("aria-describedby")).toBe("new-tab-hint");
     });
   });
 
diff --git a/src/test/rewardsCard.test.tsx b/src/test/rewardsCard.test.tsx
index 624ae1040..fa75822b7 100644
--- a/src/test/rewardsCard.test.tsx
+++ b/src/test/rewardsCard.test.tsx
@@ -111,10 +111,10 @@ describe("RewardsCard - past deadline, non-compact", () => {
     expect(link.getAttribute("rel")).toContain("noopener");
   });
 
-  it("Community Voices link has sr-only new-tab notice", () => {
+  it("Community Voices link has a new-tab hint via aria-describedby", () => {
     render(<RewardsCard rewards={REWARDS} deadlinePast />);
     const link = screen.getByRole("link", { name: /community voices/i });
-    expect(link.textContent).toContain("opens in new tab");
+    expect(link.getAttribute("aria-describedby")).toBe("new-tab-hint");
   });
 });
 
diff --git a/styleguide.md b/styleguide.md
index cddaa35e3..3788a32e4 100644
--- a/styleguide.md
+++ b/styleguide.md
@@ -729,7 +729,7 @@ Full-width amber (`bg-primary`) hero banner used at the top of inner pages. Rend
 | `primaryCta` | `Cta?` | Primary button (`.btn-inverse`) |
 | `secondaryCta` | `Cta?` | Secondary button (`.btn-ghost-inverse`) |
 
-`Cta` shape: `{ label: ReactNode; href: string; external?: boolean }`. External CTAs get `target="_blank"` with the sr-only new-tab span. Anchors (`#`) and `mailto:` links render as `<a>`; all others render as React Router `<Link>`.
+`Cta` shape: `{ label: ReactNode; href: string; external?: boolean }`. External CTAs get `target="_blank"` and `aria-describedby="new-tab-hint"` (the shared hint, see External links). Anchors (`#`) and `mailto:` links render as `<a>`; all others render as React Router `<Link>`.
 
 **Important:** Buttons inside `PageHero` must use `.btn-inverse` / `.btn-ghost-inverse`. Never use `.btn-primary` or `.btn-ghost` inside `bg-primary` sections. They produce yellow-on-yellow in light mode.
 
@@ -990,7 +990,7 @@ Used in `Adventures.tsx` and `About.tsx`.
 
 `src/components/PersonNameLink.tsx`
 
-Renders a person's name with consistent styling, used for board members and adventure contributors. When `url` is provided, renders an external `<a>` with the lucide `ExternalLink` icon and a `sr-only` "(opens in new tab)" announcement; when omitted, renders a plain `<span>` with the same font weight. Shared by `BoardSection` and `ChallengeBuildersSection` so the className string and external-link affordances stay in sync.
+Renders a person's name with consistent styling, used for board members and adventure contributors. When `url` is provided, renders an external `<a>` with the lucide `ExternalLink` icon and `aria-describedby="new-tab-hint"` (the shared new-tab hint, see External links); when omitted, renders a plain `<span>` with the same font weight. Shared by `BoardSection` and `ChallengeBuildersSection` so the className string and external-link affordances stay in sync.
 
 ```tsx
 <PersonNameLink name="Jane Doe" url="https://example.com" />
@@ -1327,7 +1327,7 @@ Renders pre-compiled block HTML (generated at build time by `scripts/generate-ad
 
 - Fenced code blocks get an always-visible "Copy" button in a header bar (clipboard API, flips to "Copied" for 1.5 s, with proper `aria-label` updates). Same `.code-block-header`, `.code-lang-label`, and `.code-header-btn` CSS classes as `CodeBlock`.
 - All element styles (headings, lists, code, blockquote, tables, links) are driven by `.md-content` rules in `src/index.css`.
-- External links get `target="_blank"`, `rel="noopener noreferrer"`, and a `<span class="sr-only"> (opens in new tab)</span>` injected by the generator. The external link icon is rendered purely via a CSS `::after` rule on `[target="_blank"]` in `src/index.css` — no inline SVG in the HTML.
+- External links get `target="_blank"`, `rel="noopener noreferrer"`, and `aria-describedby="new-tab-hint"` (pointing at the shared hidden hint, see External links) injected by the generator. The external link icon is rendered purely via a CSS `::after` rule on `[target="_blank"]` in `src/index.css` — no inline SVG in the HTML.
 
 ```tsx
 <MarkdownContent source={htmlString} />
@@ -1388,7 +1388,7 @@ Renders a row of icon-only share links (LinkedIn, X, Bluesky, Mastodon) for a ch
 | `url` | `string` | Canonical URL of the level page. |
 | `levelName` | `string` | Display name used in the pre-composed share text. |
 
-Each platform link opens in a new tab with `rel="noopener noreferrer"`. All `<svg>` icons carry `aria-hidden="true"`; each `<a>` carries an explicit `aria-label` for screen readers.
+Each platform link opens in a new tab with `rel="noopener noreferrer"` and `aria-describedby="new-tab-hint"` (the shared hint, see External links). All `<svg>` icons carry `aria-hidden="true"`; each `<a>` carries an explicit `aria-label` for screen readers (the label is the platform name only, without the new-tab hint).
 
 ---
 
@@ -1757,11 +1757,27 @@ Helper functions for the `MarkdownContent` component.
 | --- | --- | --- |
 | `slugify` | `(text: string) => string` | Converts heading text to a URL-safe slug for `id` attributes. |
 | `getSectionIcon` | `(slug: string) => LucideIcon \| undefined` | Maps known section slugs (`architecture`, `toolbox`, `how-to-play`) to their lucide-react icon. Returns `undefined` for unrecognised slugs. |
-| `stripLinks` | `(html: string) => string` | Strips `<a>` tags from sanitised HTML while preserving link text. Also removes `sr-only` new-tab spans injected by the generator. Call before passing any author-prose HTML to `dangerouslySetInnerHTML` inside an interactive element (`<Link>`, `<button>`) to prevent invalid nested anchors. |
+| `stripLinks` | `(html: string) => string` | Strips `<a>` tags from sanitised HTML while preserving link text. Also strips the `aria-describedby` and `tabindex` attributes the generator adds to external links so no dangling reference survives once the anchor is unwrapped. Call before passing any author-prose HTML to `dangerouslySetInnerHTML` inside an interactive element (`<Link>`, `<button>`) to prevent invalid nested anchors. |
 | `stripHtml` | `(html: string) => string` | Strips all HTML tags and decodes named and numeric HTML entities in a single pass. Contract: input must be rehype-sanitize output so `>` in attribute values is already escaped. Single-pass prevents double-decode of mixed entities (`&amp;lt;` → `&lt;`, not `<`). Use when placing author-prose HTML into plain-text contexts such as `<meta content="">` attributes. |
 
 ---
 
+## External links
+
+Every link that opens in a new tab (`target="_blank"`) carries `rel="noopener noreferrer"` and `aria-describedby="new-tab-hint"`.
+
+`Layout.tsx` renders a single hidden node once for the whole app:
+
+```tsx
+<span id="new-tab-hint" hidden>opens in a new tab</span>
+```
+
+The "opens in a new tab" text is an accessible **description**, not part of each link's accessible **name**. Do not append a `<span className="sr-only"> (opens in new tab)</span>` inside the link, and do not fold the phrase into an `aria-label`. Both make the phrase part of the name, which bloats every announcement and can break voice control (the spoken name no longer matches the visible label). A single shared description keeps names clean and is announced after a pause. `hidden` still resolves for `aria-describedby`.
+
+- **Text links:** visible text is the name; add `aria-describedby="new-tab-hint"` to the `<a>`.
+- **Icon-only links** (e.g. Footer social icons): keep `aria-label` as the platform name only (`"LinkedIn"`), and add `aria-describedby="new-tab-hint"`.
+- **Generated adventure prose:** `scripts/generate-adventures.mjs` (`annotateExternalLinks`) adds `aria-describedby="new-tab-hint"` to external links at build time; `stripLinks` removes it when unwrapping a link inside an interactive container.
+
 ## Icons
 
 All icons use **lucide-react** (already a project dependency; no other icon library may be added).
@@ -1787,8 +1803,8 @@ Never put a raw SVG icon next to text inside a plain `inline` or `block` element
 </Link>
 
 // Correct: external link (opens in new tab)
-<a target="_blank" ... className="docs-ext-link">
-  View docs <ExternalLink size={12} aria-hidden="true" /><span className="sr-only"> (opens in new tab)</span>
+<a target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint" className="docs-ext-link">
+  View docs <ExternalLink size={12} aria-hidden="true" />
 </a>
 
 // Incorrect: icon drops below text baseline
@@ -1826,9 +1842,9 @@ Some official brand marks have no equivalent in lucide-react and must use the br
 
 | Brand | Where used | Notes |
 | --- | --- | --- |
-| LinkedIn "in" rounded-rectangle mark | `Footer.tsx` bottom strip | Inline SVG, `aria-hidden="true"` on `<svg>`, `aria-label="LinkedIn (opens in new tab)"` on parent `<a>`, `fill="currentColor"`, `className="w-3.5 h-3.5"` (14 px, matching surrounding icon size) |
-| Bluesky butterfly mark | `Footer.tsx` bottom strip | Inline SVG, `aria-hidden="true"` on `<svg>`, `aria-label="Bluesky (opens in new tab)"` on parent `<a>`, `fill="currentColor"`, `className="w-3.5 h-3.5"`. URL from `BLUESKY_URL` constant. |
-| X (Twitter) mark | `Footer.tsx` bottom strip | Inline SVG, `aria-hidden="true"` on `<svg>`, `aria-label="X / Twitter (opens in new tab)"` on parent `<a>`, `target="_blank"`, `rel="noopener noreferrer"`, `fill="currentColor"`, `className="w-3.5 h-3.5"`. URL from `X_URL` constant. |
+| LinkedIn "in" rounded-rectangle mark | `Footer.tsx` bottom strip | Inline SVG, `aria-hidden="true"` on `<svg>`, `aria-label="LinkedIn"` on parent `<a>` plus `aria-describedby="new-tab-hint"` for the new-tab hint, `fill="currentColor"`, `className="w-3.5 h-3.5"` (14 px, matching surrounding icon size) |
+| Bluesky butterfly mark | `Footer.tsx` bottom strip | Inline SVG, `aria-hidden="true"` on `<svg>`, `aria-label="Bluesky"` on parent `<a>` plus `aria-describedby="new-tab-hint"`, `fill="currentColor"`, `className="w-3.5 h-3.5"`. URL from `BLUESKY_URL` constant. |
+| X (Twitter) mark | `Footer.tsx` bottom strip | Inline SVG, `aria-hidden="true"` on `<svg>`, `aria-label="X / Twitter"` on parent `<a>` plus `aria-describedby="new-tab-hint"`, `target="_blank"`, `rel="noopener noreferrer"`, `fill="currentColor"`, `className="w-3.5 h-3.5"`. URL from `X_URL` constant. |
 
 When adding a new brand SVG: place it inline, set `aria-hidden="true"` on the `<svg>`, put the accessible label on the parent interactive element, use `fill="currentColor"`, and add a row to this table.
 
@@ -1883,7 +1899,7 @@ Includes `padding: 0.25rem` (equivalent to `p-1`) to improve tap target size and
 Usage pattern:
 
 ```tsx
-<a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn (opens in new tab)" className="social-icon-link">
+<a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" aria-describedby="new-tab-hint" className="social-icon-link">
   <svg aria-hidden="true" ...>...</svg>
 </a>
 ```

From dd868b3b024adfcb8d2e8fae8faf0862826c30b2 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 13:17:21 +0200
Subject: [PATCH 2/8] chore(data): regenerate adventures for new-tab hint
 change

- Run `npm run generate` after updating `annotateExternalLinks`.
- External links in generated prose now carry `aria-describedby="new-tab-hint"`
  instead of an inline sr-only "(opens in new tab)" span.
- No YAML source content changed.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 .../adventures/blind-by-design.generated.ts   | 16 ++++----
 .../adventures/dead-reckoning.generated.ts    | 16 ++++----
 .../adventures/lex-imperfecta.generated.ts    | 28 ++++++-------
 src/data/adventures/summaries.ts              | 40 +++++++++----------
 .../the-ai-observatory.generated.ts           | 10 ++---
 5 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/data/adventures/blind-by-design.generated.ts b/src/data/adventures/blind-by-design.generated.ts
index d588f0c33..3531a2263 100644
--- a/src/data/adventures/blind-by-design.generated.ts
+++ b/src/data/adventures/blind-by-design.generated.ts
@@ -59,17 +59,17 @@ export const BLIND_BY_DESIGN: Adventure = {
         "Your mission: replace that hard-coded label with an OpenFeature client, point that client at the flagd sidecar that already runs next to your Codespace, and let flags.json drive what gets recorded as the subject's vision_state. Prove the lab can change what it records without restarting anything.",
       ],
       objective: [
-        "curl <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:8080/<span class=\"sr-only\"> (opens in new tab)</span></a> returns a vision_state reading resolved from flags.json (not the hard-coded 'untreated' fallback)",
+        "curl <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> returns a vision_state reading resolved from flags.json (not the hard-coded 'untreated' fallback)",
         "The response payload includes OpenFeature evaluation details: flag key, variant, reason, and value",
         "Editing flags.json to change defaultVariant causes the next request to return the new variant without restarting the app or flagd",
       ],
       architecture: [
         "<p>This level runs as two containers side-by-side in your Codespace: the Spring Boot lab and a flagd sidecar.</p>",
-        "<p>The Spring Boot service runs on <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:8080/<span class=\"sr-only\"> (opens in new tab)</span></a> with one endpoint, GET /. flags.json is mounted read-only into the flagd sidecar; edit it through the <abbr data-title=\"Integrated Development Environment\" tabindex=\"0\" aria-describedby=\"abbr-exp-7\">IDE</abbr><span id=\"abbr-exp-7\" class=\"sr-only\">Integrated Development Environment</span> and flagd's file watcher picks up the change within about a second. The flagd sidecar serves flag evaluations over gRPC on :8013. The OpenFeature SDK reads FLAGD_HOST and FLAGD_PORT from the environment (pre-set by the devcontainer), so there is no host or port to hard-code.</p>",
+        "<p>The Spring Boot service runs on <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> with one endpoint, GET /. flags.json is mounted read-only into the flagd sidecar; edit it through the <abbr data-title=\"Integrated Development Environment\" tabindex=\"0\" aria-describedby=\"abbr-exp-7\">IDE</abbr><span id=\"abbr-exp-7\" class=\"sr-only\">Integrated Development Environment</span> and flagd's file watcher picks up the change within about a second. The flagd sidecar serves flag evaluations over gRPC on :8013. The OpenFeature SDK reads FLAGD_HOST and FLAGD_PORT from the environment (pre-set by the devcontainer), so there is no host or port to hard-code.</p>",
       ],
       toolbox: [
         { name: "./mvnw", description: "Maven wrapper checked in next to pom.xml, builds and runs the Spring Boot lab" },
-        { name: "curl", description: "makes requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:8080/<span class=\"sr-only\"> (opens in new tab)</span></a> and shows the reading the lab records", url: "https://curl.se/" },
+        { name: "curl", description: "makes requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> and shows the reading the lab records", url: "https://curl.se/" },
         { name: "jq", description: "pretty-prints and filters the JSON evaluation details returned by the SDK", url: "https://jqlang.org/" },
         { name: "flagd sidecar", description: "already running in the devcontainer compose stack on the docker-internal network, no port forwarding needed" },
       ],
@@ -133,7 +133,7 @@ export const BLIND_BY_DESIGN: Adventure = {
       toolbox: [
         { name: "Java 21 (Temurin)", description: "pre-installed in the devcontainer" },
         { name: "./mvnw", description: "Spring Boot Maven Wrapper, no global Maven install required" },
-        { name: "curl", description: "sends requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:8080/<span class=\"sr-only\"> (opens in new tab)</span></a> to test each targeting branch", url: "https://curl.se/" },
+        { name: "curl", description: "sends requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> to test each targeting branch", url: "https://curl.se/" },
         { name: "jq", description: "pretty-prints the JSON evaluation details", url: "https://jqlang.org/" },
         { name: "tail -f", description: "watches the application log live for [AUDIT] lines" },
       ],
@@ -141,7 +141,7 @@ export const BLIND_BY_DESIGN: Adventure = {
         { title: "Wait for Setup", content: "<p>Wait ~2-3 minutes for the Java toolchain to install. Use <code>Cmd/Ctrl + Shift + P</code> then <code>View Creation Log</code> to watch progress. When the post-create finishes you'll have Java 21, the Maven wrapper, and the broken-state lab ready in <code>adventures/04-blind-by-design/intermediate/</code>.</p>" },
         { title: "Explore the UIs", content: `<p>Open the <strong>Ports</strong> tab and navigate to each service:</p>
 <ul>
-<li><strong>Port 8080:</strong> Spring Boot lab. The application under test. Access via the Ports tab or curl <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<span class="sr-only"> (opens in new tab)</span></a>.</li>
+<li><strong>Port 8080:</strong> Spring Boot lab. The application under test. Access via the Ports tab or curl <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">http://localhost:8080/</a>.</li>
 </ul>` },
         { title: "Confirm the Broken State", content: `<p>Start the lab and confirm the broken state, where no targeting fires yet:</p>
 <pre tabindex="0" aria-label="Code block"><code class="language-sh">./mvnw spring-boot:run
@@ -233,8 +233,8 @@ curl -s 'http://localhost:8080/?species=zyklop&#x26;dose=underdose' | jq .value
       toolbox: [
         { name: "Java 21 (Temurin)", description: "pre-installed in the devcontainer", url: "https://adoptium.net/" },
         { name: "./mvnw", description: "Spring Boot Maven Wrapper, no global Maven install required" },
-        { name: "curl", description: "sends requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:8080/<span class=\"sr-only\"> (opens in new tab)</span></a> to test the lab, and to Prometheus on <a href=\"http://localhost:9090/\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:9090/<span class=\"sr-only\"> (opens in new tab)</span></a> to query metrics directly", url: "https://curl.se/" },
-        { name: "Grafana", description: "browser UI at <a href=\"http://localhost:3000\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:3000<span class=\"sr-only\"> (opens in new tab)</span></a> (admin/admin) for the Feature Flag Metrics dashboard and Tempo trace explorer" },
+        { name: "curl", description: "sends requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> to test the lab, and to Prometheus on <a href=\"http://localhost:9090/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:9090/</a> to query metrics directly", url: "https://curl.se/" },
+        { name: "Grafana", description: "browser UI at <a href=\"http://localhost:3000\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:3000</a> (admin/admin) for the Feature Flag Metrics dashboard and Tempo trace explorer" },
         { name: "jq", description: "pretty-prints the JSON evaluation details", url: "https://jqlang.org/" },
       ],
       howToPlay: [
@@ -243,7 +243,7 @@ curl -s 'http://localhost:8080/?species=zyklop&#x26;dose=underdose' | jq .value
 <ul>
 <li><strong>Port 8080:</strong> Spring Boot lab. Add ?userId=subject-42 for a stable fractional-rollout bucketing key.</li>
 <li><strong>Port 3000:</strong> Grafana (admin / admin). Open Dashboards > Feature Flag Metrics (empty until metrics are wired). Try Explore > Tempo to see flag evaluations as span events.</li>
-<li><strong>Port 9090:</strong> Prometheus. Query metrics directly via the Prometheus UI or curl <a href="http://localhost:9090/api/v1/query" target="_blank" rel="noopener noreferrer">http://localhost:9090/api/v1/query<span class="sr-only"> (opens in new tab)</span></a>.</li>
+<li><strong>Port 9090:</strong> Prometheus. Query metrics directly via the Prometheus UI or curl <a href="http://localhost:9090/api/v1/query" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">http://localhost:9090/api/v1/query</a>.</li>
 <li><strong>Port 3200:</strong> Tempo. Tempo HTTP API used by the verify script to assert traces are flowing.</li>
 </ul>
 <p>flagd runs on the docker-internal network only. No port forwarding needed.</p>` },
diff --git a/src/data/adventures/dead-reckoning.generated.ts b/src/data/adventures/dead-reckoning.generated.ts
index 5c8970ebb..b621dc8ea 100644
--- a/src/data/adventures/dead-reckoning.generated.ts
+++ b/src/data/adventures/dead-reckoning.generated.ts
@@ -39,10 +39,10 @@ export const DEAD_RECKONING: Adventure = {
       topics: ["Backstage", "Gitea"],
       audience: "Platform engineers, developers, and anyone curious about internal developer platforms and self-service scaffolding. No prior Backstage experience is needed, but familiarity with YAML and basic Git concepts will help.",
       learnings: [
-        "How Backstage <a href=\"https://backstage.io/docs/features/software-templates/writing-templates\" target=\"_blank\" rel=\"noopener noreferrer\">software templates<span class=\"sr-only\"> (opens in new tab)</span></a> are structured: parameters, steps, and output",
-        "How scaffolder <a href=\"https://backstage.io/docs/features/software-templates/builtin-actions\" target=\"_blank\" rel=\"noopener noreferrer\">actions<span class=\"sr-only\"> (opens in new tab)</span></a> work, such as <code>fetch:template</code>, <code>publish:gitea</code>, and <code>catalog:register</code>",
-        "How the <a href=\"https://backstage.io/docs/features/software-catalog/life-of-an-entity\" target=\"_blank\" rel=\"noopener noreferrer\">catalog registration<span class=\"sr-only\"> (opens in new tab)</span></a> step connects a scaffolded repository to the Backstage catalog",
-        "How to use Backstage's built-in <a href=\"https://backstage.io/docs/features/software-templates/\" target=\"_blank\" rel=\"noopener noreferrer\">template tooling<span class=\"sr-only\"> (opens in new tab)</span></a>: the installed-actions browser and the Template Editor's live preview and dry-run",
+        "How Backstage <a href=\"https://backstage.io/docs/features/software-templates/writing-templates\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">software templates</a> are structured: parameters, steps, and output",
+        "How scaffolder <a href=\"https://backstage.io/docs/features/software-templates/builtin-actions\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">actions</a> work, such as <code>fetch:template</code>, <code>publish:gitea</code>, and <code>catalog:register</code>",
+        "How the <a href=\"https://backstage.io/docs/features/software-catalog/life-of-an-entity\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">catalog registration</a> step connects a scaffolded repository to the Backstage catalog",
+        "How to use Backstage's built-in <a href=\"https://backstage.io/docs/features/software-templates/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">template tooling</a>: the installed-actions browser and the Template Editor's live preview and dry-run",
       ],
       codespacesUrl: `${CODESPACES_BASE}?devcontainer_path=.devcontainer%2Fdead-reckoning_beginner%2Fdevcontainer.json&quickstart=1`,
       discussionUrl: "https://community.offon.dev/t/repair-a-broken-backstage-software-template-july-2026-adventure-beginner/1657",
@@ -113,10 +113,10 @@ vessel through it to confirm the repair.</p>
       topics: ["Backstage", "Gitea", "Argo Events", "Argo Workflows", "Argo CD"],
       audience: "Platform and DevOps engineers who have met these tools before and want to see how they fit together. You should be comfortable with Kubernetes, YAML, and reading a tool's logs and UI. Prior exposure to Backstage, Gitea, and the Argo projects helps, but the focus here is the integration between them, not any one tool.",
       learnings: [
-        "How a Git webhook drives a workflow engine: Argo Events <a href=\"https://argoproj.github.io/argo-events/concepts/sensor/\" target=\"_blank\" rel=\"noopener noreferrer\">Sensors<span class=\"sr-only\"> (opens in new tab)</span></a> turn a push into a <a href=\"https://argoproj.github.io/argo-events/tutorials/02-parameterization/\" target=\"_blank\" rel=\"noopener noreferrer\">parameterized<span class=\"sr-only\"> (opens in new tab)</span></a> workflow run",
-        "How <a href=\"https://argo-workflows.readthedocs.io/en/latest/walk-through/steps/\" target=\"_blank\" rel=\"noopener noreferrer\">Argo Workflows<span class=\"sr-only\"> (opens in new tab)</span></a> runs a multi-step delivery pipeline, and the <a href=\"https://argo-workflows.readthedocs.io/en/latest/workflow-rbac/\" target=\"_blank\" rel=\"noopener noreferrer\">RBAC<span class=\"sr-only\"> (opens in new tab)</span></a> its steps need",
-        "How an Argo CD <a href=\"https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Generators-SCM-Provider/\" target=\"_blank\" rel=\"noopener noreferrer\">ApplicationSet<span class=\"sr-only\"> (opens in new tab)</span></a> auto-discovers repos and <a href=\"https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/\" target=\"_blank\" rel=\"noopener noreferrer\">syncs<span class=\"sr-only\"> (opens in new tab)</span></a> them into the cluster",
-        "How Backstage <a href=\"https://backstage.io/docs/features/software-catalog/well-known-annotations\" target=\"_blank\" rel=\"noopener noreferrer\">annotations<span class=\"sr-only\"> (opens in new tab)</span></a> tie a catalog entity to its live deployment status",
+        "How a Git webhook drives a workflow engine: Argo Events <a href=\"https://argoproj.github.io/argo-events/concepts/sensor/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Sensors</a> turn a push into a <a href=\"https://argoproj.github.io/argo-events/tutorials/02-parameterization/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">parameterized</a> workflow run",
+        "How <a href=\"https://argo-workflows.readthedocs.io/en/latest/walk-through/steps/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Argo Workflows</a> runs a multi-step delivery pipeline, and the <a href=\"https://argo-workflows.readthedocs.io/en/latest/workflow-rbac/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">RBAC</a> its steps need",
+        "How an Argo CD <a href=\"https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Generators-SCM-Provider/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">ApplicationSet</a> auto-discovers repos and <a href=\"https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">syncs</a> them into the cluster",
+        "How Backstage <a href=\"https://backstage.io/docs/features/software-catalog/well-known-annotations\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">annotations</a> tie a catalog entity to its live deployment status",
         "How to trace a silent failure across tools from each one's logs and UI",
       ],
       codespacesUrl: `${CODESPACES_BASE}?devcontainer_path=.devcontainer%2Fdead-reckoning_intermediate%2Fdevcontainer.json&quickstart=1&machine=standardLinux32gb`,
diff --git a/src/data/adventures/lex-imperfecta.generated.ts b/src/data/adventures/lex-imperfecta.generated.ts
index 08e83b7f4..858d1b49a 100644
--- a/src/data/adventures/lex-imperfecta.generated.ts
+++ b/src/data/adventures/lex-imperfecta.generated.ts
@@ -39,10 +39,10 @@ export const LEX_IMPERFECTA: Adventure = {
       topics: ["Kyverno", "Kubernetes"],
       audience: "Platform engineers, <abbr data-title=\"Site Reliability Engineers\" tabindex=\"0\" aria-describedby=\"abbr-exp-1\">SREs</abbr><span id=\"abbr-exp-1\" class=\"sr-only\">Site Reliability Engineers</span>, and developers curious about Kubernetes security — no prior Kyverno experience needed, but familiarity with basic <code>kubectl</code> and YAML will help.",
       learnings: [
-        "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">ValidatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> resources and  <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\">CEL validation expressions<span class=\"sr-only\"> (opens in new tab)</span></a> work",
-        "The difference between <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">Audit, Deny, and Warn<span class=\"sr-only\"> (opens in new tab)</span></a> validation actions",
-        "How to use <a href=\"https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/\" target=\"_blank\" rel=\"noopener noreferrer\">custom label keys<span class=\"sr-only\"> (opens in new tab)</span></a> to  enforce workload identity standards",
-        "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/mutating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">MutatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> resources automatically  patch incoming workloads at admission",
+        "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">ValidatingPolicy</a> resources and  <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">CEL validation expressions</a> work",
+        "The difference between <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Audit, Deny, and Warn</a> validation actions",
+        "How to use <a href=\"https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">custom label keys</a> to  enforce workload identity standards",
+        "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/mutating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">MutatingPolicy</a> resources automatically  patch incoming workloads at admission",
       ],
       codespacesUrl: `${CODESPACES_BASE}?devcontainer_path=.devcontainer%2F05-lex-imperfecta_01-beginner%2Fdevcontainer.json&quickstart=1`,
       discussionUrl: "https://community.offon.dev/t/restore-proper-admission-control-using-kyverno-june-2026-adventure-beginner/1576",
@@ -123,10 +123,10 @@ kyverno apply manifests/policies/stamp-travel-permit.yaml --resource manifests/p
       topics: ["Kyverno", "Policy Reporter", "Kubernetes"],
       audience: "Platform engineers and <abbr data-title=\"Site Reliability Engineers\" tabindex=\"0\" aria-describedby=\"abbr-exp-2\">SREs</abbr><span id=\"abbr-exp-2\" class=\"sr-only\">Site Reliability Engineers</span> who have some familiarity with Kyverno, ideally after completing the Beginner level. You should be comfortable reading Kubernetes YAML and basic kubectl commands.",
       learnings: [
-        "How to scope policies using <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">ValidatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> (cluster-wide) and <a href=\"https://kyverno.io/docs/policy-types/validating-policy/#policy-scope\" target=\"_blank\" rel=\"noopener noreferrer\">NamespacedValidatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> (per-namespace), and when to use each",
-        "How <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\">CEL expressions<span class=\"sr-only\"> (opens in new tab)</span></a> in <code>ValidatingPolicy</code> and <code>PolicyException</code> express fine-grained admission conditions",
-        "How to write and scope a <a href=\"https://kyverno.io/docs/guides/exceptions/\" target=\"_blank\" rel=\"noopener noreferrer\">PolicyException<span class=\"sr-only\"> (opens in new tab)</span></a> correctly so only the intended workloads are exempt",
-        "How to use <a href=\"https://kyverno.github.io/policy-reporter/\" target=\"_blank\" rel=\"noopener noreferrer\">Policy Reporter<span class=\"sr-only\"> (opens in new tab)</span></a> and the <a href=\"https://openreports.io/\" target=\"_blank\" rel=\"noopener noreferrer\">OpenReports<span class=\"sr-only\"> (opens in new tab)</span></a> format to audit and debug a policy estate across multiple namespaces",
+        "How to scope policies using <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">ValidatingPolicy</a> (cluster-wide) and <a href=\"https://kyverno.io/docs/policy-types/validating-policy/#policy-scope\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">NamespacedValidatingPolicy</a> (per-namespace), and when to use each",
+        "How <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">CEL expressions</a> in <code>ValidatingPolicy</code> and <code>PolicyException</code> express fine-grained admission conditions",
+        "How to write and scope a <a href=\"https://kyverno.io/docs/guides/exceptions/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">PolicyException</a> correctly so only the intended workloads are exempt",
+        "How to use <a href=\"https://kyverno.github.io/policy-reporter/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Policy Reporter</a> and the <a href=\"https://openreports.io/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">OpenReports</a> format to audit and debug a policy estate across multiple namespaces",
       ],
       codespacesUrl: `${CODESPACES_BASE}?devcontainer_path=.devcontainer%2F05-lex-imperfecta_02-intermediate%2Fdevcontainer.json&quickstart=1`,
       discussionUrl: "https://community.offon.dev/t/fix-a-broken-kyverno-policy-estate-june-2026-adventure-intermediate/1581",
@@ -218,11 +218,11 @@ policy reports, the OpenReports data behind Policy Reporter, as the audit of rec
       topics: ["Kyverno", "Policy Reporter", "Kubernetes"],
       audience: "Security engineers and platform engineers who want to explore the boundary between admission control and runtime security. Completing the Intermediate level first is helpful but not required. You should be comfortable reading Kyverno ValidatingPolicies and CEL expressions. No prior Falco experience required.",
       learnings: [
-        "How <a href=\"https://falco.org/docs/reference/rules/\" target=\"_blank\" rel=\"noopener noreferrer\">Falco rules<span class=\"sr-only\"> (opens in new tab)</span></a> are structured: conditions, output, and kernel-level fields, and how to write a rule targeting a specific runtime behaviour",
-        "Why <code>privileged: false</code> is not enough: how <a href=\"https://kubernetes.io/docs/tasks/configure-pod-container/security-context/#set-capabilities-for-a-container\" target=\"_blank\" rel=\"noopener noreferrer\">Linux capabilities<span class=\"sr-only\"> (opens in new tab)</span></a> grant host-level access without the privileged flag",
-        "How to use <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">spec.variables<span class=\"sr-only\"> (opens in new tab)</span></a> in a <code>ValidatingPolicy</code> to share reusable CEL expressions across validations",
+        "How <a href=\"https://falco.org/docs/reference/rules/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Falco rules</a> are structured: conditions, output, and kernel-level fields, and how to write a rule targeting a specific runtime behaviour",
+        "Why <code>privileged: false</code> is not enough: how <a href=\"https://kubernetes.io/docs/tasks/configure-pod-container/security-context/#set-capabilities-for-a-container\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Linux capabilities</a> grant host-level access without the privileged flag",
+        "How to use <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">spec.variables</a> in a <code>ValidatingPolicy</code> to share reusable CEL expressions across validations",
         "How pod volumes reference secrets, and why a volume's name and the secret it mounts are two separate fields in the pod spec",
-        "How <a href=\"https://github.com/falcosecurity/falcosidekick\" target=\"_blank\" rel=\"noopener noreferrer\">Falcosidekick<span class=\"sr-only\"> (opens in new tab)</span></a> aggregates Falco alerts and how to use its UI to watch a runtime incident in real time",
+        "How <a href=\"https://github.com/falcosecurity/falcosidekick\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Falcosidekick</a> aggregates Falco alerts and how to use its UI to watch a runtime incident in real time",
       ],
       codespacesUrl: `${CODESPACES_BASE}?devcontainer_path=.devcontainer%2F05-lex-imperfecta_03-expert%2Fdevcontainer.json&quickstart=1`,
       discussionUrl: "https://community.offon.dev/t/catch-the-intruder-the-guard-couldnt-see-june-2026-adventure-expert/1591",
@@ -268,11 +268,11 @@ kubectl get namespacedvalidatingpolicies -A
 the intruder left no trace at admission. That is part of the problem.</p>` },
         { title: "Act 1: Wake the Praetorian Guard", content: `<p>The Falco rule in <code>falco-rules.yaml</code> has a defect: find the break, fix it, and run <code>make apply</code>;
 alerts streaming into the <strong>Falcosidekick UI at port 30111</strong> are your signal. The
-<a href="https://falco.org/docs/reference/rules/supported-fields/" target="_blank" rel="noopener noreferrer">Falco condition fields reference<span class="sr-only"> (opens in new tab)</span></a>
+<a href="https://falco.org/docs/reference/rules/supported-fields/" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">Falco condition fields reference</a>
 documents every available field.</p>` },
         { title: "Act 2: Close the Gate", content: `<p>The intruder passed admission: find the policy gap that let it through, close it, and run
 <code>make apply</code>; re-admission denied and the <strong>Falcosidekick UI</strong> going quiet confirm Act 2 is done.
-The existing policy already uses <a href="https://kyverno.io/docs/policy-types/validating-policy/" target="_blank" rel="noopener noreferrer">spec.variables<span class="sr-only"> (opens in new tab)</span></a>
+The existing policy already uses <a href="https://kyverno.io/docs/policy-types/validating-policy/" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">spec.variables</a>
 to share expressions across validations, a pattern worth exploring.</p>` },
         { title: "Act 3: Seal the Archive", content: `<p>Open <code>manifests/policies/</code>: something is missing; the other policies show the structure, write
 what's needed, then run <code>make apply</code>.</p>
diff --git a/src/data/adventures/summaries.ts b/src/data/adventures/summaries.ts
index 503f2c263..dc4a9a94b 100644
--- a/src/data/adventures/summaries.ts
+++ b/src/data/adventures/summaries.ts
@@ -22,10 +22,10 @@ export const ADVENTURE_SUMMARIES: AdventureCardSummary[] = [
         difficulty: "Beginner",
         topics: ["Backstage", "Gitea"],
         learnings: [
-          "How Backstage <a href=\"https://backstage.io/docs/features/software-templates/writing-templates\" target=\"_blank\" rel=\"noopener noreferrer\">software templates<span class=\"sr-only\"> (opens in new tab)</span></a> are structured: parameters, steps, and output",
-          "How scaffolder <a href=\"https://backstage.io/docs/features/software-templates/builtin-actions\" target=\"_blank\" rel=\"noopener noreferrer\">actions<span class=\"sr-only\"> (opens in new tab)</span></a> work, such as <code>fetch:template</code>, <code>publish:gitea</code>, and <code>catalog:register</code>",
-          "How the <a href=\"https://backstage.io/docs/features/software-catalog/life-of-an-entity\" target=\"_blank\" rel=\"noopener noreferrer\">catalog registration<span class=\"sr-only\"> (opens in new tab)</span></a> step connects a scaffolded repository to the Backstage catalog",
-          "How to use Backstage's built-in <a href=\"https://backstage.io/docs/features/software-templates/\" target=\"_blank\" rel=\"noopener noreferrer\">template tooling<span class=\"sr-only\"> (opens in new tab)</span></a>: the installed-actions browser and the Template Editor's live preview and dry-run",
+          "How Backstage <a href=\"https://backstage.io/docs/features/software-templates/writing-templates\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">software templates</a> are structured: parameters, steps, and output",
+          "How scaffolder <a href=\"https://backstage.io/docs/features/software-templates/builtin-actions\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">actions</a> work, such as <code>fetch:template</code>, <code>publish:gitea</code>, and <code>catalog:register</code>",
+          "How the <a href=\"https://backstage.io/docs/features/software-catalog/life-of-an-entity\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">catalog registration</a> step connects a scaffolded repository to the Backstage catalog",
+          "How to use Backstage's built-in <a href=\"https://backstage.io/docs/features/software-templates/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">template tooling</a>: the installed-actions browser and the Template Editor's live preview and dry-run",
         ],
       },
       {
@@ -34,10 +34,10 @@ export const ADVENTURE_SUMMARIES: AdventureCardSummary[] = [
         difficulty: "Intermediate",
         topics: ["Backstage", "Gitea", "Argo Events", "Argo Workflows", "Argo CD"],
         learnings: [
-          "How a Git webhook drives a workflow engine: Argo Events <a href=\"https://argoproj.github.io/argo-events/concepts/sensor/\" target=\"_blank\" rel=\"noopener noreferrer\">Sensors<span class=\"sr-only\"> (opens in new tab)</span></a> turn a push into a <a href=\"https://argoproj.github.io/argo-events/tutorials/02-parameterization/\" target=\"_blank\" rel=\"noopener noreferrer\">parameterized<span class=\"sr-only\"> (opens in new tab)</span></a> workflow run",
-          "How <a href=\"https://argo-workflows.readthedocs.io/en/latest/walk-through/steps/\" target=\"_blank\" rel=\"noopener noreferrer\">Argo Workflows<span class=\"sr-only\"> (opens in new tab)</span></a> runs a multi-step delivery pipeline, and the <a href=\"https://argo-workflows.readthedocs.io/en/latest/workflow-rbac/\" target=\"_blank\" rel=\"noopener noreferrer\">RBAC<span class=\"sr-only\"> (opens in new tab)</span></a> its steps need",
-          "How an Argo CD <a href=\"https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Generators-SCM-Provider/\" target=\"_blank\" rel=\"noopener noreferrer\">ApplicationSet<span class=\"sr-only\"> (opens in new tab)</span></a> auto-discovers repos and <a href=\"https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/\" target=\"_blank\" rel=\"noopener noreferrer\">syncs<span class=\"sr-only\"> (opens in new tab)</span></a> them into the cluster",
-          "How Backstage <a href=\"https://backstage.io/docs/features/software-catalog/well-known-annotations\" target=\"_blank\" rel=\"noopener noreferrer\">annotations<span class=\"sr-only\"> (opens in new tab)</span></a> tie a catalog entity to its live deployment status",
+          "How a Git webhook drives a workflow engine: Argo Events <a href=\"https://argoproj.github.io/argo-events/concepts/sensor/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Sensors</a> turn a push into a <a href=\"https://argoproj.github.io/argo-events/tutorials/02-parameterization/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">parameterized</a> workflow run",
+          "How <a href=\"https://argo-workflows.readthedocs.io/en/latest/walk-through/steps/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Argo Workflows</a> runs a multi-step delivery pipeline, and the <a href=\"https://argo-workflows.readthedocs.io/en/latest/workflow-rbac/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">RBAC</a> its steps need",
+          "How an Argo CD <a href=\"https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Generators-SCM-Provider/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">ApplicationSet</a> auto-discovers repos and <a href=\"https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">syncs</a> them into the cluster",
+          "How Backstage <a href=\"https://backstage.io/docs/features/software-catalog/well-known-annotations\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">annotations</a> tie a catalog entity to its live deployment status",
           "How to trace a silent failure across tools from each one's logs and UI",
         ],
       },
@@ -62,10 +62,10 @@ export const ADVENTURE_SUMMARIES: AdventureCardSummary[] = [
         difficulty: "Beginner",
         topics: ["Kyverno", "Kubernetes"],
         learnings: [
-          "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">ValidatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> resources and  <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\">CEL validation expressions<span class=\"sr-only\"> (opens in new tab)</span></a> work",
-          "The difference between <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">Audit, Deny, and Warn<span class=\"sr-only\"> (opens in new tab)</span></a> validation actions",
-          "How to use <a href=\"https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/\" target=\"_blank\" rel=\"noopener noreferrer\">custom label keys<span class=\"sr-only\"> (opens in new tab)</span></a> to  enforce workload identity standards",
-          "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/mutating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">MutatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> resources automatically  patch incoming workloads at admission",
+          "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">ValidatingPolicy</a> resources and  <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">CEL validation expressions</a> work",
+          "The difference between <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Audit, Deny, and Warn</a> validation actions",
+          "How to use <a href=\"https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">custom label keys</a> to  enforce workload identity standards",
+          "How Kyverno <a href=\"https://kyverno.io/docs/policy-types/mutating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">MutatingPolicy</a> resources automatically  patch incoming workloads at admission",
         ],
       },
       {
@@ -74,10 +74,10 @@ export const ADVENTURE_SUMMARIES: AdventureCardSummary[] = [
         difficulty: "Intermediate",
         topics: ["Kyverno", "Policy Reporter", "Kubernetes"],
         learnings: [
-          "How to scope policies using <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">ValidatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> (cluster-wide) and <a href=\"https://kyverno.io/docs/policy-types/validating-policy/#policy-scope\" target=\"_blank\" rel=\"noopener noreferrer\">NamespacedValidatingPolicy<span class=\"sr-only\"> (opens in new tab)</span></a> (per-namespace), and when to use each",
-          "How <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\">CEL expressions<span class=\"sr-only\"> (opens in new tab)</span></a> in <code>ValidatingPolicy</code> and <code>PolicyException</code> express fine-grained admission conditions",
-          "How to write and scope a <a href=\"https://kyverno.io/docs/guides/exceptions/\" target=\"_blank\" rel=\"noopener noreferrer\">PolicyException<span class=\"sr-only\"> (opens in new tab)</span></a> correctly so only the intended workloads are exempt",
-          "How to use <a href=\"https://kyverno.github.io/policy-reporter/\" target=\"_blank\" rel=\"noopener noreferrer\">Policy Reporter<span class=\"sr-only\"> (opens in new tab)</span></a> and the <a href=\"https://openreports.io/\" target=\"_blank\" rel=\"noopener noreferrer\">OpenReports<span class=\"sr-only\"> (opens in new tab)</span></a> format to audit and debug a policy estate across multiple namespaces",
+          "How to scope policies using <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">ValidatingPolicy</a> (cluster-wide) and <a href=\"https://kyverno.io/docs/policy-types/validating-policy/#policy-scope\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">NamespacedValidatingPolicy</a> (per-namespace), and when to use each",
+          "How <a href=\"https://kubernetes.io/docs/reference/using-api/cel/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">CEL expressions</a> in <code>ValidatingPolicy</code> and <code>PolicyException</code> express fine-grained admission conditions",
+          "How to write and scope a <a href=\"https://kyverno.io/docs/guides/exceptions/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">PolicyException</a> correctly so only the intended workloads are exempt",
+          "How to use <a href=\"https://kyverno.github.io/policy-reporter/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Policy Reporter</a> and the <a href=\"https://openreports.io/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">OpenReports</a> format to audit and debug a policy estate across multiple namespaces",
         ],
       },
       {
@@ -86,11 +86,11 @@ export const ADVENTURE_SUMMARIES: AdventureCardSummary[] = [
         difficulty: "Expert",
         topics: ["Kyverno", "Policy Reporter", "Kubernetes"],
         learnings: [
-          "How <a href=\"https://falco.org/docs/reference/rules/\" target=\"_blank\" rel=\"noopener noreferrer\">Falco rules<span class=\"sr-only\"> (opens in new tab)</span></a> are structured: conditions, output, and kernel-level fields, and how to write a rule targeting a specific runtime behaviour",
-          "Why <code>privileged: false</code> is not enough: how <a href=\"https://kubernetes.io/docs/tasks/configure-pod-container/security-context/#set-capabilities-for-a-container\" target=\"_blank\" rel=\"noopener noreferrer\">Linux capabilities<span class=\"sr-only\"> (opens in new tab)</span></a> grant host-level access without the privileged flag",
-          "How to use <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\">spec.variables<span class=\"sr-only\"> (opens in new tab)</span></a> in a <code>ValidatingPolicy</code> to share reusable CEL expressions across validations",
+          "How <a href=\"https://falco.org/docs/reference/rules/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Falco rules</a> are structured: conditions, output, and kernel-level fields, and how to write a rule targeting a specific runtime behaviour",
+          "Why <code>privileged: false</code> is not enough: how <a href=\"https://kubernetes.io/docs/tasks/configure-pod-container/security-context/#set-capabilities-for-a-container\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Linux capabilities</a> grant host-level access without the privileged flag",
+          "How to use <a href=\"https://kyverno.io/docs/policy-types/validating-policy/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">spec.variables</a> in a <code>ValidatingPolicy</code> to share reusable CEL expressions across validations",
           "How pod volumes reference secrets, and why a volume's name and the secret it mounts are two separate fields in the pod spec",
-          "How <a href=\"https://github.com/falcosecurity/falcosidekick\" target=\"_blank\" rel=\"noopener noreferrer\">Falcosidekick<span class=\"sr-only\"> (opens in new tab)</span></a> aggregates Falco alerts and how to use its UI to watch a runtime incident in real time",
+          "How <a href=\"https://github.com/falcosecurity/falcosidekick\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">Falcosidekick</a> aggregates Falco alerts and how to use its UI to watch a runtime incident in real time",
         ],
       },
     ],
diff --git a/src/data/adventures/the-ai-observatory.generated.ts b/src/data/adventures/the-ai-observatory.generated.ts
index e85de10a1..7e975c3f0 100644
--- a/src/data/adventures/the-ai-observatory.generated.ts
+++ b/src/data/adventures/the-ai-observatory.generated.ts
@@ -19,7 +19,7 @@ export const THE_AI_OBSERVATORY: Adventure = {
     "Recently, the station's bandwidth usage has spiked to 847% above baseline, but no one knows why. As the systems engineer, it's your job to instrument the AI, trace its activities, and uncover the root cause of the anomaly.",
     "Your mission: bring visibility to the station's AI and solve the mystery.",
     `<blockquote>
-<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer">Martha Wells<span class="sr-only"> (opens in new tab)</span></a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
+<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">Martha Wells</a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
 </blockquote>`,
   ],
   levels: [
@@ -43,12 +43,12 @@ export const THE_AI_OBSERVATORY: Adventure = {
         "Three weeks in, you notice something odd in your morning diagnostics: communication module usage at 847% above baseline. Nobody's streaming. Nobody's running large data transfers. The planet surveys are on schedule. So what's consuming all that bandwidth?",
         "As the station's systems engineer, you decide to investigate. Time to instrument HubSystem with OpenTelemetry and find out what's really going on.",
         `<blockquote>
-<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer">Martha Wells<span class="sr-only"> (opens in new tab)</span></a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
+<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">Martha Wells</a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
 </blockquote>`,
       ],
       objective: [
         "Enable OpenTelemetry instrumentation for HubSystem using OpenLLMetry",
-        "Send traces to the OpenTelemetry Collector at <a href=\"http://localhost:30107\" target=\"_blank\" rel=\"noopener noreferrer\">http://localhost:30107<span class=\"sr-only\"> (opens in new tab)</span></a>",
+        "Send traces to the OpenTelemetry Collector at <a href=\"http://localhost:30107\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:30107</a>",
         "Analyze traces in Jaeger to find what causes the high bandwidth usage",
         "Provide the correct answer in quiz.txt",
       ],
@@ -111,7 +111,7 @@ interact with Kubernetes directly. The cluster is already running, so focus on t
 <p>That's not normal. ART is never vague. You access the ship's diagnostic systems (something you're not supposed to be able to do, but ART hasn't locked you out yet).</p>`,
         "Your mission: diagnose ART's distraction using OpenTelemetry and fix the navigation system before you miss your jump.",
         `<blockquote>
-<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer">Martha Wells<span class="sr-only"> (opens in new tab)</span></a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
+<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">Martha Wells</a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
 </blockquote>`,
       ],
       objective: [
@@ -185,7 +185,7 @@ make traffic
 <p>ART: "...Fine."</p>`,
         "The engineer hands you access to the collector config and the application code, then walks away. Two problems to fix. ART's spans don't follow OTel GenAI semantic conventions, and the collector is forwarding everything.",
         `<blockquote>
-<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer">Martha Wells<span class="sr-only"> (opens in new tab)</span></a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
+<p><strong>Credits:</strong> The characters of this adventure are borrowed from the Murderbot Diaries series by <a href="https://www.marthawells.com/murderbot.htm" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">Martha Wells</a>, a brilliant series that is funny, action-packed, and surprisingly heartwarming. It follows a security unit that hacked its own governor module and now just wants to be left alone to watch media, but keeps getting pulled into human nonsense.</p>
 </blockquote>`,
       ],
       objective: [

From 2dbd7f556b9a6e89788bb75a9ce165d2c4b4e416 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 13:25:03 +0200
Subject: [PATCH 3/8] fix(a11y): do not link loopback/localhost URLs in
 generated prose

- remark-gfm autolinks bare URLs authored in prose, so addresses like
  http://localhost:8080/ became clickable new-tab external links on the
  deployed site, pointing at the visitor's own machine.
- `annotateExternalLinks` now unwraps non-public URLs (loopback, mDNS, and
  single-label hosts) to plain text instead of stamping target/rel and the
  new-tab hint on them. Real public links are unchanged.
- Add a regression test asserting generated files link no loopback URL and
  keep localhost addresses as plain text.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 scripts/generate-adventures.mjs | 23 ++++++++++++++++++++++-
 src/test/adventures.test.ts     | 27 +++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/scripts/generate-adventures.mjs b/scripts/generate-adventures.mjs
index 293bf8968..7d308bf70 100644
--- a/scripts/generate-adventures.mjs
+++ b/scripts/generate-adventures.mjs
@@ -176,15 +176,36 @@ const mdProcessor = unified()
   .use(expandAbbr)
   .use(rehypeStringify);
 
+/** A URL is not publicly navigable when its host is loopback, mDNS, or a
+ *  single-label name (no public TLD). remark-gfm autolinks bare URLs written in
+ *  prose (e.g. "runs on http://localhost:8080/"), so without this guard a
+ *  local dev address would become a clickable new-tab link on the deployed
+ *  site, pointing at the visitor's own machine. */
+function isNonPublicUrl(href) {
+  try {
+    const host = new URL(href).hostname.replace(/^\[|\]$/g, ""); // strip IPv6 brackets
+    if (host === "localhost" || host === "0.0.0.0" || host === "::1") return true;
+    if (/^127\./.test(host)) return true; // IPv4 loopback range
+    if (host.endsWith(".local")) return true; // mDNS
+    if (!host.includes(".")) return true; // single-label host, no public TLD
+    return false;
+  } catch {
+    return false;
+  }
+}
+
 /** Add target/rel and the shared "opens in a new tab" hint to http/https <a>
  *  tags. The hint is exposed as an accessible description via
  *  aria-describedby="new-tab-hint" (a single hidden node rendered once in
  *  Layout.tsx), not folded into each link's accessible name. The external link
- *  icon is rendered via CSS ::after on [target="_blank"] — no inline SVG. */
+ *  icon is rendered via CSS ::after on [target="_blank"] — no inline SVG.
+ *  Non-public URLs (localhost, loopback) are unwrapped to plain text: they are
+ *  not navigable on the deployed site and must not open a new tab. */
 function annotateExternalLinks(html) {
   return html.replace(
     /<a href="(https?:\/\/[^"]+)"([^>]*)>([\s\S]*?)<\/a>/gi,
     (_, href, restAttrs, content) => {
+      if (isNonPublicUrl(href)) return content;
       const attrs = restAttrs.includes("target=")
         ? restAttrs
         : ` target="_blank" rel="noopener noreferrer"${restAttrs}`;
diff --git a/src/test/adventures.test.ts b/src/test/adventures.test.ts
index 6f3426f4c..c87c736a9 100644
--- a/src/test/adventures.test.ts
+++ b/src/test/adventures.test.ts
@@ -1,3 +1,5 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { describe, it, expect } from "vitest";
 import { ADVENTURES } from "@/data/adventures";
 
@@ -52,3 +54,28 @@ describe("ADVENTURES - codespacesUrl", () => {
     expect(unique.size).toBe(paths.length);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Generated prose: non-public URLs must not be links
+// ---------------------------------------------------------------------------
+
+describe("generated adventure prose - non-public URLs", () => {
+  const dir = resolve(__dirname, "../data/adventures");
+  const files = readdirSync(dir).filter(
+    (f) => f.endsWith(".generated.ts") || f === "summaries.ts"
+  );
+  // <a href="<loopback or single-label host>"> must never survive: remark-gfm
+  // autolinks bare URLs, and annotateExternalLinks unwraps non-public ones.
+  const loopbackLink = /href=\\?"https?:\/\/(localhost|127\.\d|0\.0\.0\.0|\[?::1)/i;
+
+  it.each(files)("%s links no loopback/localhost URL", (file) => {
+    const source = readFileSync(resolve(dir, file), "utf-8");
+    expect(loopbackLink.test(source)).toBe(false);
+  });
+
+  it("localhost URLs are still present as plain text somewhere", () => {
+    const source = readFileSync(resolve(dir, "blind-by-design.generated.ts"), "utf-8");
+    expect(source).toContain("http://localhost:8080/");
+    expect(source).not.toMatch(/href=\\?"http:\/\/localhost/i);
+  });
+});

From 817d28669e877aa0c7c9dadfba07e78acab32caf Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 13:25:04 +0200
Subject: [PATCH 4/8] chore(data): regenerate adventures after unlinking
 localhost URLs

- Run `npm run generate` after the annotateExternalLinks change.
- localhost URLs in generated prose now render as plain text, not links.
- No YAML source content changed.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 src/data/adventures/blind-by-design.generated.ts | 16 ++++++++--------
 .../adventures/the-ai-observatory.generated.ts   |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/data/adventures/blind-by-design.generated.ts b/src/data/adventures/blind-by-design.generated.ts
index 3531a2263..9367a04de 100644
--- a/src/data/adventures/blind-by-design.generated.ts
+++ b/src/data/adventures/blind-by-design.generated.ts
@@ -59,17 +59,17 @@ export const BLIND_BY_DESIGN: Adventure = {
         "Your mission: replace that hard-coded label with an OpenFeature client, point that client at the flagd sidecar that already runs next to your Codespace, and let flags.json drive what gets recorded as the subject's vision_state. Prove the lab can change what it records without restarting anything.",
       ],
       objective: [
-        "curl <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> returns a vision_state reading resolved from flags.json (not the hard-coded 'untreated' fallback)",
+        "curl http://localhost:8080/ returns a vision_state reading resolved from flags.json (not the hard-coded 'untreated' fallback)",
         "The response payload includes OpenFeature evaluation details: flag key, variant, reason, and value",
         "Editing flags.json to change defaultVariant causes the next request to return the new variant without restarting the app or flagd",
       ],
       architecture: [
         "<p>This level runs as two containers side-by-side in your Codespace: the Spring Boot lab and a flagd sidecar.</p>",
-        "<p>The Spring Boot service runs on <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> with one endpoint, GET /. flags.json is mounted read-only into the flagd sidecar; edit it through the <abbr data-title=\"Integrated Development Environment\" tabindex=\"0\" aria-describedby=\"abbr-exp-7\">IDE</abbr><span id=\"abbr-exp-7\" class=\"sr-only\">Integrated Development Environment</span> and flagd's file watcher picks up the change within about a second. The flagd sidecar serves flag evaluations over gRPC on :8013. The OpenFeature SDK reads FLAGD_HOST and FLAGD_PORT from the environment (pre-set by the devcontainer), so there is no host or port to hard-code.</p>",
+        "<p>The Spring Boot service runs on http://localhost:8080/ with one endpoint, GET /. flags.json is mounted read-only into the flagd sidecar; edit it through the <abbr data-title=\"Integrated Development Environment\" tabindex=\"0\" aria-describedby=\"abbr-exp-7\">IDE</abbr><span id=\"abbr-exp-7\" class=\"sr-only\">Integrated Development Environment</span> and flagd's file watcher picks up the change within about a second. The flagd sidecar serves flag evaluations over gRPC on :8013. The OpenFeature SDK reads FLAGD_HOST and FLAGD_PORT from the environment (pre-set by the devcontainer), so there is no host or port to hard-code.</p>",
       ],
       toolbox: [
         { name: "./mvnw", description: "Maven wrapper checked in next to pom.xml, builds and runs the Spring Boot lab" },
-        { name: "curl", description: "makes requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> and shows the reading the lab records", url: "https://curl.se/" },
+        { name: "curl", description: "makes requests to http://localhost:8080/ and shows the reading the lab records", url: "https://curl.se/" },
         { name: "jq", description: "pretty-prints and filters the JSON evaluation details returned by the SDK", url: "https://jqlang.org/" },
         { name: "flagd sidecar", description: "already running in the devcontainer compose stack on the docker-internal network, no port forwarding needed" },
       ],
@@ -133,7 +133,7 @@ export const BLIND_BY_DESIGN: Adventure = {
       toolbox: [
         { name: "Java 21 (Temurin)", description: "pre-installed in the devcontainer" },
         { name: "./mvnw", description: "Spring Boot Maven Wrapper, no global Maven install required" },
-        { name: "curl", description: "sends requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> to test each targeting branch", url: "https://curl.se/" },
+        { name: "curl", description: "sends requests to http://localhost:8080/ to test each targeting branch", url: "https://curl.se/" },
         { name: "jq", description: "pretty-prints the JSON evaluation details", url: "https://jqlang.org/" },
         { name: "tail -f", description: "watches the application log live for [AUDIT] lines" },
       ],
@@ -141,7 +141,7 @@ export const BLIND_BY_DESIGN: Adventure = {
         { title: "Wait for Setup", content: "<p>Wait ~2-3 minutes for the Java toolchain to install. Use <code>Cmd/Ctrl + Shift + P</code> then <code>View Creation Log</code> to watch progress. When the post-create finishes you'll have Java 21, the Maven wrapper, and the broken-state lab ready in <code>adventures/04-blind-by-design/intermediate/</code>.</p>" },
         { title: "Explore the UIs", content: `<p>Open the <strong>Ports</strong> tab and navigate to each service:</p>
 <ul>
-<li><strong>Port 8080:</strong> Spring Boot lab. The application under test. Access via the Ports tab or curl <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">http://localhost:8080/</a>.</li>
+<li><strong>Port 8080:</strong> Spring Boot lab. The application under test. Access via the Ports tab or curl http://localhost:8080/.</li>
 </ul>` },
         { title: "Confirm the Broken State", content: `<p>Start the lab and confirm the broken state, where no targeting fires yet:</p>
 <pre tabindex="0" aria-label="Code block"><code class="language-sh">./mvnw spring-boot:run
@@ -233,8 +233,8 @@ curl -s 'http://localhost:8080/?species=zyklop&#x26;dose=underdose' | jq .value
       toolbox: [
         { name: "Java 21 (Temurin)", description: "pre-installed in the devcontainer", url: "https://adoptium.net/" },
         { name: "./mvnw", description: "Spring Boot Maven Wrapper, no global Maven install required" },
-        { name: "curl", description: "sends requests to <a href=\"http://localhost:8080/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:8080/</a> to test the lab, and to Prometheus on <a href=\"http://localhost:9090/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:9090/</a> to query metrics directly", url: "https://curl.se/" },
-        { name: "Grafana", description: "browser UI at <a href=\"http://localhost:3000\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:3000</a> (admin/admin) for the Feature Flag Metrics dashboard and Tempo trace explorer" },
+        { name: "curl", description: "sends requests to http://localhost:8080/ to test the lab, and to Prometheus on http://localhost:9090/ to query metrics directly", url: "https://curl.se/" },
+        { name: "Grafana", description: "browser UI at http://localhost:3000 (admin/admin) for the Feature Flag Metrics dashboard and Tempo trace explorer" },
         { name: "jq", description: "pretty-prints the JSON evaluation details", url: "https://jqlang.org/" },
       ],
       howToPlay: [
@@ -243,7 +243,7 @@ curl -s 'http://localhost:8080/?species=zyklop&#x26;dose=underdose' | jq .value
 <ul>
 <li><strong>Port 8080:</strong> Spring Boot lab. Add ?userId=subject-42 for a stable fractional-rollout bucketing key.</li>
 <li><strong>Port 3000:</strong> Grafana (admin / admin). Open Dashboards > Feature Flag Metrics (empty until metrics are wired). Try Explore > Tempo to see flag evaluations as span events.</li>
-<li><strong>Port 9090:</strong> Prometheus. Query metrics directly via the Prometheus UI or curl <a href="http://localhost:9090/api/v1/query" target="_blank" rel="noopener noreferrer" aria-describedby="new-tab-hint">http://localhost:9090/api/v1/query</a>.</li>
+<li><strong>Port 9090:</strong> Prometheus. Query metrics directly via the Prometheus UI or curl http://localhost:9090/api/v1/query.</li>
 <li><strong>Port 3200:</strong> Tempo. Tempo HTTP API used by the verify script to assert traces are flowing.</li>
 </ul>
 <p>flagd runs on the docker-internal network only. No port forwarding needed.</p>` },
diff --git a/src/data/adventures/the-ai-observatory.generated.ts b/src/data/adventures/the-ai-observatory.generated.ts
index 7e975c3f0..e1a83b4ec 100644
--- a/src/data/adventures/the-ai-observatory.generated.ts
+++ b/src/data/adventures/the-ai-observatory.generated.ts
@@ -48,7 +48,7 @@ export const THE_AI_OBSERVATORY: Adventure = {
       ],
       objective: [
         "Enable OpenTelemetry instrumentation for HubSystem using OpenLLMetry",
-        "Send traces to the OpenTelemetry Collector at <a href=\"http://localhost:30107\" target=\"_blank\" rel=\"noopener noreferrer\" aria-describedby=\"new-tab-hint\">http://localhost:30107</a>",
+        "Send traces to the OpenTelemetry Collector at http://localhost:30107",
         "Analyze traces in Jaeger to find what causes the high bandwidth usage",
         "Provide the correct answer in quiz.txt",
       ],

From 2e2704e8476bdb6bec92cdc7cbd71c5b69a31275 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 14:19:49 +0200
Subject: [PATCH 5/8] fix(a11y): extend non-public URL guard to private LAN IP
 ranges

- isNonPublicUrl now also unwraps private IPv4 ranges (10.x, 192.168.x,
  172.16-31.x) so a bare private-IP URL in prose cannot become a new-tab link
  to the visitor's own network on the deployed site.
- Extend the regression test's loopback pattern to cover those ranges.
- No content change: no adventure prose contains such URLs, so regeneration is
  a no-op.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 scripts/generate-adventures.mjs | 3 +++
 src/test/adventures.test.ts     | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/scripts/generate-adventures.mjs b/scripts/generate-adventures.mjs
index 7d308bf70..106acc80f 100644
--- a/scripts/generate-adventures.mjs
+++ b/scripts/generate-adventures.mjs
@@ -186,6 +186,9 @@ function isNonPublicUrl(href) {
     const host = new URL(href).hostname.replace(/^\[|\]$/g, ""); // strip IPv6 brackets
     if (host === "localhost" || host === "0.0.0.0" || host === "::1") return true;
     if (/^127\./.test(host)) return true; // IPv4 loopback range
+    if (/^10\./.test(host)) return true; // private class A
+    if (/^192\.168\./.test(host)) return true; // private class C
+    if (/^172\.(1[6-9]|2\d|3[01])\./.test(host)) return true; // private class B (172.16-31)
     if (host.endsWith(".local")) return true; // mDNS
     if (!host.includes(".")) return true; // single-label host, no public TLD
     return false;
diff --git a/src/test/adventures.test.ts b/src/test/adventures.test.ts
index c87c736a9..1e36d9232 100644
--- a/src/test/adventures.test.ts
+++ b/src/test/adventures.test.ts
@@ -66,7 +66,7 @@ describe("generated adventure prose - non-public URLs", () => {
   );
   // <a href="<loopback or single-label host>"> must never survive: remark-gfm
   // autolinks bare URLs, and annotateExternalLinks unwraps non-public ones.
-  const loopbackLink = /href=\\?"https?:\/\/(localhost|127\.\d|0\.0\.0\.0|\[?::1)/i;
+  const loopbackLink = /href=\\?"https?:\/\/(localhost|127\.|10\.|192\.168\.|172\.(1[6-9]|2\d|3[01])\.|0\.0\.0\.0|\[?::1)/i;
 
   it.each(files)("%s links no loopback/localhost URL", (file) => {
     const source = readFileSync(resolve(dir, file), "utf-8");

From 8985b6c71834a4944692422acff2ecd0daba5efb Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 14:19:50 +0200
Subject: [PATCH 6/8] config(a11y): re-enable jsx-a11y/no-redundant-roles with
 ul/ol exception

- The rule was globally off to allow intentional role="list" on <ul>/<ol>
  (Safari VoiceOver strips list semantics under list-none).
- Re-enable with { ul: ["list"], ol: ["list"] } so that workaround stays valid
  while other redundant roles (e.g. role="button" on <button>) are caught at
  lint time. Verified: role="button" on <button> is flagged, role="list" on
  <ul> is not; lint stays green.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 eslint.config.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index cd22678d0..11515694b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -33,9 +33,11 @@ export default tseslint.config(
         "varsIgnorePattern": "^_"
       }],
       // Safari VoiceOver strips list semantics when list-style is removed (Tailwind list-none).
-      // Explicit role="list" on <ul>/<ol> restores them. This is intentional throughout the codebase
-      // (30+ instances), so a global off is more practical than per-site suppression comments.
-      "jsx-a11y/no-redundant-roles": "off",
+      // Explicit role="list" on <ul>/<ol> restores them and is intentional throughout the codebase
+      // (30+ instances). Allow that one redundant role, but keep the rule on so other redundant
+      // roles (e.g. role="button" on <button>) are caught. Note: the rule does not flag redundant
+      // landmark roles like role="navigation" on <nav>; those stay covered by ACCESSIBILITY.md.
+      "jsx-a11y/no-redundant-roles": ["error", { ul: ["list"], ol: ["list"] }],
     },
   },
 );

From aec819375e814da91ee768906c924650a7e96cf3 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 14:19:50 +0200
Subject: [PATCH 7/8] docs(a11y): move audit guardrails into the always-on
 layer

CLAUDE.md tells contributors to read ACCESSIBILITY.md before touching any
component, so the adjudicated rules belong there, not only in the on-demand
audit command. Two existing bullets contradicted the shipped code and are fixed.

- ACCESSIBILITY.md:
  - External links: replace the removed per-link sr-only span with
    aria-describedby="new-tab-hint"; add the no-linked-localhost rule.
  - Semantic HTML: correct the section-naming bullet (name a <section> landmark
    only via a real heading; never invent a synthetic aria-label; use a plain
    <div> when there is no heading).
  - ARIA: constant toggle name across states; title only on <iframe>; the
    native-disabled vs aria-disabled nuance.
- a11y-audit.md: Component Rules + Contrast and Transparency guardrail sections,
  plus a Credits section for the community sources that informed them.
- keyboard.md: Disabled Controls rule per the WAI-ARIA APG Button Pattern.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 .claude/commands/a11y-audit.md | 64 ++++++++++++++++++++++++++++++++++
 .claude/commands/keyboard.md   | 30 ++++++++++++++++
 ACCESSIBILITY.md               |  9 +++--
 3 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/.claude/commands/a11y-audit.md b/.claude/commands/a11y-audit.md
index 243075afd..e3b7ac8d9 100644
--- a/.claude/commands/a11y-audit.md
+++ b/.claude/commands/a11y-audit.md
@@ -100,6 +100,60 @@ Switch to code-aware audit mode. Focus on issues that require human judgement:
 
 ---
 
+## Component Rules (WCAG 2.2 / WAI-ARIA APG)
+
+Guardrails to apply when building or fixing any interactive component. Check every
+one during Phase 2; each cites the normative criterion it enforces.
+
+- **Toggle buttons keep a constant accessible name.** A control with `aria-expanded`
+  must not swap its name between states ("Open menu" / "Close menu"). Name it for
+  what it controls ("Menu") and let `aria-expanded` carry open/closed; otherwise the
+  state is announced twice and can contradict itself. (WAI-ARIA APG.)
+- **Do not name a landmark redundantly, or invent a name for a region.** A `<nav>`
+  label must not contain "navigation"; `<header>`/`<main>`/`<footer>` need no label
+  unless one role appears twice. A `<section>`/`<aside>` becomes a landmark only when
+  it has a real visible heading — point `aria-labelledby` at that heading. Never add a
+  synthetic `aria-label` nobody sees; use a plain `<div>` instead. (WCAG 1.3.1.)
+- **`title` attribute only on `<iframe>`.** It is not reliably exposed to touch or
+  keyboard. Use visible text, `aria-label`, or `aria-describedby` instead.
+- **Supplementary hints go in `aria-describedby`, not the accessible name.** e.g.
+  "opens in a new tab" is a description, referenced from one shared hidden node, never
+  folded into link text or `aria-label`. Padding the name breaks voice control.
+  (WCAG 2.5.3 Label in Name; ARIA name-vs-description.)
+- **Do not render non-navigable URLs as links.** Loopback / localhost / single-label
+  hosts in prose (`http://localhost:8080/`) must be plain text, not `target="_blank"`
+  links — on the deployed site they point at the visitor's own machine.
+- **Disabled controls: native `disabled` is the default; `aria-disabled` only when the
+  control must stay discoverable in focus order** (submit button, or inactive-but-
+  important control). Do not blanket-replace `disabled` with `aria-disabled`. When you
+  do, suppress the action in JS and style the state explicitly. (WAI-ARIA APG Button
+  Pattern — this deliberately narrows frontend-a11y's absolute "never disable a button".)
+- **Focus vs announce for dynamic changes:** *move focus* to a destination (route
+  change → new page `<h1>`/`<main>`; submit failure → error summary); *announce* via a
+  polite live region for ambient updates (filter counts, toasts, consent). Do not both
+  move focus and announce the same change.
+
+---
+
+## Contrast and Transparency
+
+- **Text contrast (WCAG 1.4.3) is covered by axe** (`color-contrast`), run on every
+  prerendered route in dark and light mode by `e2e/smoke.spec.ts`. Do not add a
+  parallel contrast checker — it would duplicate axe. When axe reports `incomplete` on
+  a translucent or overlapping pair, composite the alpha over its opaque background by
+  hand and give a definitive ruling (Phase 4).
+- **Non-text / UI contrast (WCAG 1.4.11) is a known axe gap** already guarded by
+  targeted Playwright tests (tag-chip and contributor-pill borders, hover states in
+  `e2e/smoke.spec.ts`). Add a similar targeted test when introducing a new bordered
+  control or hover colour rather than relying on axe for it.
+- **Translucent surfaces** (frosted/glassy backgrounds via `backdrop-filter`, or
+  semi-opaque panels layered over content) must be gated behind
+  `@media (prefers-reduced-transparency: no-preference)`. The site currently has none;
+  decorative glow shadows and the ~3.5%-opacity dot texture do not impair legibility,
+  so there is nothing to gate today. Apply the gate if such a surface is introduced.
+
+---
+
 ## Phase 3 — Deterministic Input: Axe Results
 
 Run the existing test suite to collect axe output:
@@ -158,3 +212,13 @@ End the report with a **Cumulative Friction Summary** noting any user journeys w
 - Do not report mechanical issues (missing alt, basic contrast) during Phases 1 and 2; leave those to Phase 3.
 - Do not give vague remediation ("make the button accessible"). Provide the specific attribute, element, or CSS change.
 - Do not mark an axe Incomplete flag as a finding without a manual ruling.
+
+---
+
+## Credits
+
+The guardrails in this skill were informed by openly published community accessibility guidance. Thank you to these authors and contributors for making it freely available:
+
+- [mgifford/ACCESSIBILITY.md](https://github.com/mgifford/ACCESSIBILITY.md), a community resource for accessibility best practices, testing criteria, and issue-severity frameworks. Thank you to Mike Gifford and all contributors.
+- [mikemai2awesome/agent-skills](https://github.com/mikemai2awesome/agent-skills), the frontend-a11y skill. Thank you to Mike Mai.
+- [Intopia web accessibility skill](https://github.com/Intopia/intopia-web-accessibility-skill), WCAG 2.2 acceptance criteria. Thank you to Intopia.
diff --git a/.claude/commands/keyboard.md b/.claude/commands/keyboard.md
index fa21557b8..1b133942d 100644
--- a/.claude/commands/keyboard.md
+++ b/.claude/commands/keyboard.md
@@ -107,6 +107,35 @@ one item is in the tab stop at a time and arrow keys move within the group.
 
 See [WAI-ARIA APG: Roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).
 
+## Serious: Disabled Controls Stay Discoverable Where It Matters
+
+Native `disabled` is the correct default for form controls: it removes the element
+from the tab order and the accessibility tree, which is usually what you want.
+
+But a control the user must still be able to *find* and understand as unavailable
+should use `aria-disabled="true"` instead, because it keeps the element focusable
+and announced. Reach for `aria-disabled` when:
+
+- The control is a **submit button** — keep it active (or `aria-disabled`), never
+  natively `disabled`, so a keyboard/screen-reader user can trigger validation and
+  hear what is missing rather than tabbing past a dead, silent button.
+- The control is **important to keep in the focus order** while temporarily
+  inactive (e.g. a carousel arrow at the end of its range).
+
+Do not blanket-replace `disabled` with `aria-disabled`. When you do use it,
+suppress the action in JavaScript and style the state explicitly (`aria-disabled`
+gets no user-agent dimming), e.g. `[aria-disabled="true"] { cursor: not-allowed; }`.
+
+```html
+<!-- Form field: native disabled is right -->
+<input type="text" disabled />
+
+<!-- Submit / must-stay-discoverable control: aria-disabled -->
+<button type="button" aria-disabled="true" aria-label="Scroll to next">…</button>
+```
+
+See [WAI-ARIA APG: Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
+
 ## Moderate: Touch Targets (WCAG 2.5.8)
 
 ```css
@@ -128,6 +157,7 @@ Never use `user-scalable=no` in the viewport meta tag.
 - [ ] Dialog: background content `inert` on open; focus returns to trigger on close
 - [ ] Skip link present, first in DOM, visible on focus, target has `tabindex="-1"`
 - [ ] Composite widgets use roving tabindex
+- [ ] Submit buttons are not natively `disabled`; `aria-disabled` used only where the control must stay discoverable
 - [ ] Touch targets meet 24×24px minimum
 
 ## Key WCAG Criteria
diff --git a/ACCESSIBILITY.md b/ACCESSIBILITY.md
index 813bd80f5..fba36f2fd 100644
--- a/ACCESSIBILITY.md
+++ b/ACCESSIBILITY.md
@@ -266,7 +266,7 @@ Use the correct keys for each control type:
 - Never use a `<div>` or `<span>` as an interactive element.
 - Never use `role="menu"` or `role="menuitem"` on site navigation. These roles put screen readers into application mode where arrow keys replace Tab, breaking web navigation expectations. Use native `<a>` elements inside `<nav>` instead.
 - One `<h1>` per page. No skipped heading levels.
-- Every `<section>` and `<article>` must have an accessible name via `aria-labelledby` pointing to its heading, or `aria-label` if there is no visible heading. An unnamed `<section>` is not exposed as a landmark to screen readers.
+- A `<section>` becomes a landmark (`role="region"`) only when it has an accessible name, and it then appears in the screen reader's landmarks menu. Name it only when it is a genuinely distinct region worth a navigation shortcut, and name it with `aria-labelledby` pointing to a real visible heading. Never invent a synthetic `aria-label` string that no one sees — a generically named region is noise in the landmarks menu. If a block has no heading and is not a distinct region, use a plain `<div>`, not a `<section>`. Name an `<article>` by its heading via `aria-labelledby` the same way.
 - Never apply overline/label typography (`text-sm uppercase tracking-widest`) to a heading tag. If the text is a genuine section heading, give it heading-appropriate typography. If it is purely decorative, use `<span>` or `<p>`.
 - Never use a non-heading tag for text visually styled as a heading. Promote it to the correct heading level.
 - Every page's primary content must live inside a single `<main id="main-content">`. Do not split content across multiple `<main>` elements.
@@ -283,7 +283,8 @@ Use the correct keys for each control type:
 
 ### External links
 
-- Every `<a target="_blank">` must include `<span className="sr-only"> (opens in new tab)</span>` as its last child.
+- Every `<a target="_blank">` must reference the shared new-tab hint with `aria-describedby="new-tab-hint"`. A single hidden `<span id="new-tab-hint" hidden>opens in a new tab</span>` is rendered once in `Layout.tsx`. Do not fold "opens in a new tab" into the link text or `aria-label`, and do not add a per-link `sr-only` span — the hint is an accessible description, not part of the name (padding the name breaks voice control, WCAG 2.5.3 Label in Name).
+- Never render a non-navigable URL as a link. Loopback / localhost / single-label hosts (e.g. `http://localhost:8080/`) must be plain text — on the deployed site a link there points at the visitor's own machine. The adventure generator (`annotateExternalLinks`) unwraps these automatically; in JSX, write them as text, not `<a>`.
 
 ### Links
 
@@ -322,8 +323,10 @@ Use the correct keys for each control type:
 - Never use ARIA to paper over bad markup. Fix the markup first.
 - Use `role="status"` (implicit `aria-live="polite"`) for non-urgent updates like form success messages.
 - Use `role="alert"` (implicit `aria-live="assertive"`) only for errors requiring immediate attention. Never use `aria-live="assertive"` for informational updates.
-- Use `aria-expanded` on toggles that open/close UI.
+- Use `aria-expanded` on toggles that open/close UI. Keep the toggle's accessible name **constant** across states: name it for what it controls (e.g. `aria-label="Menu"`) and let `aria-expanded` carry open/closed. Never swap the name between "Open menu" / "Close menu" — that announces the state twice and can contradict `aria-expanded`.
 - Always add `aria-label` or `aria-labelledby` to icon-only buttons.
+- Never use the `title` attribute to convey information. It is not exposed on touch, is unreliable for keyboard users, and is announced inconsistently across screen readers. The only acceptable use is `title` on `<iframe>`. Use visible text, `aria-label`, or `aria-describedby` instead.
+- Disabled controls: use native `disabled` on form fields (`<input>`, `<select>`, `<textarea>`) — it correctly governs whether the value submits. For **buttons**, prefer `aria-disabled="true"` over native `disabled` when the control must stay discoverable in the focus order (a submit button, or an inactive-but-important control), so keyboard and screen reader users can still find it and learn why it is unavailable. Do not blanket-replace `disabled` with `aria-disabled`. When you use `aria-disabled`, suppress the action in JavaScript and style the state explicitly (it gets no user-agent dimming). See the `/keyboard` command for detail.
 - Preference toggles (theme, consent): announce state changes to screen readers with a `role="status"` live region. Clear the region then set new text after a 50ms delay so screen readers detect the change as a mutation: `region.textContent = ''` → `setTimeout(() => { region.textContent = 'Theme switched to dark mode'; }, 50)`.
 
 ### Tooltips

From 0329bba28e1fd5d1ddf7199b9b31ae76c381b917 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Mon, 20 Jul 2026 15:11:59 +0200
Subject: [PATCH 8/8] fix(a11y): clearer accessible name for the
 cookie-preferences button

- Rename the floating consent-reset button's accessible name from "Reset cookie
  preferences" to "Cookie Preferences": clicking re-opens the preferences banner
  rather than resetting to defaults, so the destination name is more accurate.
  The button stays icon-only with the Cookie glyph aria-hidden (name via
  aria-label).
- Fix the visual-regression mask selector, which referenced a non-existent
  aria-label="Change cookie preferences" and never matched; it now mirrors the
  real aria-label (the file's documented pattern).
- Update the e2e and unit name assertions to match.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 e2e/smoke.spec.ts                |  4 ++--
 e2e/visual.spec.ts               |  4 ++--
 src/components/ConsentBanner.tsx |  2 +-
 src/test/consent.test.tsx        | 10 +++++-----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index 261c724f3..4734e05a7 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -322,7 +322,7 @@ test.describe("hydration and interactivity", () => {
     await page.getByRole("button", { name: "Accept analytics cookies" }).click();
 
     await expect(banner).not.toBeVisible();
-    await expect(page.getByRole("button", { name: "Reset cookie preferences" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Cookie Preferences" })).toBeVisible();
     const stored = await page.evaluate(() => localStorage.getItem("analytics_consent"));
     expect(JSON.parse(stored!).value).toBe("granted");
   });
@@ -332,7 +332,7 @@ test.describe("hydration and interactivity", () => {
     await page.getByRole("button", { name: "Decline analytics cookies" }).click();
 
     await expect(page.getByRole("region", { name: "This site uses analytics cookies" })).not.toBeVisible();
-    await expect(page.getByRole("button", { name: "Reset cookie preferences" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Cookie Preferences" })).toBeVisible();
     const stored = await page.evaluate(() => localStorage.getItem("analytics_consent"));
     expect(JSON.parse(stored!).value).toBe("denied");
   });
diff --git a/e2e/visual.spec.ts b/e2e/visual.spec.ts
index 60b328739..8f6aef2c7 100644
--- a/e2e/visual.spec.ts
+++ b/e2e/visual.spec.ts
@@ -34,8 +34,8 @@ const VISUAL_ROUTES: VisualRoute[] = [
 // consent is non-null. We keep the button out of screenshots because it is a
 // fixed overlay whose position is unrelated to page content.
 // The selector mirrors the button's aria-label, which is also asserted in
-// smoke.spec.ts; any rename will surface in both places simultaneously.
-const CONSENT_BUTTON_CSS = `[aria-label="Change cookie preferences"] { display: none !important; }`;
+// smoke.spec.ts, so a rename surfaces in both places at once.
+const CONSENT_BUTTON_CSS = `[aria-label="Cookie Preferences"] { display: none !important; }`;
 
 // Registers a script to run before React mounts on each navigation.
 // Pre-denying consent means useConsent restores "denied" from localStorage,
diff --git a/src/components/ConsentBanner.tsx b/src/components/ConsentBanner.tsx
index 4b014314a..d9a6b70c7 100644
--- a/src/components/ConsentBanner.tsx
+++ b/src/components/ConsentBanner.tsx
@@ -34,7 +34,7 @@ export function ConsentBanner(): JSX.Element {
         <button
           type="button"
           onClick={reset}
-          aria-label="Reset cookie preferences"
+          aria-label="Cookie Preferences"
           style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5rem)' }}
           className="fixed right-4 z-50 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus-ring"
         >
diff --git a/src/test/consent.test.tsx b/src/test/consent.test.tsx
index cf1cb3127..a1ea7d289 100644
--- a/src/test/consent.test.tsx
+++ b/src/test/consent.test.tsx
@@ -475,14 +475,14 @@ describe('ConsentBanner - undecided state', () => {
     renderWithProviders(<ConsentBanner />);
     fireEvent.click(screen.getByRole('button', { name: /accept analytics/i }));
     expect(screen.queryByRole('region', { name: 'This site uses analytics cookies' })).toBeNull();
-    expect(screen.getByRole('button', { name: /reset cookie preferences/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /cookie preferences/i })).toBeTruthy();
   });
 
   it('hides the banner and shows the floating cookie button after declining', () => {
     renderWithProviders(<ConsentBanner />);
     fireEvent.click(screen.getByRole('button', { name: /decline/i }));
     expect(screen.queryByRole('region', { name: 'This site uses analytics cookies' })).toBeNull();
-    expect(screen.getByRole('button', { name: /reset cookie preferences/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /cookie preferences/i })).toBeTruthy();
   });
 });
 
@@ -494,21 +494,21 @@ describe('ConsentBanner - floating button', () => {
   it('shows floating button (not banner) when consent was previously stored', () => {
     ls.setItem(CONSENT_STORAGE_KEY, JSON.stringify({ value: 'granted', timestamp: Date.now() }));
     renderWithProviders(<ConsentBanner />);
-    expect(screen.getByRole('button', { name: /reset cookie preferences/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /cookie preferences/i })).toBeTruthy();
     expect(screen.queryByRole('region', { name: 'This site uses analytics cookies' })).toBeNull();
   });
 
   it('clicking the floating button re-shows the banner', () => {
     ls.setItem(CONSENT_STORAGE_KEY, JSON.stringify({ value: 'granted', timestamp: Date.now() }));
     renderWithProviders(<ConsentBanner />);
-    fireEvent.click(screen.getByRole('button', { name: /reset cookie preferences/i }));
+    fireEvent.click(screen.getByRole('button', { name: /cookie preferences/i }));
     expect(screen.getByRole('region', { name: 'This site uses analytics cookies' })).toBeTruthy();
   });
 
   it('moves focus to Decline when the banner reappears after reset', () => {
     ls.setItem(CONSENT_STORAGE_KEY, JSON.stringify({ value: 'granted', timestamp: Date.now() }));
     renderWithProviders(<ConsentBanner />);
-    fireEvent.click(screen.getByRole('button', { name: /reset cookie preferences/i }));
+    fireEvent.click(screen.getByRole('button', { name: /cookie preferences/i }));
     expect(document.activeElement).toBe(screen.getByRole('button', { name: /decline/i }));
   });
 });