From 7d11f4f72a8facca71897128d7302c5c26d3c81d Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 2 Jun 2026 09:23:58 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Welcome=20S?= =?UTF-8?q?creen=20accessibility=20and=20scannability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR enhances the KibaOS Welcome Screen embedded in `build.sh` with the following micro-UX and accessibility improvements: - Added a semantic `
` landmark for better document structure and navigation. - Implemented `:focus-visible` styles for all buttons to provide clear visual feedback for keyboard users. - Added descriptive emojis (📖, 🐞, 💻) to primary action buttons to improve visual scannability. - Enhanced external links with `aria-label`, `target="_blank"`, and `rel="noopener noreferrer"` for better accessibility and security. - Cleaned up pre-existing trailing whitespace in `build.sh` to comply with repository hygiene standards. Co-authored-by: christopherfoxjr <213370400+christopherfoxjr@users.noreply.github.com> --- .Jules/palette.md | 5 +++ build.sh | 79 ++++++++++++++++++++++++++--------------------- 2 files changed, 48 insertions(+), 36 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 7688fa0..bfa6688 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -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 `
` 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 `
` container, visible focus indicators, and descriptive ARIA labels for external links. diff --git a/build.sh b/build.sh index 73f30e0..e1c4303 100644 --- a/build.sh +++ b/build.sh @@ -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 # ══════════════════════════════════════════════════════════════════════════ @@ -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 { @@ -1633,42 +1638,44 @@ cat > /usr/share/kibaos/welcome.html << 'WELCOMEHTML'

A fast, polished Budgie desktop built on Arch Linux — by WolfTech Innovations

-
-
-

Budgie 10.10 Wayland

-

Fully Wayland-native. Powered by labwc for smooth, compositor-agnostic window management.

-
-
-

Built on Arch Linux

-

Rolling release. Always the latest software, straight from upstream with full AUR access.

-
-
-

Unified Design

-

Inspired by DDE's curves, Paper's flat surfaces, and Cutefish's airy, floating aesthetic.

+
+
+
+

Budgie 10.10 Wayland

+

Fully Wayland-native. Powered by labwc for smooth, compositor-agnostic window management.

+
+
+

Built on Arch Linux

+

Rolling release. Always the latest software, straight from upstream with full AUR access.

+
+
+

Unified Design

+

Inspired by DDE's curves, Paper's flat surfaces, and Cutefish's airy, floating aesthetic.

+
+
+

Private by Default

+

Full disk encryption support. No telemetry. Your data stays yours.

+
-
-

Private by Default

-

Full disk encryption support. No telemetry. Your data stays yours.

-
-
- -
-

Ready to Install?

-

Click Install KibaOS on the desktop, or run:

-
sudo calamares
-
- Wiki - Report Issue - GitHub - -

Design Language

-

KibaOS's visual identity draws from three reference desktops:

-
- DDE — smooth rounded corners, cohesive icon language, dark navy base - Paper DE — flat material surfaces, colored accents, minimal depth shadows - Cutefish — floating dock, translucent panels, generous whitespace, airy cards -
-
+ +
+

Ready to Install?

+

Click Install KibaOS on the desktop, or run:

+
sudo calamares
+
+ 📖 Wiki + 🐞 Report Issue + 💻 GitHub + +

Design Language

+

KibaOS's visual identity draws from three reference desktops:

+
+ DDE — smooth rounded corners, cohesive icon language, dark navy base + Paper DE — flat material surfaces, colored accents, minimal depth shadows + Cutefish — floating dock, translucent panels, generous whitespace, airy cards +
+
+