🎨 Palette: Add keyboard shortcut hints and functionality to main action#138
🎨 Palette: Add keyboard shortcut hints and functionality to main action#138Shin5hi wants to merge 1 commit into
Conversation
- Adds `aria-keyshortcuts="Control+K Meta+K"` and a visual `<kbd>Ctrl+K</kbd>` hint to the button. - Updates JavaScript state management to preserve nested HTML (`childNodes`) during the loading state. - Adds global `keydown` event listener for `Ctrl+K`/`Cmd+K` to focus and trigger the button. - Recalculates and updates the CSP `script-src` hash. - Logs critical learning regarding DOM structural state preservation in `.jules/palette.md`. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@index.html`:
- Around line 126-132: The global keydown handler on document (the listener that
checks (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k' and then focuses
and clicks actionBtn) needs guards so it doesn't run when the user is typing or
when other modifiers like Shift are held; update the handler to return early if
e.shiftKey is true and to return early when the event target is an editable
element (target.tagName is INPUT, TEXTAREA, or target.isContentEditable is true)
or a form field role, then proceed to preventDefault(), focus actionBtn and
click it only when those guards pass.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8b1d51c5-16ec-4c14-b697-50303cea99f2
📒 Files selected for processing (2)
.jules/palette.mdindex.html
| document.addEventListener('keydown', (e) => { | ||
| if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { | ||
| e.preventDefault(); | ||
| actionBtn.focus(); | ||
| actionBtn.click(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Scope the global shortcut to avoid hijacking editable contexts.
At Line 127, this handler also fires while users are typing in editable elements and on combos like Ctrl/Cmd+Shift+K. That can trigger unintended actions and suppress expected defaults.
🔧 Proposed guard conditions
document.addEventListener('keydown', (e) => {
- if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
- e.preventDefault();
- actionBtn.focus();
- actionBtn.click();
- }
+ const isShortcut =
+ (e.ctrlKey || e.metaKey) &&
+ !e.altKey &&
+ !e.shiftKey &&
+ e.key.toLowerCase() === 'k';
+
+ const target = e.target;
+ const isEditable =
+ target instanceof HTMLElement &&
+ (target.isContentEditable ||
+ target.tagName === 'INPUT' ||
+ target.tagName === 'TEXTAREA' ||
+ target.tagName === 'SELECT');
+
+ if (!isShortcut || isEditable || actionBtn.disabled) return;
+
+ e.preventDefault();
+ actionBtn.focus();
+ actionBtn.click();
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| document.addEventListener('keydown', (e) => { | |
| if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { | |
| e.preventDefault(); | |
| actionBtn.focus(); | |
| actionBtn.click(); | |
| } | |
| }); | |
| document.addEventListener('keydown', (e) => { | |
| const isShortcut = | |
| (e.ctrlKey || e.metaKey) && | |
| !e.altKey && | |
| !e.shiftKey && | |
| e.key.toLowerCase() === 'k'; | |
| const target = e.target; | |
| const isEditable = | |
| target instanceof HTMLElement && | |
| (target.isContentEditable || | |
| target.tagName === 'INPUT' || | |
| target.tagName === 'TEXTAREA' || | |
| target.tagName === 'SELECT'); | |
| if (!isShortcut || isEditable || actionBtn.disabled) return; | |
| e.preventDefault(); | |
| actionBtn.focus(); | |
| actionBtn.click(); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@index.html` around lines 126 - 132, The global keydown handler on document
(the listener that checks (e.ctrlKey || e.metaKey) && e.key.toLowerCase() ===
'k' and then focuses and clicks actionBtn) needs guards so it doesn't run when
the user is typing or when other modifiers like Shift are held; update the
handler to return early if e.shiftKey is true and to return early when the event
target is an editable element (target.tagName is INPUT, TEXTAREA, or
target.isContentEditable is true) or a form field role, then proceed to
preventDefault(), focus actionBtn and click it only when those guards pass.
1 participant
💡 What:
Added a
Ctrl+K/Cmd+Kkeyboard shortcut to the main action button, complete with visual<kbd>hints, semanticaria-keyshortcutsattributes, and functional event binding. Updated the JavaScript state management to safely preserve nested HTML structural state (childNodes) during button loading transitions, avoidinginnerHTML. Updated the Content Security Policy (CSP) hash to reflect the inline script modifications.🎯 Why:
To improve accessibility and provide power users with a faster, frictionless way to interact with the primary action on the page without needing to use a mouse. Safely managing nested HTML states (
<kbd>) prevents XSS vulnerabilities while keeping the UI consistent during active/loading states.📸 Before/After:
Before: Button says "Click Me (Accessible)" with no keyboard shortcuts.
After: Button says "Click Me (Accessible)
Ctrl+K", and can be triggered seamlessly via the keyboard shortcut from anywhere on the page.♿ Accessibility:
aria-keyshortcutsto expose the shortcut to assistive technologies.replaceChildren) to preserve the<kbd>structural elements without risking XSS.PR created automatically by Jules for task 16356147399814882391 started by @Shin5hi
Summary by CodeRabbit
New Features
Documentation