New style #257

timea-solid · 2025-12-09T16:09:11Z

This PR will integrate HTML5 and basic accessibility elements.
We start with the profile-pane

… global CSS variables

Copilot

Pull request overview

This PR modernizes the SolidOS databrowser with HTML5 semantic elements and comprehensive accessibility improvements. The changes include refactoring HTML structure, introducing a theme system with CSS custom properties, creating reusable utility classes, and updating dependencies.

Changes:

Adds semantic HTML5 elements (header, main, footer) and ARIA attributes for improved accessibility
Introduces a theme system with light/dark modes using CSS custom properties
Creates comprehensive utility CSS classes for accessibility, layout, and components
Removes inline styles in favor of CSS classes and removes deprecated TypeScript style module

Reviewed changes

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

Show a summary per file

File	Description
static/browse.html	Adds semantic HTML structure, skip links, table headers, and ARIA labels
static/browse-test.html	Same semantic HTML improvements as browse.html with adjusted JavaScript
src/styles/themes/light.css	Defines CSS custom properties for light theme color scheme
src/styles/themes/dark.css	Defines CSS custom properties for dark theme color scheme
src/styles/themes.css	Imports theme files with dark theme commented out
src/styles/mash.css	Refactors styles to use CSS custom properties and improved formatting
src/styles/mash-utilities.css	New file with comprehensive accessibility and utility classes
src/styles/mashlib-style.ts	Removed - replaced by CSS-only approach
src/index.ts	Adds theme management functions and removes style module usage
src/databrowser.html	Updates with semantic HTML and accessibility features
package.json	Updates dependency versions including pre-release versions
package-lock.json	Lock file updates reflecting dependency changes

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

Copilot · 2026-01-21T09:42:29Z

static/browse-test.html

 </script>
 </head>
 <body>
+  <a href="#DummyUUID" class="skip-link">Skip to main content</a>


The skip link target points to #DummyUUID, but according to the HTML structure, this element has role="main" while there's also a <main> element with id="mainContent". The skip link should target the <main> element (#mainContent) instead of the nested div, as the main landmark should be at the outermost semantic level.

Copilot · 2026-01-21T09:42:30Z

src/databrowser.html

  </head>
-  <body id="PageBody">
+    <body id="PageBody">
+      <a href="#DummyUUID" class="skip-link" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;">Skip to main content</a>


Inline styles in HTML - the skip link has inline styles that duplicate the CSS defined in the <style> block below (lines 153-172). This inline style should be removed and the .skip-link class should be sufficient for styling.

Suggested change

<a href="#DummyUUID" class="skip-link" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;">Skip to main content</a>

<a href="#DummyUUID" class="skip-link">Skip to main content</a>

Copilot · 2026-01-21T09:42:30Z

src/databrowser.html

  </head>
-  <body id="PageBody">
+    <body id="PageBody">
+      <a href="#DummyUUID" class="skip-link" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;">Skip to main content</a>


The skip link target points to #DummyUUID, but according to the HTML structure, this element has role="main" while there's also a <main> element with id="mainContent". The skip link should target the <main> element (#mainContent) instead of the nested div, as the main landmark should be at the outermost semantic level.

Copilot · 2026-01-21T09:42:30Z

src/databrowser.html

-    <footer id="PageFooter"></footer>
+    <header id="PageHeader" role="banner"></header>
+    <main id="mainContent" tabindex="-1">
+      <div class="TabulatorOutline" id="DummyUUID" role="main">


Redundant ARIA role - the div with id="DummyUUID" has role="main" but is already contained within a <main> element. This creates a nested main landmark which is confusing for screen readers. Remove the role="main" attribute from this div since the parent <main> element already provides the main landmark.

Suggested change

<div class="TabulatorOutline" id="DummyUUID" role="main">

<div class="TabulatorOutline" id="DummyUUID">

Copilot · 2026-01-21T09:42:30Z

package.json

+    "solid-logic": "^4.0.1",
+    "solid-panes": "4.0.0-newStyle-b960ffb7",
+    "solid-ui": "^3.0.1",
+    "profile-pane": "2.0.0-newStyle-6806a782"


Using a pre-release version identifier with a git commit hash (2.0.0-newStyle-6806a782) is unconventional and may cause issues with semantic versioning tools and dependency resolution. Consider using standard pre-release identifiers like 2.0.0-alpha.1 or 2.0.0-beta.1 instead.

Suggested change

"profile-pane": "2.0.0-newStyle-6806a782"

"profile-pane": "2.0.0-newStyle+6806a782"

Copilot · 2026-01-21T09:42:31Z

static/browse.html

-      </div>
-    </tr>
-  </table>
+    <div class="TabulatorOutline" id="DummyUUID" role="main">


Redundant ARIA role - the div with id="DummyUUID" has role="main" but is already contained within a <main> element. This creates a nested main landmark which is confusing for screen readers. Remove the role="main" attribute from this div since the parent <main> element already provides the main landmark.

Suggested change

<div class="TabulatorOutline" id="DummyUUID" role="main">

<div class="TabulatorOutline" id="DummyUUID">

Copilot · 2026-01-21T09:42:31Z

static/browse-test.html

-      </div>
-    </tr>
-  </table>
+    <div class="TabulatorOutline" id="DummyUUID" role="main">


Redundant ARIA role - the div with id="DummyUUID" has role="main" but is already contained within a <main> element. This creates a nested main landmark which is confusing for screen readers. Remove the role="main" attribute from this div since the parent <main> element already provides the main landmark.

Suggested change

<div class="TabulatorOutline" id="DummyUUID" role="main">

<div class="TabulatorOutline" id="DummyUUID">

Copilot · 2026-01-21T09:42:32Z

package.json

+    "solid-panes": "4.0.0-newStyle-b960ffb7",
+    "solid-ui": "^3.0.1"
+  },
+  "overrides": {
+    "rdflib": "^2.3.3",
+    "solid-logic": "^4.0.1",
+    "solid-panes": "4.0.0-newStyle-b960ffb7",
+    "solid-ui": "^3.0.1",
+    "profile-pane": "2.0.0-newStyle-6806a782"


Using a pre-release version identifier with a git commit hash (4.0.0-newStyle-b960ffb7) is unconventional and may cause issues with semantic versioning tools and dependency resolution. Consider using standard pre-release identifiers like 4.0.0-alpha.1 or 4.0.0-beta.1 instead.

Suggested change

"solid-panes": "4.0.0-newStyle-b960ffb7",

"solid-ui": "^3.0.1"

},

"overrides": {

"rdflib": "^2.3.3",

"solid-logic": "^4.0.1",

"solid-panes": "4.0.0-newStyle-b960ffb7",

"solid-ui": "^3.0.1",

"profile-pane": "2.0.0-newStyle-6806a782"

"solid-panes": "4.0.0-beta.1",

"solid-ui": "^3.0.1"

},

"overrides": {

"rdflib": "^2.3.3",

"solid-logic": "^4.0.1",

"solid-panes": "4.0.0-beta.1",

"solid-ui": "^3.0.1",

"profile-pane": "2.0.0-beta.1"

Copilot · 2026-01-21T09:42:32Z

static/browse.html

 </script>
 </head>
 <body>
+  <a href="#DummyUUID" class="skip-link">Skip to main content</a>


The skip link target points to #DummyUUID, but according to the HTML structure, this element has role="main" while there's also a <main> element with id="mainContent". The skip link should target the <main> element (#mainContent) instead of the nested div, as the main landmark should be at the outermost semantic level.

Copilot · 2026-01-21T09:42:32Z

static/browse-test.html

    const loginButtonArea = document.getElementById("loginButtonArea");
    const webIdArea = dom.getElementById('webId')
-    const banner = dom.getElementById('inputArea')
+    const inputArea = dom.getElementById('inputArea')


Unused variable inputArea.

Suggested change

const inputArea = dom.getElementById('inputArea')

timea-solid added 4 commits November 20, 2025 11:30

mashlib using branch newStyle

e25ea0f

use overrides to fix version issues

f3051e6

update solid-panes

4ca28e8

new porfile pane

2c8ef35

timea-solid mentioned this pull request Dec 9, 2025

M2d Prepare code for new design & add accessibility SolidOS/solidos#225

Open

timea-solid added 5 commits January 12, 2026 13:05

merge main, fix vuln

75ea8e4

updated dep

f1d46b3

WCAG compliant

dfcec15

updated dep, added light and dark theme for future use only, improved…

b8ce7ba

… global CSS variables

fixed css

2b964d3

timea-solid requested a review from Copilot January 21, 2026 09:38

Copilot started reviewing on behalf of timea-solid January 21, 2026 09:39 View session

Copilot AI reviewed Jan 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

New style #257

New style #257

timea-solid commented Dec 9, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<a href="#DummyUUID" class="skip-link" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;">Skip to main content</a>
	<a href="#DummyUUID" class="skip-link">Skip to main content</a>

	<div class="TabulatorOutline" id="DummyUUID" role="main">
	<div class="TabulatorOutline" id="DummyUUID">

	"profile-pane": "2.0.0-newStyle-6806a782"
	"profile-pane": "2.0.0-newStyle+6806a782"

New style #257

Are you sure you want to change the base?

New style #257

Conversation

timea-solid commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

timea-solid commented Dec 9, 2025 •

edited

Loading