mirror of
https://github.com/addyosmani/agent-skills.git
synced 2026-10-26 15:05:04 +00:00
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:
1 parent
0feb09ae61
commit
cea2f381cd
1 file changed
+4
-1
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user