Repository navigation
Move config into Feedback panel; add sticky element-picking switch - #7
Conversation
Follow-up to the config panel merged in #5. Refines how selection mode and settings are surfaced: - Move the ⚙ Settings (config) button from the bar into the Feedback panel header — the bar is now just [Feedback]. - Add a sliding element-picking switch to the panel header (left of the gear); remove the bar's "Element" button. On = element picking. - Make element picking sticky: once armed it stays armed after each pick (Save, Cancel, or click-outside dismiss) until Esc or the switch is toggled off. Default mode = Element just arms the switch on load. - Route all composer dismissals through one dismissComposer() so a click-outside re-arms picking the same way the buttons do. Docs (header comment, README RC section, docs/rc.html) kept in sync. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the user interface of the feedback tool by removing the separate 'Element' and 'Settings' buttons from the floating bar and integrating them directly into the 'Feedback' panel header. Element picking is now managed via a toggle switch with sticky behavior, and settings are accessed via a gear icon in the header. The review feedback suggests enhancing keyboard accessibility by allowing the Escape key to dismiss the composer dialog, and improving screen reader accessibility by adding an explicit aria-label to the new toggle switch.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| composerTarget = target; | ||
| var ta = composer.querySelector("textarea"); ta.focus(); | ||
| composer.querySelector(".qb-cancel").addEventListener("click", clearTransient); | ||
| composer.querySelector(".qb-cancel").addEventListener("click", dismissComposer); |
There was a problem hiding this comment.
Pressing the Esc key is a standard and expected way to cancel or dismiss a transient composer dialog. Currently, pressing Esc while the composer is open does nothing because the global pick-mode keydown listener is inactive. Adding a keydown listener to the composer element to handle the Escape key and trigger dismissComposer() improves the user experience and keyboard accessibility.
composer.querySelector(".qb-cancel").addEventListener("click", dismissComposer);
composer.addEventListener("keydown", function (e) { if (e.key === "Escape") { e.preventDefault(); dismissComposer(); } });| panel.innerHTML = | ||
| "<header><span>Feedback · " + all.length + '</span><button class="qb-btn" data-close>×</button></header>' + | ||
| "<header><span>Feedback · " + all.length + '</span><span class="qb-head-actions">' + | ||
| '<button class="qb-switch' + (picking ? " qb-on" : "") + '" data-mode-toggle role="switch" aria-checked="' + (picking ? "true" : "false") + '" title="Element picking — off picks text">' + |
There was a problem hiding this comment.
For better accessibility (a11y), interactive elements with role="switch" should have an explicit accessible name. While the title attribute is present, adding an explicit aria-label ensures that screen readers reliably announce the purpose of the switch.
| '<button class="qb-switch' + (picking ? " qb-on" : "") + '" data-mode-toggle role="switch" aria-checked="' + (picking ? "true" : "false") + '" title="Element picking — off picks text">' + | |
| '<button class="qb-switch' + (picking ? " qb-on" : "") + '" data-mode-toggle role="switch" aria-checked="' + (picking ? "true" : "false") + '" aria-label="Element picking" title="Element picking — off picks text">' + |
Follow-up to #5 (config panel). Refines how selection mode and settings are surfaced in the UI.
Changes
role="switch", accent-tinted, slides).Default mode = Elementnow simply arms the switch on load.dismissComposer(), so dismissing by clicking outside re-arms picking the same way the buttons do (previously only the buttons re-armed).Docs
Header comment in
quibble.js, the RC section inREADME.md, anddocs/rc.htmlupdated to match (gear location, the new switch, sticky behavior).Testing
node --check quibble.js✅🤖 Generated with Claude Code