Skip to content

Accessibility: hover-only tooltips, misused tablist roles, and a layout table #7

Description

@jeremymanning

Collected by an adversarial accessibility pass during feature 005. All pre-existing; none
blocks the documentation work, but each makes real information unreachable for some users.

1. Hover-only tooltips (highest impact)

Token probabilities, sphere labels and residual-norm bars are all onmousemove /
onmouseleave on role="note" elements with no tabindex:

  • ArchChat.svelte (reply tokens — the per-token probability and its top-5 alternatives)
  • ArchTracePanel.svelte (token chips, norm bars)
  • GeoScene.svelte (sphere dot labels, pointermove)

Keyboard users cannot reach them; touch users effectively cannot either. For the reply
tokens the tooltip is the only place the alternatives appear.

Fix: tabindex="0" plus onfocus/onblur mirroring showTip/hideTip; show the sphere
label on pointerdown as well as pointermove.

2. role="tablist" on things that are not tabs

GeometryLab.svelte field/layer segmented pickers carry role="tablist" but their children
have no role="tab", no aria-selected, and there is no tabpanel. A screen reader
announces a tab list containing nothing it recognises, and the active field/layer is never
conveyed. FinetunePanel/TrainPanel/AttentionView set role="tab"/aria-selected but
still have no tabpanel, aria-controls, or arrow-key handling.

Fix: role="radiogroup" + role="radio" aria-checked, or drop the roles and use
aria-pressed on the buttons (they already behave as toggles).

3. The Info tab's notation table is a layout table

Four columns alternating symbol/definition with no <thead>/<th>. It is a glossary, so
assistive tech reads two unrelated pairs as one row.

Fix: a <dl> with display: grid; grid-template-columns: auto 1fr auto 1fr — same visuals,
correct semantics, and it collapses to two columns on a phone for free.

Already fixed in feature 005

Equation blocks and tables are now keyboard-scrollable (tabindex="0" on the scroll
container, white-space: nowrap so overflow-x actually engages); <table display:block>
no longer strips table semantics; Explain titles are exposed as headings for heading
navigation; Explain summaries wrap on narrow screens.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions