Skip to content

馃帹 Palette: Improve Scratchpad Footer UX & Accessibility #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sisyphean-a merged 1 commit into from
Jan 20, 2026
Merged

馃帹 Palette: Improve Scratchpad Footer UX & Accessibility #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,7 @@
## 2024-05-27 - Clipboard Reliability in Webviews
**Learning:** `navigator.clipboard.writeText` in VS Code Webviews is flaky because it requires the document to be focused, which isn't guaranteed if the user just clicked a button.
**Action:** Always delegate clipboard operations to the extension host via `postMessage` and `vscode.env.clipboard.writeText` for robust behavior.

## 2025-10-26 - Scratchpad Focus Management
**Learning:** In VS Code Webviews, automatically returning focus to the main input (e.g. textarea) after a button click (like "Copy" or "Remove Empty Lines") can be disorienting for screen reader users and keyboard navigators. It interrupts the natural tab order and prevents users from hearing status updates on the button they just clicked.
**Action:** Avoid calling `.focus()` on the input element immediately after secondary actions unless the primary purpose of the action is to prepare for immediate typing. For status updates (like "Copied!"), keep focus on the trigger element.
9 changes: 3 additions & 6 deletions src/features/scratchpad/scratchpad.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
spellcheck="false"
></textarea>
<div class="footer">
<span id="char-count" class="char-count" aria-live="polite">0 chars</span>
<span id="char-count" class="char-count">0 chars, 0 lines</span>
<div class="actions">
<button id="btn-copy" class="btn btn-primary" aria-label="Copy to Clipboard" title="Copy content to clipboard">
Copy
Expand Down Expand Up @@ -143,7 +143,8 @@

function updateCharCount() {
const length = textarea.value.length;
charCount.textContent = `${length} char${length !== 1 ? 's' : ''}`;
const lines = length === 0 ? 0 : textarea.value.split('\n').length;
charCount.textContent = `${length} char${length !== 1 ? 's' : ''}, ${lines} line${lines !== 1 ? 's' : ''}`;
}

function resetClearButton() {
Expand Down Expand Up @@ -203,8 +204,6 @@

if (copyTimeoutId) clearTimeout(copyTimeoutId);
copyTimeoutId = setTimeout(resetCopyButton, 2000);

textarea.focus();
});

// Clear Button Logic
Expand Down Expand Up @@ -256,8 +255,6 @@

if (removeEmptyTimeoutId) clearTimeout(removeEmptyTimeoutId);
removeEmptyTimeoutId = setTimeout(resetRemoveEmptyButton, 2000);

textarea.focus();
});

textarea.addEventListener('focus', resetClearButton);
Expand Down