feat(core/dfn-panel): show citation popup on biblio reference click#5293
feat(core/dfn-panel): show citation popup on biblio reference click#5293marcoscaceres wants to merge 8 commits into
Conversation
Clicking a [[SPEC]] inline reference now shows a dfn-panel-style popup containing the full citation details (title, authors, publisher, date, URL) from the rendered references section, instead of navigating to the bottom of the page. The biblio panels reuse the existing .dfn-panel CSS infrastructure and runtime interaction model (show/hide/dock, focus trapping, keyboard nav). Panel IDs use the scheme `biblio-panel-for-<bib-id>` to avoid collision with dfn panels. Multiple links that alias to the same bib entry share a single panel. Clicking prevents the default scroll-to-references navigation. Closes #3345
The test asserted expect(doc).toBeTruthy() which always passes. Replace with expect(panel).toBeNull() to verify no panel is created.
There was a problem hiding this comment.
Pull request overview
Adds bibliography-reference (“bibref”) popups using the existing dfn-panel infrastructure, so clicking an inline citation like [FETCH] can show the full rendered reference without jumping to the References section.
Changes:
- Extend
core/dfn-panelto generate and wire up “biblio panels” for inline bibliography links (a.bibref). - Update the dfn-panel runtime listener to open the correct biblio panel and suppress default hash navigation.
- Add styling and a dedicated test suite for biblio panel creation/interaction (including export behavior).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| tests/spec/core/dfn-panel-spec.js | Adds new biblioPanel test coverage for panel creation, ARIA, interaction, and exported docs. |
| src/styles/dfn-panel.css.js | Adds minor styling for a.bibref cursor and spacing for rendered biblio content inside panels. |
| src/core/dfn-panel.runtime.js | Extends runtime event handling to open/close biblio panels from a.bibref interactions. |
| src/core/dfn-panel.js | Generates biblio panels by cloning rendered reference entries and marks bibref links with dialog semantics. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@copilot CI is failing with one test:
A panel is being created for bibrefs with no rendered entry; please add the missing guard so none is created in that case. Verify locally with |
When a bibliography reference cannot be resolved, render-biblio renders an <em class="respec-offending-element"> inside the <dd>. Guard createBiblioPanel against this case by returning null early, so no popup panel is created for broken references. Fixes the "does not create a panel for a bibref with no rendered entry" test failure. Agent-Logs-Url: https://github.com/speced/respec/sessions/930336ec-de11-4dd3-9f1d-2db41a02a46e Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>
| const dt = document.getElementById(bibId); | ||
| if (!dt) return null; | ||
| const dd = dt.nextElementSibling; | ||
| if (!dd || dd.tagName !== "DD") return null; |
| const panel = createBiblioPanel(link); | ||
| if (panel) panels.append(panel); | ||
| } | ||
| // All links pointing to the same bibId share the single panel. | ||
| link.setAttribute("aria-haspopup", "dialog"); |
Fixed in d6c16d4. Added a guard in |
|
@copilot can you fix the issues you just found. |
Track which bibIds actually have a panel created (panelBibIds set) and only set aria-haspopup="dialog" on links whose bibId is in that set. Links for unresolved references (where createBiblioPanel returns null) no longer advertise a dialog to assistive technologies. Also extend the "no rendered entry" test to assert aria-haspopup is absent for such links. Agent-Logs-Url: https://github.com/speced/respec/sessions/d4845caf-5d7c-43ce-b1b6-93507f35c89e Co-authored-by: marcoscaceres <870154+marcoscaceres@users.noreply.github.com>
Fixed in d45e076. Issue 1 (guard for |
Closes #3345
Clicking a bibliography reference (e.g. [FETCH]) now shows a popup panel with the full citation details, using the same panel infrastructure as dfn panels. Multiple references to the same spec share one panel. The popup prevents the default jump to the references section, keeping the reader in context.