fix: community feed a11y -- reduced-motion guards + tablist focus management

This commit is contained in:
pyr0ball 2026-04-13 11:38:17 -07:00
parent 8731cad854
commit 730445e479
2 changed files with 21 additions and 2 deletions

View file

@ -111,13 +111,21 @@ const filterIds = filters.map((f) => f.id)
function onFilterKeydown(e: KeyboardEvent) { function onFilterKeydown(e: KeyboardEvent) {
const current = filterIds.indexOf(activeFilter.value) const current = filterIds.indexOf(activeFilter.value)
let next = current
if (e.key === 'ArrowRight') { if (e.key === 'ArrowRight') {
e.preventDefault() e.preventDefault()
setFilter(filterIds[(current + 1) % filterIds.length]!) next = (current + 1) % filterIds.length
} else if (e.key === 'ArrowLeft') { } else if (e.key === 'ArrowLeft') {
e.preventDefault() 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) { async function setFilter(filterId: string) {
@ -247,5 +255,10 @@ onMounted(async () => {
animation: none; animation: none;
opacity: 0.7; opacity: 0.7;
} }
.toast-fade-enter-active,
.toast-fade-leave-active {
transition: none;
}
} }
</style> </style>

View file

@ -169,4 +169,10 @@ const fullDate = computed(() => {
width: 100%; width: 100%;
} }
} }
@media (prefers-reduced-motion: reduce) {
.community-post-card {
transition: none;
}
}
</style> </style>