From cea2f381cd4b964402e2c43353cb00c5c27ef6dd Mon Sep 17 00:00:00 2001
From: JunghwanNA <70629228+shaun0927@users.noreply.github.com>
Date: Fri, 17 Apr 2026 13:58:43 +0900
Subject: [PATCH] Align the custom button example with native Space activation
 timing

The maintainer confirmed the original preventDefault fix was mergeable, but also pointed out that the example could better mirror native button behavior. This follow-up keeps the docs-only scope while making the example clearer: Enter stays on keydown, Space only suppresses default scrolling on keydown, and activation happens on keyup.

Constraint: Keep the change limited to the existing accessibility example in the frontend UI skill
Rejected: Leave the first patch as-is and wait | low-cost maintainer suggestion that improves behavioral fidelity
Confidence: high
Scope-risk: narrow
Reversibility: clean
Directive: For custom role=button examples, document Space activation in a way that does not reintroduce page scrolling or drift from native button timing without explanation
Tested: git diff --check; manual browser/WKWebView reasoning against the example semantics
Not-tested: Cross-browser live rerun after the keyup refinement
---
 skills/frontend-ui-engineering/SKILL.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/skills/frontend-ui-engineering/SKILL.md b/skills/frontend-ui-engineering/SKILL.md
index f5cd0363..d4973d4a 100644
--- a/skills/frontend-ui-engineering/SKILL.md
+++ b/skills/frontend-ui-engineering/SKILL.md
@@ -174,8 +174,11 @@ Every component must meet these standards:
 <div onClick={handleClick}>Click me</div>               // ✗ Not focusable
 <div role="button" tabIndex={0} onClick={handleClick}    // ✓ But prefer <button>
      onKeyDown={e => {
+       if (e.key === 'Enter') handleClick();
        if (e.key === ' ') e.preventDefault();
-       if (e.key === 'Enter' || e.key === ' ') handleClick();
+     }}
+     onKeyUp={e => {
+       if (e.key === ' ') handleClick();
      }}>
   Click me
 </div>