Skip to content

Navigation Menu

Sign in
Sign up

Citation badges: hover/focus preview + a11y (#1466) - #2045

Draft
manzke wants to merge 1 commit into
main from
claude/charming-fermat-yfsx4k
Draft

Citation badges: hover/focus preview + a11y (#1466) #2045
manzke wants to merge 1 commit into
main from
claude/charming-fermat-yfsx4k

Conversation

@manzke

@manzke manzke commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Summary

Part of #1466. Extends the existing citation UI (<cite type="s|r">N</cite> pills rendered by
client/src/utils/citationTransformer.js) with a real hover/focus preview and better accessibility,
matching two of the issue's acceptance criteria:

  • Hover preview: badges now carry a short excerpt of the passage they cite (from
    citations.references[].content) or the document's title (from citations.resultItems[].title
    for whole-document citations), shown in a small custom tooltip on mouse hover and keyboard
    focus (native title tooltips don't fire on focus, so this is also an a11y improvement, not
    just cosmetic).
  • Accessible name: each badge's aria-label now includes that excerpt (e.g. "Source 1: The sky is blue because of...") instead of a bare "Source 1", so screen reader users hear what a
    citation actually refers to.
  • Source panel highlight on hover: hovering/focusing a badge briefly highlights the
    corresponding entry in CitationPanel.jsx (same ring style already used for click-to-scroll) —
    but without auto-scrolling or auto-expanding a collapsed passage, so it can't yank the viewport
    around. Clicking a badge keeps its existing scroll-and-expand behavior unchanged.
  • Keyboard focus ring: .citation-badge:focus-visible now has a visible outline (previously
    only present in an unused, never-imported CSS string export — the real, wired-up
    StreamingMarkdown.css had no focus-visible affordance at all).

Excerpt text is HTML-attribute-escaped and truncated to 160 characters before being embedded.

Scope note

This issue also proposes an opt-in answer-verification pass (a second LLM call flagging
claims not supported by the cited sources) and a citation-format change. Per the implementation
plan already posted on the issue, that half has several open, genuinely blocking design questions
(model selection/cost accounting, persistence across reloads, whether it should also cover
web-search-derived claims) that need a product decision before implementation. This PR intentionally
covers only the citation-UI polish, which needed no such decision — the verification pass is left
as a follow-up.

Test plan

  • New client/src/utils/citationTransformer.test.js (plain-node test, matches this repo's
    existing client-side test convention) covering: excerpt lookup for both citation types,
    truncation at 160 chars, HTML-attribute escaping, and the no-citations-data fallback. All 9
    assertions pass (node client/src/utils/citationTransformer.test.js).
  • npx eslint on all changed files — 0 errors (pre-existing warnings only, unrelated to this
    change).
  • npx prettier --write on all changed files.
  • npx vite build succeeds.
  • Manual browser verification of the hover/focus tooltip and panel highlight was not performed
    in this sandboxed session.

Changelog entry added under docs/releases/5.5.0/features.md per this repo's convention.

🤖 Generated with Claude Code


Generated by Claude Code

Part of #1466. Citation badges (<cite type="s|r">N</cite> pills) now carry a
short excerpt of the passage/document they point to, shown as a custom
tooltip on hover or keyboard focus and exposed via aria-label for screen
readers. The corresponding entry in the source panel gets a non-scrolling
highlight while a badge is hovered/focused, and badges now show a visible
focus ring.
Scoped to the citation-UI half of #1466 only — the opt-in answer-verification
pass from that issue has several open design questions (model selection,
persistence, scope) and is left for separate follow-up.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

chat documentation Improvements or additions to documentation frontend

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

AltStyle によって変換されたページ (->オリジナル) /