lashman/vesper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix: add focus indicators, fix target sizes, show hidden controls

Browse Source
This commit is contained in:
Your Name
2026-02-19 21:15:03 +02:00
parent c644d7372d
commit ecb9fd867c
1 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/styles.css
View File

@@ -391,8 +391,8 @@ html, body, #root {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
width: 24px;
height: 24px;
background: transparent;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
@@ -440,14 +440,18 @@ html, body, #root {
transition: all var(--transition-fast);
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.tab-scroll-arrow.visible {
opacity: 1;
opacity: 0.6;
pointer-events: auto;
visibility: visible;
}
.tab-scroll-arrow:hover {
.tab-scroll-arrow.visible:hover,
.tab-scroll-arrow.visible:focus-visible {
opacity: 1;
color: var(--color-text-primary);
background-color: var(--color-bg-hover);
}
@@ -504,8 +508,8 @@ html, body, #root {
}
.tab-close {
width: 18px;
height: 18px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
@@ -514,12 +518,13 @@ html, body, #root {
border-radius: var(--radius-sm);
color: var(--color-text-tertiary);
cursor: pointer;
opacity: 0;
opacity: 0.5;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.tab:hover .tab-close {
.tab:hover .tab-close,
.tab-close:focus-visible {
opacity: 1;
}
@@ -576,13 +581,14 @@ html, body, #root {
right: 0;
top: 0;
bottom: 0;
width: 4px;
width: 8px;
background: rgba(255, 255, 255, 0.06);
cursor: col-resize;
background: transparent;
transition: background-color var(--transition-fast);
}
.sidebar-resize-handle:hover {
.sidebar-resize-handle:hover,
.sidebar-resize-handle:focus-visible {
background-color: var(--color-accent);
}
@@ -688,9 +694,11 @@ html, body, #root {
color: var(--color-text-tertiary);
}
.search-input:focus {
.search-input:focus-visible {
border-color: var(--color-accent);
background-color: var(--color-bg-base);
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.search-results {
@@ -1628,6 +1636,19 @@ span.search-highlight.search-highlight-active {
transition: background-color 0.2s ease, opacity 0.2s ease;
}
/* Global focus indicator — WCAG 2.4.7, 2.4.13 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="separator"]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
z-index: 1;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,