diff --git a/src/lib/components/common/Select.svelte b/src/lib/components/common/Select.svelte index 52abfa3b8e..f5e3ba2b30 100644 --- a/src/lib/components/common/Select.svelte +++ b/src/lib/components/common/Select.svelte @@ -105,11 +105,21 @@ } } - async function toggleOpen() { + async function toggleOpen(focusContent = false) { open = !open; if (open) { await tick(); positionContent(); + if (focusContent) { + contentEl?.querySelector('button:not([disabled]), a[href], input')?.focus(); + } + } + } + + function handleTriggerKeydown(event) { + if (event.target === triggerEl && (event.key === 'Enter' || event.key === ' ')) { + event.preventDefault(); + toggleOpen(true); } } @@ -123,15 +133,19 @@ function handleKeydown(event) { if (event.key === 'Escape' && open) { + const restoreFocus = contentEl?.contains(document.activeElement); open = false; onClose(); + if (restoreFocus) triggerEl?.focus(); } } export function selectItem(item) { + const restoreFocus = contentEl?.contains(document.activeElement); value = item.value; open = false; onChange(value); + if (restoreFocus) triggerEl?.focus(); } @@ -147,7 +161,8 @@ class="focus-ring {triggerClass}" type="button" aria-expanded={open} - on:click={toggleOpen} + on:click={() => toggleOpen()} + on:keydown={handleTriggerKeydown} >