Skip to content

Add keyboard shortcuts to color palette generator - #506

Draft
tabletalkstudio wants to merge 4 commits into
stagefrom
keyboard-changes
Draft

Add keyboard shortcuts to color palette generator#506
tabletalkstudio wants to merge 4 commits into
stagefrom
keyboard-changes

Conversation

@tabletalkstudio

@tabletalkstudio tabletalkstudio commented May 21, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Space generates a random palette (equivalent to clicking "Generate random")
  • across Color Wheel, Contrast Checker, Color Blindness Simulator, Extract Palette, and Extract Gradient page:
    • ⌘Z / ctrlZnavigates back through palette history (undo)
    • ⌘⇧Z / ctrl⇧Z navigates forward through palette history (redo)
  • Shortcuts are suppressed when any interactive element has keyboard focus — form fields, buttons, links, color wheel markers, harmony carousel items, and ARIA role widgets — so keyboard-only users are unaffected
  • createActionMenuComponent.js — expose generateRandom on the returned API so the full generate-random sequence (color reset + history push) can be triggered without a button click
  • color-wheel.js — add a keydown listener on document wired to actionMenuApi.generateRandom, actionMenuApi.undo, and actionMenuApi.redo; listener is cleaned up on block re-init (breakpoint change)

Jira Ticket

n/a


Test URLs

Env URL
Before https://main--express-color--adobecom.aem.live/create/color-wheel
After https://keyboard-changes--express-color--adobecom.aem.page/create/color-wheel
Env URL
Before https://main--express-color--adobecom.aem.live/create/color-contrast-analyzer
After https://keyboard-changes--express-color--adobecom.aem.page/create/color-contrast-analyzer
Env URL
Before https://main--express-color--adobecom.aem.live/create/color-accessibility
After https://keyboard-changes--express-color--adobecom.aem.page/create/color-accessibility
Env URL
Before https://main--express-color--adobecom.aem.live/create/image-gradient
After https://keyboard-changes--express-color--adobecom.aem.page/create/image-gradient
Env URL
Before https://main--express-color--adobecom.aem.live/create/image
After https://keyboard-changes--express-color--adobecom.aem.page/create/image

Verification Steps

  1. Open the After URL
  2. ONLY FOR COLOR WHEEL: Click the page background (no element focused) → press Space → palette should refresh
  3. Press cmd + Z / ctrl + z to go back through history and cmd + shift + z / ctrl + shift + z to go forward in history
  4. Tab to the "Generate random" button → press Space → button activates (generates random), no double-fire
  5. Tab into the color wheel (press Enter) → use ← → to adjust hue → history navigation must NOT fire
  6. Tab to a hex input → type → no shortcut interference

Potential Regressions


Additional Notes

Test plan

  • Click the page background (no element focused) → press Space → palette refreshes
  • Press ⌘Z / ⌘⇧Z(mac) ctrlZ / ctrl⇧Z → palette steps back and forward through history
  • Tab to "Generate random" button → press Space → button activates normally, no double-fire
  • Tab into the color wheel (press Enter) → use arrow keys to adjust hue → history navigation does NOT fire
  • Tab to a hex input → type / press ⌘Z → text undo works, palette history unaffected

@aem-code-sync

aem-code-sync Bot commented May 21, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

@github-actions github-actions Bot added the Ready for Review Ready for peer review. label May 21, 2026
Mariah Gardziola and others added 2 commits May 21, 2026 12:13
Space generates a random palette; ArrowLeft/ArrowRight navigate back
and forward through history. Shortcuts are suppressed when any
interactive element has keyboard focus (inputs, buttons, links,
color-wheel markers, ARIA role widgets) so keyboard-only users are
unaffected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@aem-code-sync

aem-code-sync Bot commented May 22, 2026

Copy link
Copy Markdown

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@aem-code-sync
aem-code-sync Bot temporarily deployed to keyboard-changes May 22, 2026 01:13 Inactive
… color-extract

- Move shared undo/redo keyboard listener into createColorToolLayout so
  color-blindness and color-contrast-checker get the shortcut automatically
- Remove duplicate Cmd/Ctrl+Z branches from color-wheel (layout handles it now)
- Add Cmd/Ctrl+Z to color-extract palette and gradient variants via historyManager

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
function makeUndoRedoHandler(actionMenu) {
return (e) => {
if (!e.metaKey && !e.ctrlKey) return;
if (e.key !== 'z') return;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think something is broken with the undo / redo, if you generate 3 palettes, undo all of them, the redo combo no longer works. This could potentially fix that.

Suggested change
if (e.key !== 'z') return;
if (e.key.toLowerCase() !== 'z') return;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants