46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||
|
||
export function useDeferredTabFocus() {
|
||
const focusableElements = ref<HTMLElement[]>([])
|
||
|
||
function register(el: HTMLElement | null) {
|
||
if (el) {
|
||
el.setAttribute('tabindex', '-1')
|
||
focusableElements.value.push(el)
|
||
}
|
||
}
|
||
|
||
function activateFocus() {
|
||
focusableElements.value.forEach(el => el.removeAttribute('tabindex'))
|
||
document.body.classList.add('user-is-tabbing') // <– das hier neu
|
||
window.removeEventListener('keydown', onKeyDown)
|
||
}
|
||
|
||
|
||
function onKeyDown(e: KeyboardEvent) {
|
||
if (e.key === 'Tab') {
|
||
activateFocus()
|
||
}
|
||
}
|
||
|
||
function onMouseDown() {
|
||
document.body.classList.remove('user-is-tabbing')
|
||
window.addEventListener('keydown', onKeyDown) // optional: erlaubt Wiederaktivierung nach Maus
|
||
}
|
||
|
||
|
||
onMounted(() => {
|
||
window.addEventListener('keydown', onKeyDown)
|
||
window.addEventListener('mousedown', onMouseDown)
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('keydown', onKeyDown)
|
||
window.removeEventListener('mousedown', onMouseDown)
|
||
})
|
||
|
||
return {
|
||
register
|
||
}
|
||
}
|