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