From 0c334731b26863bb75f8878e3e2da8c063d285c1 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Tue, 24 Mar 2026 14:12:49 +0100
Subject: [PATCH] fix: add P0 accessibility fixes to sidebar icon bar and
 search form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add :focus-visible outline to icon bar buttons/links (desktop + mobile)
- Add aria-label to icon bar <nav> for screen reader landmark distinction
- Add role="search" to sidebar search form
- Add "Main menu" / "Hauptmenü" translation key

Workflow: A11Y-SIDEBAR-P0-001

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 i18n/default_de.json                             |  1 +
 i18n/default_en.json                             |  1 +
 templates/partials/app-main-aside-icon-bar.phtml |  2 +-
 templates/partials/app-main-aside.phtml          |  2 +-
 web/css/layout/app-aside-icon-bar.css            | 14 ++++++++++++++
 5 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/i18n/default_de.json b/i18n/default_de.json
index 0aa9a29..d0e636f 100644
--- a/i18n/default_de.json
+++ b/i18n/default_de.json
@@ -226,6 +226,7 @@
   "Dark": "Dunkel",
   "Dark green": "Dunkelgrün",
   "Toggle theme": "Theme umschalten",
+  "Main menu": "Hauptmenü",
   "Toggle Sidebar": "Sidebar umschalten",
   "Toggle Detail Sidebar": "Detail-Seitenleiste umschalten",
   "2FA Settings": "2FA Einstellungen",
diff --git a/i18n/default_en.json b/i18n/default_en.json
index ce9294c..e73e3ca 100644
--- a/i18n/default_en.json
+++ b/i18n/default_en.json
@@ -226,6 +226,7 @@
   "Dark": "Dark",
   "Dark green": "Dark green",
   "Toggle theme": "Toggle theme",
+  "Main menu": "Main menu",
   "Toggle Sidebar": "Toggle Sidebar",
   "Toggle Detail Sidebar": "Toggle Detail Sidebar",
   "2FA Settings": "2FA Settings",
diff --git a/templates/partials/app-main-aside-icon-bar.phtml b/templates/partials/app-main-aside-icon-bar.phtml
index b068a61..5309605 100644
--- a/templates/partials/app-main-aside-icon-bar.phtml
+++ b/templates/partials/app-main-aside-icon-bar.phtml
@@ -6,7 +6,7 @@ $layoutAuth = is_array($viewAuth['layout'] ?? null) ? $viewAuth['layout'] : [];
 $hasAdminPanel = layoutHasAdminPanel($layoutAuth);
 ?>
 <aside class="aside-icon-bar" data-app-component="aside-panels" data-aside-storage="app-sidebar-panel">
-    <nav>
+    <nav aria-label="<?php e(t('Main menu')); ?>">
         <ul class="aside-icon-group" role="tablist" aria-orientation="vertical">
             <li>
                 <button type="button" id="aside-tab-explorer" data-aside-target="explorer" role="tab"
diff --git a/templates/partials/app-main-aside.phtml b/templates/partials/app-main-aside.phtml
index fac6053..3d1a2d7 100644
--- a/templates/partials/app-main-aside.phtml
+++ b/templates/partials/app-main-aside.phtml
@@ -343,7 +343,7 @@ $moduleSearchSlots = is_array($moduleSlots['search.resource_item'] ?? null) ? $m
 
         <div id="aside-panel-search" class="app-sidebar-panel" data-app-component="global-search" data-aside-panel="search"
             data-aside-title="<?php e(t('Search')); ?>" role="tabpanel" aria-labelledby="aside-tab-search" hidden>
-            <form class="app-search">
+            <form class="app-search" role="search">
                 <input type="search" name="side-search" id="side-search" placeholder="<?php e(t('Search...')); ?>"
                     aria-label="<?php e(t('Search')); ?>">
                 <span class="app-search-shortcut" data-search-shortcut aria-hidden="true"></span>
diff --git a/web/css/layout/app-aside-icon-bar.css b/web/css/layout/app-aside-icon-bar.css
index 8a0e13d..f942cf9 100644
--- a/web/css/layout/app-aside-icon-bar.css
+++ b/web/css/layout/app-aside-icon-bar.css
@@ -53,6 +53,14 @@ aside.aside-icon-bar li button.active {
   background: var(--app-icon-bar-hover-bg);
 }
 
+aside.aside-icon-bar li a:focus-visible,
+aside.aside-icon-bar li button:focus-visible {
+  outline: 2px solid var(--app-primary-focus);
+  outline-offset: -2px;
+  border-left-color: transparent;
+  color: var(--app-contrast);
+}
+
 @media (min-width: 768px) {
   aside.aside-icon-bar {
     border-right: var(--app-icon-bar-border);
@@ -106,6 +114,12 @@ aside.aside-icon-bar li button.active {
     border-top: var(--app-icon-bar-border-width) solid var(--app-primary);
   }
 
+  aside.aside-icon-bar li a:focus-visible,
+  aside.aside-icon-bar li button:focus-visible {
+    border-left-color: transparent;
+    border-top-color: transparent;
+  }
+
   .app-main-content,
   footer.site-footer {
     padding-bottom: max(