From 3c935e2c728fac6617714edd1e2c9522d36f3c03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= <jasins.marek@gmail.com>
Date: Sat, 6 Jun 2026 09:58:02 +0200
Subject: [PATCH] feat(ui/a11y): address review comments on PR #74 for
 accessibility improvements

---
 .../Layout/MainHubLayout.razor                | 20 +++++++++----------
 .../Layout/MainHubLayout.razor.css            |  5 +++++
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
index f7e6bc1..46b1de1 100644
--- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
+++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
@@ -6,9 +6,9 @@
 
 @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-text">Synchronizing Secure Session...</div>
+        <div class="preloader-text" style="color: #ffffff;">Synchronizing Secure Session...</div>
     </div>
 }
 
@@ -46,49 +46,49 @@
                 </div>
                 
                 <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">
                             <NexusIcon Name="home" Size="20" />
                         </div>
                         <span class="nav-text">Pulpit</span>
                     </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">
                             <NexusIcon Name="layout" Size="20" />
                         </div>
                         <span class="nav-text">Katalog</span>
                     </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">
                             <NexusIcon Name="book-open" Size="20" />
                         </div>
                         <span class="nav-text">Moje</span>
                     </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">
                             <NexusIcon Name="user" Size="20" />
                         </div>
                         <span class="nav-text">Konto</span>
                     </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">
                             <NexusIcon Name="map" Size="20" />
                         </div>
                         <span class="nav-text">Mapa Pojęć</span>
                     </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">
                             <NexusIcon Name="robot" Size="20" />
                         </div>
                         <span class="nav-text">Globalne AI</span>
                     </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">
                             <NexusIcon Name="settings" Size="20" />
                         </div>
                         <span class="nav-text">Ustawienia</span>
                     </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">
                             <NexusIcon Name="target" Size="20" />
                         </div>
diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
index 156d3b9..3fcda6e 100644
--- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
+++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
@@ -66,6 +66,11 @@
     background: rgba(255, 255, 255, 0.01);
 }
 
+::deep .nav-item:focus-visible {
+    outline: 2px solid #10b981;
+    outline-offset: -2px;
+}
+
 ::deep .nav-item.active {
     color: #10b981;
     background: rgba(16, 185, 129, 0.04);