fix(website): Make pack button cancel work via keyboard

[yamadashy]

Summary

• Switch the pack button's type to button while loading so the form does not submit on Enter/Space.
• Drop the event.detail > 0 guard so any click event — mouse or keyboard — emits cancel while loading.

Why

The previous handler only fired cancel when event.detail > 0 (true for real mouse clicks). When the button was activated via the keyboard, the browser fires a click with detail === 0, so keyboard users could not cancel an in-flight pack request.

Checklist

• Run node --run lint (website/client)

[coderabbitai]

📝 Walkthrough

Walkthrough

PackButton prevents form submission during processing by conditionally setting the button type based on loading state, and broadens cancellation handling to treat any interaction as a cancel signal during loading rather than only mouse clicks.

Changes

Loading State Form Submission Prevention

Layer / File(s)	Summary
Button type and cancel handling during loading website/client/components/Home/PackButton.vue	Button type attribute now conditionally switches from submit to a non-submitting type while loading is true. Cancel event handler is updated to treat any interaction during loading as cancellation, removing the earlier restriction that only allowed cancellation on mouse clicks, while preserving default prevention, propagation stopping, and event emission.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• yamadashy/repomix#865: Both PRs modify PackButton.vue cancel handling to distinguish or broaden interaction types (mouse vs. keyboard) during loading state.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main change: enabling keyboard-based cancellation for the pack button during loading operations.
Description check	✅ Passed	The description covers the main changes, rationale, and includes checklist confirmation, though it deviates slightly from the template structure by using a custom format.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/pack-button-keyboard-cancel

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

⚡ Performance Benchmark

Latest commit:	1d81788 fix(website): Make pack button cancel work via keyboard
Status:	✅ Benchmark complete!
Ubuntu:	0.66s (±0.02s) → 0.66s (±0.01s) · -0.01s (-0.9%)
macOS:	0.63s (±0.05s) → 0.63s (±0.09s) · -0.00s (-0.2%)
Windows:	1.15s (±0.08s) → 1.13s (±0.09s) · -0.02s (-1.8%)

Details

• Packing the repomix repository with node bin/repomix.cjs
• Warmup: 2 runs (discarded), interleaved execution
• Measurement: 20 runs / 30 on macOS (median ± IQR)
• Workflow run

[coderabbitai]

🧹 Nitpick comments (1)

website/client/components/Home/PackButton.vue (1)

31-33: ⚡ Quick win

Mirror the cancel affordance on focus as well as hover.

Keyboard activation works now, but sighted keyboard users still only see Processing... because the loading-state affordance switches to Cancel on hover only. Add a :focus-visible variant so the new keyboard path is discoverable too.

Suggested follow-up

 .pack-button--loading:hover {
   background: var(--vp-c-danger-1);
 }
+
+.pack-button--loading:focus-visible {
+  background: var(--vp-c-danger-1);
+}

-.pack-button--loading:hover .pack-button__text--normal {
+.pack-button--loading:hover .pack-button__text--normal,
+.pack-button--loading:focus-visible .pack-button__text--normal {
   opacity: 0;
 }

-.pack-button--loading:hover .pack-button__text--hover {
+.pack-button--loading:hover .pack-button__text--hover,
+.pack-button--loading:focus-visible .pack-button__text--hover {
   opacity: 1;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@website/client/components/Home/PackButton.vue` around lines 31 - 33, In
PackButton.vue the loading-state affordance only switches to "Cancel" on hover,
which hides the keyboard-discoverable signal; update the component's styles and
template so the same visual/state change applied on :hover when props.loading is
true is also applied for :focus-visible (i.e., add a :focus-visible CSS variant
to the same selector that currently handles the loading hover state), ensuring
the button remains tabbable and the visible text/icon switches to "Cancel" for
keyboard focus as well.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@website/client/components/Home/PackButton.vue`:
- Around line 31-33: In PackButton.vue the loading-state affordance only
switches to "Cancel" on hover, which hides the keyboard-discoverable signal;
update the component's styles and template so the same visual/state change
applied on :hover when props.loading is true is also applied for :focus-visible
(i.e., add a :focus-visible CSS variant to the same selector that currently
handles the loading hover state), ensuring the button remains tabbable and the
visible text/icon switches to "Cancel" for keyboard focus as well.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f2211c49-fd03-41ac-b050-73884a88d394

📥 Commits

Reviewing files that changed from the base of the PR and between eb945d9 and 1d81788.

📒 Files selected for processing (1)

• website/client/components/Home/PackButton.vue

[gemini-code-assist]

Code Review

This pull request improves the accessibility of the PackButton component by allowing keyboard users to cancel operations. It achieves this by dynamically switching the button type to 'button' during loading and updating the click handler to process all interaction events. The reviewer suggested further enhancing the user experience by adding :focus-visible styles to provide visual feedback for keyboard navigation, matching the existing hover effects.

[gemini-code-assist]

While this change correctly enables keyboard interaction for cancelling, the visual feedback (changing the background to red and showing the 'Cancel' text) is currently only triggered by the :hover state in the CSS. For a better keyboard experience, consider applying these styles to the :focus-visible state as well, so keyboard users get the same visual cue when the button is focused during processing.