feat(ui): integrate KoliBri (Public UI) accessible web components - #1
Draft
deleonio wants to merge 1 commit into
Draft
feat(ui): integrate KoliBri (Public UI) accessible web components#1deleonio wants to merge 1 commit into
deleonio wants to merge 1 commit into
Conversation
Establish the foundation for improving accessibility across the landscape UI by adopting KoliBri (@public-ui) web components via the official SolidJS adapter, and ship a first accessibility win. Infrastructure (all packages): - Add @public-ui/components, @public-ui/solid, @public-ui/theme-default and the adopted-style-sheets peer dependency to webapp, common, embed and embed-item. - Add a shared registerKolibri() helper in common that registers the components and the default theme once per bootstrap. - Call registerKolibri() before render() in the webapp, embed and embed-item entry points so every <kol-*> element is upgraded on first paint. - Stub @public-ui/* in the webapp Jest config so jsdom tests do not load the real web components. Accessibility: - Add a skip-to-content link (kol-skip-nav) to the main layout and mark the main content region with id="main" / tabindex=-1, so keyboard and assistive technology users can bypass the navigation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014F6qLzHChZwf1CTtL5mDRn
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ziel
Barrierefreiheit der Landscape mit den KoliBri (Public UI) Web Components verbessern und dabei schrittweise möglichst viele
kol-*-Komponenten einsetzen. Dieser PR legt die Grundlage (Phase 0) über alle vier UI-Pakete und liefert eine erste konkrete a11y-Verbesserung.Änderungen
Infrastruktur (webapp, common, embed, embed-item)
@public-ui/components,@public-ui/solid,@public-ui/theme-default+ Peer-Dependencyadopted-style-sheetsergänztregisterKolibri()incommon, der die Komponenten + Default-Theme einmalig registriert (ui/common/src/utils/registerKolibri.ts)registerKolibri()wird vorrender()in allen drei SPA-Einstiegspunkten aufgerufen (webapp/embed/embed-item), damit jedes<kol-*>-Element beim ersten Paint vorhanden ist@public-ui/*, damit jsdom-Tests keine echten Web Components ladenBarrierefreiheit
kol-skip-nav) im Haupt-Layout, plusid="main"/tabindex=-1auf dem Inhaltsbereich → Tastatur- und Screenreader-Nutzer können die Navigation überspringen (war bisher nicht vorhanden)Architektur-Hinweise
@public-ui/solid(typisierte Komponenten statt roher Custom Elements)_on={{ onClick }}statt nativemonClickVerifikation
format:diff)--max-warnings 0)tscmeldete ausschließlich zwei vorbestehende Fehler (fehlende WASM-Modulewasm/quizundwasm/overlay, die erst die Rust-/wasm-pack-Pipeline erzeugt) — der KoliBri-Code selbst ist typkorrekt.Roadmap (Folge-Commits in diesem PR / weitere PRs)
Phasenweiser Ausbau der Breite:
kol-button(Buttons),kol-badge(Maturity-/Foundation-Badges),kol-nav(Header-Navigation),kol-pagination,kol-tabs, Formulare (kol-input-*,kol-select/combobox),kol-drawer, sowiekol-dialog/kol-table-*/kol-card(inkl. Fix des aktuellen „div-as-button"-Problems der Explore-Cards).🤖 Generated with Claude Code
https://claude.ai/code/session_014F6qLzHChZwf1CTtL5mDRn
Generated by Claude Code