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:
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user