diff --git a/src/App.svelte b/src/App.svelte index daf8b7c..0d8459c 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -33,7 +33,8 @@ let items = inputData; let itemsFiltered = inputData; let fuse = new Fuse(items, optionsFuse); - let focusedElement; + let focusedElement: HTMLElement | null = null; + let focusedElementFocusVisible = { visible: false }; onMount(() => { initShortCuts(hotkeysGlobal); @@ -41,14 +42,14 @@ if (showModal) { onClosed() } else { - focusedElement = document.activeElement + focusedElement = document.activeElement showModal = true; selectedIndex = 0; dispatch("opened"); } }); setAllShortCuts(inputData, async command => { - focusedElement = document.activeElement + focusedElement = document.activeElement showModal = true; dispatch("opened"); await asyncTimeout(200); @@ -138,7 +139,17 @@ if ( ! focusedElement ) { console.error("focusedElement not set") } else { - focusedElement.focus() + if ( ['A', 'SUMMARY'].includes(focusedElement.tagName)) { + /* If focusedElement is one of these, they do not get focus rings + by default like inputs, selects etc. We want user to know + where focus is when we return so try to activate :focus-visible + styling. So use this standard. + Only implemented in Firefox currently. + */ + focusedElementFocusVisible.visible = true; + } + focusedElement.focus( + {focusVisible: focusedElementFocusVisible.visible}) } }