From 71b94ef2ef463a25aa2bc913bed46a38cb68e52d Mon Sep 17 00:00:00 2001
From: 0thernet <ben@substrate.run>
Date: Fri, 21 Aug 2026 13:24:27 -0400
Subject: [PATCH] Fix appearance menu navigation landmarks

---
 app/blog/blog.test.tsx | 22 ++++++++++++++++++++--
 app/blog/layout.tsx    | 12 +++++++-----
 app/data/data.test.tsx | 22 ++++++++++++++++++++--
 app/data/layout.tsx    | 12 +++++++-----
 styles/plain-site.css  |  1 +
 5 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/app/blog/blog.test.tsx b/app/blog/blog.test.tsx
index 7282983..4e8cfac 100644
--- a/app/blog/blog.test.tsx
+++ b/app/blog/blog.test.tsx
@@ -51,9 +51,27 @@ describe("AI Charts benchmark notes", () => {
     expect(markup).toContain('href="/blog"');
     expect(markup).toContain('href="/"');
     expect(markup.match(/data-presentation="menu"/gu)).toHaveLength(1);
-    expect(markup.indexOf('>Chart</a>')).toBeLessThan(
-      markup.indexOf('data-presentation="menu"'),
+    const headerStart = markup.indexOf('<header class="plain-header">');
+    const headerEnd = markup.indexOf("</header>", headerStart);
+    const actionsStart = markup.indexOf(
+      'class="plain-header__actions"',
+      headerStart,
     );
+    const navigationStart = markup.indexOf(
+      'aria-label="Blog navigation"',
+      actionsStart,
+    );
+    const navigationEnd = markup.indexOf("</nav>", navigationStart);
+    const appearance = markup.indexOf('data-presentation="menu"', actionsStart);
+    expect(headerStart).toBeGreaterThan(-1);
+    expect(actionsStart).toBeGreaterThan(headerStart);
+    expect(navigationStart).toBeGreaterThan(actionsStart);
+    expect(navigationEnd).toBeGreaterThan(navigationStart);
+    expect(appearance).toBeGreaterThan(navigationEnd);
+    expect(appearance).toBeLessThan(headerEnd);
+    expect(markup.slice(navigationStart, navigationEnd))
+      .not.toContain("hraness-design-theme-toggle");
+    expect(markup.slice(appearance, headerEnd)).not.toContain("<a ");
     expect(markup).toContain('class="plain-footer"');
     expect(markup.slice(markup.indexOf('<footer class="plain-footer"')))
       .not.toContain("hraness-design-theme-toggle");
diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
index 82f84f2..b628c86 100644
--- a/app/blog/layout.tsx
+++ b/app/blog/layout.tsx
@@ -13,12 +13,14 @@ export default function BlogLayout({
           <Link className="plain-wordmark" href="/">
             aicharts.io
           </Link>
-          <nav aria-label="Blog navigation" className="plain-nav">
-            <Link href="/blog">Blog</Link>
-            <Link href="/data">Data</Link>
-            <Link href="/">Chart</Link>
+          <div className="plain-header__actions">
+            <nav aria-label="Blog navigation" className="plain-nav">
+              <Link href="/blog">Blog</Link>
+              <Link href="/data">Data</Link>
+              <Link href="/">Chart</Link>
+            </nav>
             <ThemeMenuButton aria-label="Blog appearance" />
-          </nav>
+          </div>
         </div>
       </header>
       {children}
diff --git a/app/data/data.test.tsx b/app/data/data.test.tsx
index e2713a2..2c32403 100644
--- a/app/data/data.test.tsx
+++ b/app/data/data.test.tsx
@@ -60,9 +60,27 @@ describe("coding-agent dataset surface", () => {
     expect(markup).toContain('href="/blog"');
     expect(markup).toContain('href="/"');
     expect(markup.match(/data-presentation="menu"/gu)).toHaveLength(1);
-    expect(markup.indexOf('>Chart</a>')).toBeLessThan(
-      markup.indexOf('data-presentation="menu"'),
+    const headerStart = markup.indexOf('<header class="plain-header">');
+    const headerEnd = markup.indexOf("</header>", headerStart);
+    const actionsStart = markup.indexOf(
+      'class="plain-header__actions"',
+      headerStart,
     );
+    const navigationStart = markup.indexOf(
+      'aria-label="Dataset navigation"',
+      actionsStart,
+    );
+    const navigationEnd = markup.indexOf("</nav>", navigationStart);
+    const appearance = markup.indexOf('data-presentation="menu"', actionsStart);
+    expect(headerStart).toBeGreaterThan(-1);
+    expect(actionsStart).toBeGreaterThan(headerStart);
+    expect(navigationStart).toBeGreaterThan(actionsStart);
+    expect(navigationEnd).toBeGreaterThan(navigationStart);
+    expect(appearance).toBeGreaterThan(navigationEnd);
+    expect(appearance).toBeLessThan(headerEnd);
+    expect(markup.slice(navigationStart, navigationEnd))
+      .not.toContain("hraness-design-theme-toggle");
+    expect(markup.slice(appearance, headerEnd)).not.toContain("<a ");
     expect(markup).toContain('class="plain-footer"');
     expect(markup.slice(markup.indexOf('<footer class="plain-footer"')))
       .not.toContain("hraness-design-theme-toggle");
diff --git a/app/data/layout.tsx b/app/data/layout.tsx
index 80b9b83..8ea903b 100644
--- a/app/data/layout.tsx
+++ b/app/data/layout.tsx
@@ -13,12 +13,14 @@ export default function DataLayout({
           <Link className="plain-wordmark" href="/">
             aicharts.io
           </Link>
-          <nav aria-label="Dataset navigation" className="plain-nav">
-            <Link aria-current="page" href="/data">Data</Link>
-            <Link href="/blog">Blog</Link>
-            <Link href="/">Chart</Link>
+          <div className="plain-header__actions">
+            <nav aria-label="Dataset navigation" className="plain-nav">
+              <Link aria-current="page" href="/data">Data</Link>
+              <Link href="/blog">Blog</Link>
+              <Link href="/">Chart</Link>
+            </nav>
             <ThemeMenuButton aria-label="Dataset appearance" />
-          </nav>
+          </div>
         </div>
       </header>
       {children}
diff --git a/styles/plain-site.css b/styles/plain-site.css
index c78c711..8bc267a 100644
--- a/styles/plain-site.css
+++ b/styles/plain-site.css
@@ -180,6 +180,7 @@ body.plain-site > main {
   text-transform: none;
 }
 
+.plain-header__actions,
 .plain-nav,
 .plain-footer__links {
   align-items: center;