mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
fix(studio): announce real track numbers and point aria-controls at the lanes
The timeline's track key is a fractional z-order sort value, and the header built its visibility label straight from it, so screen readers announced "Hide track 0.16666666666666666". A track's 1-based display row is now passed alongside the key: the row number goes in every label, the key keeps routing every callback (visibility toggle, lane context menu). The same fix covers the `Track N` fallback used when a track holds no labelled element. The layer disclosure caret's aria-controls named a div in the sticky label column. That subtree is not empty, it holds the per-lane keyframe controls, but its children are all absolutely positioned so the div computes to 0x0, and the diamonds the caret visibly reveals live on the canvas instead. The caret expands two disjoint subtrees and was naming the less useful one. TimelinePropertyLanes now renders one static wrapper (static, not relative, so it establishes no containing block and the absolutely-positioned lanes keep resolving against the track-content div with identical geometry) and takes the id. TimelineLanes mints that id, since it is the only place that sees both ends of the disclosure, and mounts the wrapper for the track's keyframe clip in both disclosure states so the reference still resolves while collapsed. TimelineLaneBaseProps moves to its own module: it is the contract shared by TimelineCanvas and TimelineLanes, and lifting it out keeps TimelineLanes.tsx well under the 600-line cap instead of pushing past it.
This commit is contained in:
@@ -22,7 +22,10 @@ export function LayerDisclosureRow({
|
||||
/** Same adaptive width the lane rows use: a narrowed header column must not
|
||||
* leave this row hanging over the clips it labels. */
|
||||
columnWidth: number;
|
||||
/** Id of the element holding the lanes this row's caret expands. */
|
||||
/** Id of the CANVAS-side element holding the diamond lanes this row's caret
|
||||
* expands (see TimelinePropertyLanes). The caret also reveals the per-lane
|
||||
* control rows in this column, but the diamonds are what following the
|
||||
* reference should land on. */
|
||||
lanesId: string;
|
||||
onToggleClipExpanded: () => void;
|
||||
/** Trailing controls that act on the LAYER (the visibility eye), not on a lane. */
|
||||
|
||||
Reference in New Issue
Block a user