fix: add P0 accessibility fixes to sidebar icon bar and search form
- 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>
This commit is contained in:
@@ -226,6 +226,7 @@
|
|||||||
"Dark": "Dunkel",
|
"Dark": "Dunkel",
|
||||||
"Dark green": "Dunkelgrün",
|
"Dark green": "Dunkelgrün",
|
||||||
"Toggle theme": "Theme umschalten",
|
"Toggle theme": "Theme umschalten",
|
||||||
|
"Main menu": "Hauptmenü",
|
||||||
"Toggle Sidebar": "Sidebar umschalten",
|
"Toggle Sidebar": "Sidebar umschalten",
|
||||||
"Toggle Detail Sidebar": "Detail-Seitenleiste umschalten",
|
"Toggle Detail Sidebar": "Detail-Seitenleiste umschalten",
|
||||||
"2FA Settings": "2FA Einstellungen",
|
"2FA Settings": "2FA Einstellungen",
|
||||||
|
|||||||
@@ -226,6 +226,7 @@
|
|||||||
"Dark": "Dark",
|
"Dark": "Dark",
|
||||||
"Dark green": "Dark green",
|
"Dark green": "Dark green",
|
||||||
"Toggle theme": "Toggle theme",
|
"Toggle theme": "Toggle theme",
|
||||||
|
"Main menu": "Main menu",
|
||||||
"Toggle Sidebar": "Toggle Sidebar",
|
"Toggle Sidebar": "Toggle Sidebar",
|
||||||
"Toggle Detail Sidebar": "Toggle Detail Sidebar",
|
"Toggle Detail Sidebar": "Toggle Detail Sidebar",
|
||||||
"2FA Settings": "2FA Settings",
|
"2FA Settings": "2FA Settings",
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ $layoutAuth = is_array($viewAuth['layout'] ?? null) ? $viewAuth['layout'] : [];
|
|||||||
$hasAdminPanel = layoutHasAdminPanel($layoutAuth);
|
$hasAdminPanel = layoutHasAdminPanel($layoutAuth);
|
||||||
?>
|
?>
|
||||||
<aside class="aside-icon-bar" data-app-component="aside-panels" data-aside-storage="app-sidebar-panel">
|
<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">
|
<ul class="aside-icon-group" role="tablist" aria-orientation="vertical">
|
||||||
<li>
|
<li>
|
||||||
<button type="button" id="aside-tab-explorer" data-aside-target="explorer" role="tab"
|
<button type="button" id="aside-tab-explorer" data-aside-target="explorer" role="tab"
|
||||||
|
|||||||
@@ -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"
|
<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>
|
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...')); ?>"
|
<input type="search" name="side-search" id="side-search" placeholder="<?php e(t('Search...')); ?>"
|
||||||
aria-label="<?php e(t('Search')); ?>">
|
aria-label="<?php e(t('Search')); ?>">
|
||||||
<span class="app-search-shortcut" data-search-shortcut aria-hidden="true"></span>
|
<span class="app-search-shortcut" data-search-shortcut aria-hidden="true"></span>
|
||||||
|
|||||||
@@ -53,6 +53,14 @@ aside.aside-icon-bar li button.active {
|
|||||||
background: var(--app-icon-bar-hover-bg);
|
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) {
|
@media (min-width: 768px) {
|
||||||
aside.aside-icon-bar {
|
aside.aside-icon-bar {
|
||||||
border-right: var(--app-icon-bar-border);
|
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);
|
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,
|
.app-main-content,
|
||||||
footer.site-footer {
|
footer.site-footer {
|
||||||
padding-bottom: max(
|
padding-bottom: max(
|
||||||
|
|||||||
Reference in New Issue
Block a user