New tests (47 added, 622 total): - MonitorMessengerCommand: no failures, failures with email, null error, multiple (4) - UnsubscribeController: unsubscribe with invitations refused + admin notified (1) - AdminController: suspend/reactivate orga, orders page with filters, logs, invite orga submit/empty, delete/resend invitation, export CSV/PDF (13) - AccountController: export CSV/PDF, getAllowedBilletTypes (free/basic/sur-mesure/null), billet type restriction, finance stats all statuses, soldCounts (9) - HomeController: city filter, date filter, all filters combined, stock route (4) - OrderController: event ended, invalid cart JSON, invalid email, stock zero (4) - MailerService: getAdminEmail, getAdminFrom (2) - JS: comment node, tabs missing panel/id/parent, cart stock polling edge cases (10) Accessibility fixes: - events.html.twig: add for/id on search, city, date labels - admin/orders.html.twig: add for/id on search, status labels Code quality: - cart.js: remove dead ternaire branch (max > 10 always plural) - tabs.js: use optional chaining for tablist?.setAttribute - MeilisearchConsistencyCommand: extract diffAndReport() (was duplicated 3x) - Email templates: extract _order_items_table.html.twig partial - SonarQube: exclude src/Entity/** from CPD 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[tabs.length - 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'
|
|
}
|
|
})
|
|
}
|