e-ticket/assets/modules/tabs.js

export function initTabs() {
    const buttons = document.querySelectorAll('[data-tab]')
    if (buttons.length === 0) return

    const tablist = buttons[0].parentElement
    tablist?.setAttribute('role', 'tablist')

    buttons.forEach(button => {
        const targetId = button.dataset.tab
        const panel = document.getElementById(targetId)

        button.setAttribute('role', 'tab')
        button.setAttribute('aria-controls', targetId)
        if (!button.id) {
            button.id = 'tab-btn-' + targetId
        }

        if (panel) {
            panel.setAttribute('role', 'tabpanel')
            panel.setAttribute('aria-labelledby', button.id)
        }

        const isActive = panel && panel.style.display !== 'none'
        button.setAttribute('aria-selected', isActive ? 'true' : 'false')
        button.setAttribute('tabindex', isActive ? '0' : '-1')

        button.addEventListener('click', () => activateTab(buttons, button))

        button.addEventListener('keydown', (e) => {
            const tabs = Array.from(buttons)
            const index = tabs.indexOf(button)

            let target = null
            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
                e.preventDefault()
                target = tabs[(index + 1) % tabs.length]
            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
                e.preventDefault()
                target = tabs[(index - 1 + tabs.length) % tabs.length]
            } else if (e.key === 'Home') {
                e.preventDefault()
                target = tabs[0]
            } else if (e.key === 'End') {
                e.preventDefault()
                target = tabs.at(-1)
            }

            if (target) {
                activateTab(buttons, target)
                target.focus()
            }
        })
    })
}

function activateTab(buttons, activeButton) {
    buttons.forEach(b => {
        const isActive = b === activeButton
        b.style.backgroundColor = isActive ? '#111827' : 'white'
        b.style.color = isActive ? 'white' : '#111827'
        b.setAttribute('aria-selected', isActive ? 'true' : 'false')
        b.setAttribute('tabindex', isActive ? '0' : '-1')

        const panel = document.getElementById(b.dataset.tab)
        if (panel) {
            panel.style.display = isActive ? 'block' : 'none'
        }
    })
}