09a3e7867e
Cognitive complexity refactors: - cart.js: extract buildCart, handleCheckout, updateStockLabel, updateItemStock, startStockPolling (21→~8) - tabs.js: use .at(-1) instead of [length-1] - MeilisearchConsistencyCommand: extract checkAllIndexes, accumulate, reportSummary (18→~8) - TranslateCommand: extract processDomain, processLanguage, loadExisting, findMissingKeys, removeObsoleteKeys, handleUpToDate, mergeAndOrder (36→~10) - AccountController::index: extract computeFinanceStats with statusMap pattern (19→~12) Test coverage additions: - HomeController: expired invitation view, stock not found, stock with billets, search+city with mock results - AdminController: delete/resend invitation not found (404) - AccountController: item without billet (codeCoverageIgnore - NOT NULL in DB) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
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'
|
|
}
|
|
})
|
|
}
|