mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
chore(orbit): auto-focus first help accordion + visible keyboard-focus ring
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -22,10 +22,15 @@ export default function OrbitHelpModal() {
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
// Focus the first accordion summary so arrow keys work immediately.
|
||||
queueMicrotask(() => {
|
||||
// Uses a short setTimeout because the browser re-focuses the clicked
|
||||
// trigger button after the click handler returns — our focus call has
|
||||
// to happen *after* that, otherwise the browser silently overrides it
|
||||
// and the user only gets keyboard nav after pressing Tab first.
|
||||
const id = window.setTimeout(() => {
|
||||
const first = bodyRef.current?.querySelector<HTMLElement>('summary');
|
||||
first?.focus();
|
||||
});
|
||||
}, 60);
|
||||
return () => window.clearTimeout(id);
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -11955,6 +11955,15 @@ html[data-psy-native-hidden="true"] *::after {
|
||||
color: var(--text-secondary, var(--text-primary));
|
||||
}
|
||||
.orbit-help-modal__body p:last-child { margin-bottom: 0; }
|
||||
|
||||
/* Keyboard focus indicator for accordion summaries — the default outline
|
||||
is too subtle against the modal's dark background. Uses focus-visible
|
||||
so mouse clicks don't leave a lingering ring. */
|
||||
.orbit-help-modal__body summary:focus-visible {
|
||||
outline: none;
|
||||
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
.orbit-help-modal__warn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user