diff --git a/src/styles.css b/src/styles.css index 1839b92..95144b0 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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) { *,