Make icon controls real <button>s (#341); harden text inputs against host CSS

[CarlosNZ]

Summary

Three related changes that came out of working through #341, kept as separate commits:

1. Confirm/cancel controls are divs with onClick — should be real <button>s #341 — icon controls become real <button>s (Change div to button)
2. Text-input hardening against host-app CSS (Harden autogrow textarea line-height against host disruption)
3. A bare /raw-html demo route (Add raw html page (no Chakra) to demo)

Closes #341.

1. Real <button> icon controls (#341)

The ✓ / ✗ confirm-cancel pair and the edit/copy/delete/add icons were <div onClick> — invisible to assistive tech and not natively actionable. They're now <button type="button"> with:

• an aria-label (always present, independent of showIconTooltips) sourced from the TOOLTIP_* localisation strings, so screen readers announce them;
• tabIndex={-1}, keeping them out of the editor's field-to-field Tab flow — the field itself already commits/cancels via Enter/Escape (keyboardControls), so these are pointer affordances, not new tab stops;
• an appearance reset in src/style.css (scoped > button) so they render pixel-identical to the old divs.

Two new localisation keys (TOOLTIP_OK, TOOLTIP_CANCEL) label the confirm/cancel buttons; the edit-icon title tooltips stay gated on showIconTooltips. editConfirmRef changes type HTMLDivElement → HTMLButtonElement (internal only). Custom buttons (customButtons) stay <div>-wrapped to avoid nesting interactive content.

Breaking for consumer CSS only: selectors like .jer-confirm-buttons > div must become .jer-confirm-buttons > button. Documented in the migration guide.

2. Text-input hardening against host CSS

The string and raw-JSON editors now pin box-sizing: content-box and an explicit line-height instead of inheriting them, so a host app's global reset (* { box-sizing: border-box }) or an element-level textarea / input rule can no longer distort their layout or break AutogrowTextArea's hidden measuring <span>. content-box is the model the editor was designed against, so it's a no-op for consumers without a global reset; the raw-JSON editor's line spacing is now set explicitly (1.25em) and shifts very slightly. This also closes a latent height-measurement mismatch in the raw-JSON autogrow that existed even with no host reset.

3. /raw-html demo route

A bare JsonEditor (StarWars dataset) rendered outside ChakraProvider and any UI-framework reset — a reference for how the library looks to a plain-HTML consumer. Direct-URL only, not linked from nav. Demo-only, no changeset.

Changesets

• button-controls-accessibility.md — json-edit-react: major (the consumer CSS-selector break)
• text-input-host-css-hardening.md — json-edit-react: patch

Testing

• pnpm lint, pnpm compile, pnpm test all green (491 passing, 2 todo).
• New tests pin the button contract (semantic <button>, type="button", tabIndex={-1}, aria-labels) and the tooltip gating; existing .jer-confirm-buttons > div test selectors updated to > button.
• The button appearance reset and the box-sizing / line-height hardening were verified by rendering in headless Chrome — the demo runs under Chakra's global reset, which masks both effects, so neither shows up there.

🤖 Generated with Claude Code

[github-actions]

Bundle size impact

json-edit-react

Format	Base raw	PR raw	Δ raw	Base gzip	PR gzip	Δ gzip
esm	55.68 KB	56.47 KB	🔺 +807 B (+1.42%)	19.98 KB	20.13 KB	🔺 +156 B (+0.76%)
cjs	57.19 KB	57.97 KB	🔺 +807 B (+1.38%)	20.07 KB	20.22 KB	🔺 +157 B (+0.76%)

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