bytedance / bytedance/TableVerse

Make galleries and lightboxes keyboard accessible

Open
#5 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.