feat(ui/a11y): address review comments on PR #74 for accessibility improvements

This commit is contained in:
2026-06-06 09:58:02 +02:00
parent e8c99f9cdc
commit 3c935e2c72
2 changed files with 15 additions and 10 deletions
@@ -6,9 +6,9 @@
@if (!_isFullyLoaded) @if (!_isFullyLoaded)
{ {
<div class="app-preloader" style="backdrop-filter: blur(15px); background: rgba(18, 18, 18, 0.95); z-index: 100000;"> <div class="app-preloader" style="backdrop-filter: blur(15px); background: rgba(18, 18, 18, 0.95); z-index: 100000; color: #ffffff;">
<div class="preloader-spinner"></div> <div class="preloader-spinner"></div>
<div class="preloader-text">Synchronizing Secure Session...</div> <div class="preloader-text" style="color: #ffffff;">Synchronizing Secure Session...</div>
</div> </div>
} }
@@ -46,49 +46,49 @@
</div> </div>
<nav class="sidebar-nav"> <nav class="sidebar-nav">
<NavLink class="nav-item" href="/dashboard" Match="NavLinkMatch.All" @onclick="CloseMobileMenu" title="Pulpit"> <NavLink class="nav-item" href="/dashboard" Match="NavLinkMatch.All" @onclick="CloseMobileMenu" title="Pulpit" aria-label="Pulpit">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="home" Size="20" /> <NexusIcon Name="home" Size="20" />
</div> </div>
<span class="nav-text">Pulpit</span> <span class="nav-text">Pulpit</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/catalog" @onclick="CloseMobileMenu" title="Katalog"> <NavLink class="nav-item" href="/catalog" @onclick="CloseMobileMenu" title="Katalog" aria-label="Katalog">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="layout" Size="20" /> <NexusIcon Name="layout" Size="20" />
</div> </div>
<span class="nav-text">Katalog</span> <span class="nav-text">Katalog</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/my-books" @onclick="CloseMobileMenu" title="Moje"> <NavLink class="nav-item" href="/my-books" @onclick="CloseMobileMenu" title="Moje" aria-label="Moje">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="book-open" Size="20" /> <NexusIcon Name="book-open" Size="20" />
</div> </div>
<span class="nav-text">Moje</span> <span class="nav-text">Moje</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu" title="Konto"> <NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu" title="Konto" aria-label="Konto">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="user" Size="20" /> <NexusIcon Name="user" Size="20" />
</div> </div>
<span class="nav-text">Konto</span> <span class="nav-text">Konto</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu" title="Mapa Pojęć"> <NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu" title="Mapa Pojęć" aria-label="Mapa Pojęć">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="map" Size="20" /> <NexusIcon Name="map" Size="20" />
</div> </div>
<span class="nav-text">Mapa Pojęć</span> <span class="nav-text">Mapa Pojęć</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu" title="Globalne AI"> <NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu" title="Globalne AI" aria-label="Globalne AI">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="robot" Size="20" /> <NexusIcon Name="robot" Size="20" />
</div> </div>
<span class="nav-text">Globalne AI</span> <span class="nav-text">Globalne AI</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu" title="Ustawienia"> <NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu" title="Ustawienia" aria-label="Ustawienia">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="settings" Size="20" /> <NexusIcon Name="settings" Size="20" />
</div> </div>
<span class="nav-text">Ustawienia</span> <span class="nav-text">Ustawienia</span>
</NavLink> </NavLink>
<NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu" title="Koncentry"> <NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu" title="Koncentry" aria-label="Koncentry">
<div class="nav-icon"> <div class="nav-icon">
<NexusIcon Name="target" Size="20" /> <NexusIcon Name="target" Size="20" />
</div> </div>
@@ -66,6 +66,11 @@
background: rgba(255, 255, 255, 0.01); background: rgba(255, 255, 255, 0.01);
} }
::deep .nav-item:focus-visible {
outline: 2px solid #10b981;
outline-offset: -2px;
}
::deep .nav-item.active { ::deep .nav-item.active {
color: #10b981; color: #10b981;
background: rgba(16, 185, 129, 0.04); background: rgba(16, 185, 129, 0.04);