fix: community feed a11y -- reduced-motion guards + tablist focus management
This commit is contained in:
parent
8731cad854
commit
730445e479
2 changed files with 21 additions and 2 deletions
|
|
@ -111,13 +111,21 @@ const filterIds = filters.map((f) => f.id)
|
|||
|
||||
function onFilterKeydown(e: KeyboardEvent) {
|
||||
const current = filterIds.indexOf(activeFilter.value)
|
||||
let next = current
|
||||
if (e.key === 'ArrowRight') {
|
||||
e.preventDefault()
|
||||
setFilter(filterIds[(current + 1) % filterIds.length]!)
|
||||
next = (current + 1) % filterIds.length
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault()
|
||||
setFilter(filterIds[(current - 1 + filterIds.length) % filterIds.length]!)
|
||||
next = (current - 1 + filterIds.length) % filterIds.length
|
||||
} else {
|
||||
return
|
||||
}
|
||||
setFilter(filterIds[next]!)
|
||||
// Move DOM focus to the newly active tab per ARIA tablist pattern
|
||||
const bar = (e.currentTarget as HTMLElement).closest('[role="tablist"]')
|
||||
const buttons = bar?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
|
||||
buttons?.[next]?.focus()
|
||||
}
|
||||
|
||||
async function setFilter(filterId: string) {
|
||||
|
|
@ -247,5 +255,10 @@ onMounted(async () => {
|
|||
animation: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.toast-fade-enter-active,
|
||||
.toast-fade-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -169,4 +169,10 @@ const fullDate = computed(() => {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.community-post-card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue