Skip to content

Show the hand cursor on the icon buttons themselves, not their wrapper - #426

Merged
CarlosNZ merged 2 commits into
mainfrom
425-fix-hand-cursor-behaviour
Oct 23, 2026
Merged

CarlosNZ merged 2 commits into
mainfrom
425-fix-hand-cursor-behaviour

Conversation

@CarlosNZ

Copy link
Copy Markdown
Owner

Fixes #425

The bug

The edit icons, confirm buttons, collapse chevron and custom buttons are real <button> elements (since the a11y work in #268). The core stylesheet set cursor: pointer on the .jer-edit-buttons / .jer-confirm-buttons wrappers and relied on the buttons inheriting it. They don't: the user-agent stylesheet gives every <button> cursor: default, and an element's own UA value beats inheritance from a parent. So the icons showed the arrow while the gaps between them showed the hand, exactly as reported.

Host pages with a global button reset masked this. The demo uses Chakra UI, whose CSS reset sets cursor: pointer on every button and [role="button"], which is why the demo site and the local demo looked fine while the reporter's plain CodeSandbox page did not.

The fix

  • cursor: pointer moves off the wrappers and onto the shared button reset rule, which covers the edit icons, the confirm OK/Cancel buttons, labelled custom buttons, the collapse chevron and the string show-more/show-less buttons.
  • An unlabelled custom button renders as a clickable div, so it gets its own one-line rule.
  • With the wrapper rule gone, the gaps between icons show the normal arrow. Only the controls themselves show the hand.
  • The stylesheet comment that claimed cursor inherits from the wrapper is corrected.

Verification

Checked in real Chrome against the local demo with Chakra's button-cursor reset rule deleted from the page, so the library's own CSS was doing the work. The wrapper and row compute to auto; every Copy / Edit / Add / Delete button, the collapse chevron, the confirm OK / Cancel buttons and a synthesised unlabelled custom-button div compute to pointer.

No Jest test, since jsdom doesn't apply user-agent styles and so can't exercise this cascade. The hidden /raw-html demo page (no Chakra provider) is the place to eyeball it.

🤖 Generated with Claude Code

CarlosNZ and others added 2 commits October 23, 2026 22:20
The edit icons, confirm buttons, collapse chevron and custom buttons are
real <button> elements, and the UA stylesheet gives every <button>
`cursor: default`, which beats inheritance from the wrapper's
`cursor: pointer`. So the icons showed the arrow while the gaps between
them showed the hand. Host pages with a global button reset (such as the
demo's Chakra UI reset) masked this, which is why the demo site looked
fine.

`cursor: pointer` is set on the button reset rule and on the unlabelled
custom-button div, and removed from the wrapper, so only the controls
themselves show the hand and the gaps show the normal arrow.

Fixes #425

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Bundle size impact

json-edit-react

Format Base raw PR raw Δ raw Base gzip PR gzip Δ gzip
esm 59.33 KB 59.36 KB 🔺 +37 B (+0.06%) 20.99 KB 21.00 KB 🔺 +10 B (+0.05%)
cjs 60.77 KB 60.81 KB 🔺 +37 B (+0.06%) 21.01 KB 21.03 KB 🔺 +13 B (+0.06%)

Measured from build/index.{cjs,esm}.js. Gzip at level 9.

@CarlosNZ
CarlosNZ merged commit a1ea6a8 into main Oct 23, 2026
2 checks passed
@CarlosNZ
CarlosNZ deleted the 425-fix-hand-cursor-behaviour branch October 23, 2026 09:27
@CarlosNZ CarlosNZ mentioned this pull request Oct 23, 2026
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.

Bug report

1 participant