Skip to content

Post milestone3m#395

Merged
bourgeoa merged 35 commits into
mainfrom
post-milestone3m
May 27, 2026
Merged

Post milestone3m#395
bourgeoa merged 35 commits into
mainfrom
post-milestone3m

Conversation

@timea-solid
Copy link
Copy Markdown
Member

No description provided.

SharonStrats and others added 18 commits May 2, 2026 19:43
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>
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>
Copilot AI review requested due to automatic review settings May 14, 2026 12:37
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the databrowser/static browse layout semantics and expands styling theme tokens for newer UI components.

Changes:

  • Removes redundant role="main" from some <main> elements and restructures src/databrowser.html.
  • Adds and adjusts light/dark theme CSS variables for buttons, dialogs, text, borders, and focus styles.
  • Tweaks app-shell/main layout styles and utility input/label colors.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
static/browse.html Removes explicit role="main" from the browse main landmark.
static/browse-test.html Mirrors the browse page landmark update.
src/styles/themes/light.css Adds new light-theme design tokens and adjusts status/border colors.
src/styles/themes/dark.css Adds dark-theme token counterparts and updates dark color values.
src/styles/mash.css Adjusts main/app-shell flex behavior and removes legacy pane CSS blocks.
src/styles/mash-utilities.css Switches input and label text colors to theme variables.
src/databrowser.html Moves the main landmark inside the app shell and wraps live-region behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/databrowser.html
</aside>

<div class="app-view">
<main id="MainContent" class="app-view">
Copy link
Copy Markdown
Member Author

@timea-solid timea-solid May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@m5x5 what is your opinion on this?
Remark that now skip-link is not active in the code.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think we should follow the suggestion. But we also should ensure that there will be no outline when main is focused as it is uncommon in my opinion.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot make a dedicated ticket out of this.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn’t find an existing mashlib issue for this. I can’t open a new issue from here, but this is the issue-ready summary to file separately:

Title: Databrowser skip link target is not programmatically focusable

Summary: In src/databrowser.html, the skip link still targets #MainContent, but the focusable tabindex="-1" is on the .app-main wrapper instead of #MainContent. If/when the skip link is re-enabled, activating it may not move keyboard focus to the intended main-content target.

Follow-up options: either restore tabindex="-1" on #MainContent or retarget the skip link to the focusable wrapper.

Comment thread src/styles/mash-utilities.css
Comment thread src/styles/themes/dark.css
Comment thread src/styles/mash.css
Comment thread src/styles/themes/dark.css
Comment thread src/styles/themes/light.css Outdated
Comment thread src/styles/mash.css Outdated
@bourgeoa bourgeoa enabled auto-merge May 27, 2026 13:28
@bourgeoa bourgeoa merged commit a174571 into main May 27, 2026
7 checks passed
@github-project-automation github-project-automation Bot moved this from Ready to Done in SolidOS NLNet UI May 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Milestone 3m: Implement new style for profile & profile editor

6 participants