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
This commit is contained in:
JunghwanNA committed 2026-04-17 13:58:43 +09:00
1 parent 0feb09ae61
commit cea2f381cd
1 file changed
+4 -1
+4 -1
View File
@@ -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>