bytedance / bytedance/TableVerse
Make galleries and lightboxes keyboard accessible
- Dominant language
- No language data
- Stars
- 25
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
## Problem
The comparison and scene galleries expose image enlargement as an interactive feature, but several controls are not keyboard- or focus-accessible in the current Pages source (`web@66efcf4f1f8a4aaf5cc937e5b6d5bd9724f3ea04`).
### Comparison panels
`compare.js` creates the full and compact image panels as clickable `div` elements. They have click handlers, but no native button semantics, `tabindex`, or Enter/Space handler. A keyboard user therefore cannot focus and open a specific result even though the page explicitly says to click a panel to enlarge it.
### Lightboxes
The comparison lightbox has `role="dialog"` but no `aria-modal`; the scene lightbox has no dialog role or accessible name. Opening either lightbox does not move focus into it, Tab is not contained, and closing it does not restore focus to the panel that opened it.
Scene category buttons use `role="tab"`, but the selected state is represented only by a CSS class and is not exposed through `aria-selected`.
## Reproduction
1. Open https://bytedance.github.io/TableVerse/#comparison.
2. Use only Tab, Shift+Tab, Enter, Space, and Escape.
3. Try to focus and open a comparison result, then navigate and close the lightbox.
4. Repeat with the scene browser category tabs and scene lightbox.
## Expected behavior
- Every panel that opens a lightbox is focusable and responds to Enter/Space.
- The active scene tab exposes `aria-selected`.
- Each lightbox has modal dialog semantics, receives and contains focus while open, and returns focus to its trigger when closed.
## Actual behavior
The clickable result panels are absent from the keyboard focus order, tab state is not announced, and modal focus is unmanaged.
## Impact
Keyboard and assistive-technology users cannot operate core gallery functionality reliably.
## Environment
- Source: `web@66efcf4f1f8a4aaf5cc937e5b6d5bd9724f3ea04`
- Live Pages deployment: https://bytedance.github.io/TableVerse/
- Verified from generated DOM, event handlers, and live keyboard inspection
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in the Pages source at compare.js, then inspect the comparison and scene lightbox entry points using the reproduction steps at the live Pages URL. Verify that panels accept keyboard activation, scene tabs expose aria-selected, each lightbox has modal semantics and managed focus, and closing restores focus to its trigger.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100