Skip to content

[a11y][critical] Timeline collapse: Toggle uses aria-pressed, disclosure needs aria-expanded #87

@fedorovvvv

Description

@fedorovvvv

Source: PRD-018 SC-2 audit, finding [Logic-C2].

template/src/widgets/timeline/ui/Timeline.svelte:151-160

The Timeline's collapse control was previously a <button> with aria-expanded={!collapsed} — disclosure semantics. Migration replaced it with <Toggle pressed={!snapshotStore.collapsed}>. Toggle communicates aria-pressed (a two-state button), which is not the same as aria-expanded (a disclosure widget that controls visibility of another region).

Screen readers will now announce "toggle button, pressed" instead of "expanded" / "collapsed".

Fix

Replace <Toggle> with <Button> plus an explicit aria-expanded={!collapsed} aria-controls="timeline-body" — OR extend shared/ui/toggle/Toggle.svelte to accept and forward an aria-expanded prop (and document on /playground that pressed-as-disclosure is a supported pattern).

Acceptance

  • The collapse control announces "expanded" / "collapsed" with screen readers.
  • aria-controls points to the Timeline body region for navigation.

Audit traceability

  • Reviewer: Logic & Correctness, score 7/10
  • File: template/src/widgets/timeline/ui/Timeline.svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:appbugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions