Skip to content

🎨 Palette: Improve Welcome Screen accessibility and scannability #319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
christopherfoxjr wants to merge 1 commit into
base: main
Choose a base branch
from
+48 −36
Open

🎨 Palette: Improve Welcome Screen accessibility and scannability #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,8 @@

**Learning:** Hero images in README files are often the first point of contact for users. Using generic alt text like "image" is an accessibility failure that creates a poor first impression. Descriptive alt text should accurately reflect the actual state of the UI (e.g., LXDE/Openbox) rather than remaining stagnant when the architecture shifts.
**Action:** Always audit hero images in primary documentation for descriptive, accurate `alt` attributes that align with the current system architecture.

## 2026-06-01 - [Accessible Design for Embedded Web Utilities]

**Learning:** Embedded HTML utilities like the KibaOS Welcome screen require explicit accessibility features to match the desktop's native standards. Adding a semantic `<main>` landmark, implementing `:focus-visible` for keyboard users, and providing `aria-label` for links that open in new tabs ensures that the "first-run" experience is inclusive for all users.
**Action:** When building or updating web-based system utilities, always include a `<main>` container, visible focus indicators, and descriptive ARIA labels for external links.
79 changes: 43 additions & 36 deletions build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1486,7 +1486,7 @@ cp -aT "${SKEL}/" /home/liveuser/
chown -R 1000:1000 /home/liveuser
chmod 750 /home/liveuser
ufw default deny incoming
ufw default allow outgoing
ufw default allow outgoing
ufw enable
systemctl enable ufw
# ══════════════════════════════════════════════════════════════════════════
Expand Down Expand Up @@ -1608,11 +1608,16 @@ cat > /usr/share/kibaos/welcome.html << 'WELCOMEHTML'
transition: background .12s;
}
.btn:hover { background:var(--accent-dark); }
.btn:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.btn.secondary {
background:var(--surface); color:var(--accent);
border:1.5px solid var(--border);
}
.btn.secondary:hover { background:#e6f6fc; }
.btn.secondary:focus-visible { outline-color: var(--border); }

.design-pills { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.pill {
Expand All @@ -1633,42 +1638,44 @@ cat > /usr/share/kibaos/welcome.html << 'WELCOMEHTML'
<p>A fast, polished Budgie desktop built on Arch Linux — by WolfTech Innovations</p>
</header>

<div class="card-row">
<div class="card">
<h2>Budgie 10.10 Wayland</h2>
<p>Fully Wayland-native. Powered by labwc for smooth, compositor-agnostic window management.</p>
</div>
<div class="card">
<h2>Built on Arch Linux</h2>
<p>Rolling release. Always the latest software, straight from upstream with full AUR access.</p>
</div>
<div class="card">
<h2>Unified Design</h2>
<p>Inspired by DDE's curves, Paper's flat surfaces, and Cutefish's airy, floating aesthetic.</p>
<main>
<div class="card-row">
<div class="card">
<h2>Budgie 10.10 Wayland</h2>
<p>Fully Wayland-native. Powered by labwc for smooth, compositor-agnostic window management.</p>
</div>
<div class="card">
<h2>Built on Arch Linux</h2>
<p>Rolling release. Always the latest software, straight from upstream with full AUR access.</p>
</div>
<div class="card">
<h2>Unified Design</h2>
<p>Inspired by DDE's curves, Paper's flat surfaces, and Cutefish's airy, floating aesthetic.</p>
</div>
<div class="card">
<h2>Private by Default</h2>
<p>Full disk encryption support. No telemetry. Your data stays yours.</p>
</div>
</div>
<div class="card">
<h2>Private by Default</h2>
<p>Full disk encryption support. No telemetry. Your data stays yours.</p>
</div>
</div>

<section>
<h2>Ready to Install?</h2>
<p>Click <strong>Install KibaOS</strong> on the desktop, or run:</p>
<div class="tip"><code>sudo calamares</code></div>
<br>
<a class="btn" href="https://github.com/WolfTech-Innovations/Kiba/blob/main/WIKI.md">Wiki</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba/issues">Report Issue</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba">GitHub</a>

<h2>Design Language</h2>
<p>KibaOS's visual identity draws from three reference desktops:</p>
<div class="design-pills">
<span class="pill">DDE — smooth rounded corners, cohesive icon language, dark navy base</span>
<span class="pill">Paper DE — flat material surfaces, colored accents, minimal depth shadows</span>
<span class="pill">Cutefish — floating dock, translucent panels, generous whitespace, airy cards</span>
</div>
</section>

<section>
<h2>Ready to Install?</h2>
<p>Click <strong>Install KibaOS</strong> on the desktop, or run:</p>
<div class="tip"><code>sudo calamares</code></div>
<br>
<a class="btn" href="https://github.com/WolfTech-Innovations/Kiba/blob/main/WIKI.md" target="_blank" rel="noopener noreferrer" aria-label="Visit KibaOS Wiki (opens in new tab)">📖 Wiki</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba/issues" target="_blank" rel="noopener noreferrer" aria-label="Report an Issue on GitHub (opens in new tab)">🐞 Report Issue</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba" target="_blank" rel="noopener noreferrer" aria-label="View Source on GitHub (opens in new tab)">💻 GitHub</a>

<h2>Design Language</h2>
<p>KibaOS's visual identity draws from three reference desktops:</p>
<div class="design-pills">
<span class="pill">DDE — smooth rounded corners, cohesive icon language, dark navy base</span>
<span class="pill">Paper DE — flat material surfaces, colored accents, minimal depth shadows</span>
<span class="pill">Cutefish — floating dock, translucent panels, generous whitespace, airy cards</span>
</div>
</section>
</main>

<footer>KibaOS Rolling — WolfTech Innovations — github.com/WolfTech-Innovations/Kiba</footer>
</body>
Expand Down