From 0e9163b9ca4f735b0098654c78489994de429e41 Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Mon, 11 May 2026 16:34:32 +0200
Subject: [PATCH 1/3] Promote .app-view to the page-level <main> landmark

The shell's outer `#MainContent` wrapper was a <main>, but each pane
also rendered its own <main> (profile-pane, mainPage) or inherited one
from solid-ui's tab widget body. That produced multiple <main>
landmarks per page, which is invalid per HTML semantics and triggers
accessibility warnings.

Promote `.app-view` to <main id="MainContent"> so there is exactly one
page-level landmark, encompassing the outline view and global
dashboard but excluding the application sidebar nav and menu overlay.
The skip-link target `#MainContent` is preserved.

Paired with:
- SolidOS/solid-ui: demote tab-widget body from <main> to <div>
- SolidOS/profile-pane: drop inner <main> from ProfileView/EditProfileView

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/databrowser.html | 8 ++++----
 static/browse.html   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/databrowser.html b/src/databrowser.html
index 716cfd79..c80050ef 100644
--- a/src/databrowser.html
+++ b/src/databrowser.html
@@ -31,13 +31,13 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+    <div tabindex="-1" aria-live="polite">
       <div class="app-shell">
         <aside id="NavMenu" class="app-nav" aria-label="Application menu" hidden>
           <div id="NavMenuContent" class="menu-content"></div>
         </aside>
 
-        <div class="app-view">
+        <main id="MainContent" class="app-view">
           <!--
             Outline view: the primary RDF-subject browser.
             JS appends property-table <div>s (not <tr>s) here.
@@ -66,11 +66,11 @@
           >
           <!-- globalAppTabs appends tab widget here -->
           </section>
-        </div> <!-- .app-view -->
+        </main> <!-- .app-view -->
       </div> <!-- .app-shell -->
 
       <div id="MenuOverlay" class="menu-overlay" hidden aria-hidden="true"></div>
-    </main>
+    </div>
 
     <!-- Footer — populated by solid-ui initFooter() -->
     <footer id="PageFooter" role="contentinfo">
diff --git a/static/browse.html b/static/browse.html
index eaf4f292..a07ecb32 100644
--- a/static/browse.html
+++ b/static/browse.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"

From a9b848740af24757ec833444aac1769341e0167a Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Mon, 11 May 2026 17:02:50 +0200
Subject: [PATCH 2/3] fix the profile pane not showing

---
 src/styles/mash.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index 46f93ffe..e0d18349 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -41,11 +41,11 @@ html, body {
 
 #MainContent {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
-  display: flex;
 }
 
 #PageFooter {

From ac00ff4c974071d15fa05aa4c27fa6325efe65b1 Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Mon, 11 May 2026 17:08:58 +0200
Subject: [PATCH 3/3] Fix #MainContent CSS after moving the id to .app-view

When the id `MainContent` was moved from the outer wrapper to
`.app-view`, the existing rule `#MainContent { display: flex }`
started applying to the new element, whose children are
`#OutlineView` and `#GlobalDashboard`. Both became row-direction
flex items and `#GlobalDashboard` collapsed to ~36px wide, so
clicking sidebar items ("Your profile" etc.) rendered the pane
content into an invisible column.

Remove `display: flex` from the `#MainContent` rule (the outer
wrapper was the only thing that needed to be a flex container),
add `min-width: 0` so it still cooperates as a flex child of
`.app-shell`, and update the stale `.app-view` comment.

Also strip the redundant `role="main"` from
`static/browse-test.html` to match `browse.html`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles/mash.css     | 2 +-
 static/browse-test.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index e0d18349..39b8ca0e 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -56,7 +56,7 @@ html, body {
 /* ── New responsive app nav layout ── */
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill #MainContent (display:flex row container) */
+  flex: 1;          /* expand to fill .app-shell row */
   min-width: 0;     /* prevent overflow in flex context */
   min-height: calc(100vh - var(--app-header-height) - 2.5rem); /* header + footer space */
   margin-top: var(--app-header-height);
diff --git a/static/browse-test.html b/static/browse-test.html
index c5559972..d45cd98d 100644
--- a/static/browse-test.html
+++ b/static/browse-test.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"