From 619c6559d2cc28b5ffecd3509c0e3bb95530c5ed Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Tue, 16 Jun 2026 09:35:25 +1200
Subject: [PATCH 1/5] Change div to button

---
 .changeset/button-controls-accessibility.md |  7 ++
 README.md                                   |  6 +-
 migration-guide.md                          | 16 ++++
 src/ButtonPanels.tsx                        | 81 +++++++++++++++++----
 src/CollectionNode.tsx                      |  2 +
 src/JsonEditor.tsx                          |  2 +-
 src/ValueNodeWrapper.tsx                    |  2 +
 src/localisation.ts                         |  2 +
 src/style.css                               | 19 +++++
 src/types.ts                                |  2 +-
 test/JsonEditor.test.tsx                    | 61 +++++++++++++++-
 test/customNode.test.tsx                    | 28 +++----
 12 files changed, 191 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/button-controls-accessibility.md

diff --git a/.changeset/button-controls-accessibility.md b/.changeset/button-controls-accessibility.md
new file mode 100644
index 00000000..38dc023b
--- /dev/null
+++ b/.changeset/button-controls-accessibility.md
@@ -0,0 +1,7 @@
+---
+'json-edit-react': major
+---
+
+The clickable icon controls — the ✓ / ✗ confirm/cancel pair and the edit/copy/delete/add icons — are now real `<button>` elements instead of `<div onClick>`, so assistive tech announces them as actionable and reads an `aria-label` (always present, independent of `showIconTooltips`). Their appearance is unchanged (the default button chrome is reset in the bundled CSS) and they carry `tabIndex={-1}`, so the editor's field-to-field Tab navigation is unaffected. Two new localisation keys (`TOOLTIP_OK`, `TOOLTIP_CANCEL`) provide the confirm/cancel labels.
+
+Breaking only for custom CSS that targets these controls by tag name: a selector like `.jer-confirm-buttons > div` must become `.jer-confirm-buttons > button`. Wrapper-class and icon selectors are unaffected, and consumer-supplied `customButtons` remain `<div>`-wrapped.
diff --git a/README.md b/README.md
index 1be3a051..670e6e11 100644
--- a/README.md
+++ b/README.md
@@ -1024,11 +1024,15 @@ Localise your implementation (or just customise the default messages) by passing
   DEFAULT_NEW_KEY: 'key',
   SHOW_LESS: '(Show less)',
   EMPTY_STRING: '<empty string>' // Displayed when property key is ""
-  // Tooltips only appear if `showIconTooltips` prop is enabled
+  // These label the icon controls (which are <button>s) for assistive tech via
+  // `aria-label`, and also show as visible tooltips when the `showIconTooltips`
+  // prop is enabled.
   TOOLTIP_COPY: 'Copy to clipboard',
   TOOLTIP_EDIT: 'Edit',
   TOOLTIP_DELETE: 'Delete',
   TOOLTIP_ADD: 'Add',
+  TOOLTIP_OK: 'OK',
+  TOOLTIP_CANCEL: 'Cancel',
 }
 ```
 
diff --git a/migration-guide.md b/migration-guide.md
index 225fac71..a5c8f7e2 100644
--- a/migration-guide.md
+++ b/migration-guide.md
@@ -688,6 +688,22 @@ If you used `toPathString`'s output as an HTML `name` or `id` attribute (e.g. in
 
 The exported `ThemeStyles` type is now `Partial<Record<ThemeableElement, …>>` (every key optional). If you imported it and relied on it being a *total* record, it's now optional-per-key — more permissive, so most code needs no change. See [Themes & Styles](README.md#themes--styles) in the README.
 
+### Icon controls are now `<button>` elements
+
+The clickable icon controls — the ✓ / ✗ confirm/cancel pair and the edit/copy/delete/add icons — are now real `<button>` elements instead of `<div>`s, so assistive tech announces them as actionable and reads their `aria-label`. Their appearance is unchanged (the default button chrome is reset in the bundled CSS), and they carry `tabIndex={-1}` so the editor's existing field-to-field Tab navigation is unaffected.
+
+The only thing to act on is **custom CSS that targets these controls by tag name**. If you styled them via a `div` selector, switch it to `button`:
+
+```css
+/* Before (v1) */
+.jer-confirm-buttons > div { … }
+
+/* After (v2) */
+.jer-confirm-buttons > button { … }
+```
+
+Selectors that target the wrapper classes (`.jer-confirm-buttons`, `.jer-edit-buttons`) or the icons themselves are unaffected. Consumer-supplied custom buttons (`customButtons`) remain wrapped in a `<div>`, so their markup is unchanged.
+
 ---
 
 ## Need help?
diff --git a/src/ButtonPanels.tsx b/src/ButtonPanels.tsx
index 7b7dd1f9..cf292b21 100644
--- a/src/ButtonPanels.tsx
+++ b/src/ButtonPanels.tsx
@@ -33,7 +33,7 @@ interface EditButtonProps {
     eventMap: Partial<Record<keyof KeyboardControlsFull, () => void>>
   ) => void
   getNewKeyOptions?: (nodeDate: NodeData) => string[] | null | void
-  editConfirmRef: React.RefObject<HTMLDivElement | null>
+  editConfirmRef: React.RefObject<HTMLButtonElement | null>
   jsonStringify: (
     data: JsonData,
     // eslint-disable-next-line
@@ -184,44 +184,64 @@ export const EditButtons: React.FC<EditButtonProps> = ({
       onClick={(e) => e.stopPropagation()}
     >
       {showClipboardButton && (
-        <div
+        // tabIndex={-1} keeps the control out of the editor's field-to-field
+        // Tab flow (owned by `keyboardControls`) while keeping the native
+        // button role + the aria-label for assistive tech. `aria-label` is
+        // unconditional; `title` (the visible tooltip) stays gated on
+        // `showIconTooltips`.
+        <button
+          type="button"
+          tabIndex={-1}
           onClick={handleCopy}
           className="jer-copy-pulse"
+          aria-label={translate('TOOLTIP_COPY', nodeData)}
           title={showIconTooltips ? translate('TOOLTIP_COPY', nodeData) : ''}
         >
           <Icon name="copy" nodeData={nodeData} />
-        </div>
+        </button>
       )}
       {startEdit && (
-        <div
+        <button
+          type="button"
+          tabIndex={-1}
           onClick={startEdit}
+          aria-label={translate('TOOLTIP_EDIT', nodeData)}
           title={showIconTooltips ? translate('TOOLTIP_EDIT', nodeData) : ''}
         >
           <Icon name="edit" nodeData={nodeData} />
-        </div>
+        </button>
       )}
       {handleDelete && (
-        <div
+        <button
+          type="button"
+          tabIndex={-1}
           onClick={handleDelete}
+          aria-label={translate('TOOLTIP_DELETE', nodeData)}
           title={showIconTooltips ? translate('TOOLTIP_DELETE', nodeData) : ''}
         >
           <Icon name="delete" nodeData={nodeData} />
-        </div>
+        </button>
       )}
       {handleAdd && (
-        <div
+        <button
+          type="button"
+          tabIndex={-1}
           onClick={() => {
             // Objects open a key-entry session; arrays add a default value
             // immediately (no key to fill — a one-shot, as before).
             if (type === 'object') openAdd()
             else handleAdd('')
           }}
+          aria-label={translate('TOOLTIP_ADD', nodeData)}
           title={showIconTooltips ? translate('TOOLTIP_ADD', nodeData) : ''}
         >
           <Icon name="add" nodeData={nodeData} />
-        </div>
+        </button>
       )}
       {customButtons?.map(({ Element, onClick }, i) => (
+        // Custom buttons stay <div>s: the inner `Element` is consumer-owned and
+        // may itself be interactive, so wrapping it in a <button> risks nested
+        // interactive content.
         <div key={i} onClick={(e) => onClick && onClick(nodeData, e)}>
           <Element nodeData={nodeData} />
         </div>
@@ -260,6 +280,8 @@ export const EditButtons: React.FC<EditButtonProps> = ({
             onOk={() => commitAdd()}
             onCancel={() => cancel()}
             nodeData={nodeData}
+            translate={translate}
+            showIconTooltips={showIconTooltips}
             editConfirmRef={editConfirmRef}
             hideOk={hasKeyOptionsList}
           />
@@ -273,20 +295,47 @@ export const InputButtons: React.FC<{
   onOk: () => void
   onCancel: () => void
   nodeData: NodeData
-  editConfirmRef: React.RefObject<HTMLDivElement | null>
+  translate: TranslateFunction
+  showIconTooltips: boolean
+  editConfirmRef: React.RefObject<HTMLButtonElement | null>
   hideOk?: boolean
-}> = ({ onOk, onCancel, nodeData, editConfirmRef, hideOk = false }) => {
+}> = ({
+  onOk,
+  onCancel,
+  nodeData,
+  translate,
+  showIconTooltips,
+  editConfirmRef,
+  hideOk = false,
+}) => {
+  // tabIndex={-1}: the field itself commits/cancels via Enter/Escape
+  // (`keyboardControls`), so these are pointer affordances — kept out of the
+  // Tab order, but real <button>s for screen-reader semantics. `aria-label` is
+  // unconditional; `title` (the visible tooltip) stays gated on
+  // `showIconTooltips`, matching the edit icons.
   return (
     <div className="jer-confirm-buttons">
       {!hideOk && (
-        // Pass an anonymous function to prevent passing event to onOk
-        <div onClick={onOk} ref={editConfirmRef as React.RefObject<HTMLDivElement>}>
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={onOk}
+          aria-label={translate('TOOLTIP_OK', nodeData)}
+          title={showIconTooltips ? translate('TOOLTIP_OK', nodeData) : ''}
+          ref={editConfirmRef as React.RefObject<HTMLButtonElement>}
+        >
           <Icon name="ok" nodeData={nodeData} />
-        </div>
+        </button>
       )}
-      <div onClick={onCancel}>
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={onCancel}
+        aria-label={translate('TOOLTIP_CANCEL', nodeData)}
+        title={showIconTooltips ? translate('TOOLTIP_CANCEL', nodeData) : ''}
+      >
         <Icon name="cancel" nodeData={nodeData} />
-      </div>
+      </button>
     </div>
   )
 }
diff --git a/src/CollectionNode.tsx b/src/CollectionNode.tsx
index efcaf957..6474ae9b 100644
--- a/src/CollectionNode.tsx
+++ b/src/CollectionNode.tsx
@@ -446,6 +446,8 @@ const CollectionNodeBase: React.FC<CollectionNodeProps> = (props) => {
           onOk={handleEdit}
           onCancel={handleCancel}
           nodeData={nodeData}
+          translate={translate}
+          showIconTooltips={showIconTooltips}
           editConfirmRef={editConfirmRef}
         />
       </div>
diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx
index be534e9f..1a360fb7 100644
--- a/src/JsonEditor.tsx
+++ b/src/JsonEditor.tsx
@@ -539,7 +539,7 @@ const Editor: React.FC<
     }
   }, [customNodeDefinitions, jsonParse])
 
-  const editConfirmRef = useRef<HTMLDivElement>(null)
+  const editConfirmRef = useRef<HTMLButtonElement>(null)
   const { setCollapseState } = useCollapse()
 
   // Common "sort" method for ordering nodes, based on the `sortKeys` prop
diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx
index aeb5384e..d85008f7 100644
--- a/src/ValueNodeWrapper.tsx
+++ b/src/ValueNodeWrapper.tsx
@@ -517,6 +517,8 @@ const ValueNodeWrapperBase: React.FC<ValueNodeProps> = (props) => {
               onOk={handleEdit}
               onCancel={handleCancel}
               nodeData={nodeData}
+              translate={translate}
+              showIconTooltips={showIconTooltips}
               editConfirmRef={editConfirmRef}
             />
           ) : (
diff --git a/src/localisation.ts b/src/localisation.ts
index 5b3bca2d..0ac1bdff 100644
--- a/src/localisation.ts
+++ b/src/localisation.ts
@@ -22,6 +22,8 @@ const localisedStrings = {
   TOOLTIP_EDIT: 'Edit',
   TOOLTIP_DELETE: 'Delete',
   TOOLTIP_ADD: 'Add',
+  TOOLTIP_OK: 'OK',
+  TOOLTIP_CANCEL: 'Cancel',
 }
 
 export type LocalisedStrings = typeof localisedStrings
diff --git a/src/style.css b/src/style.css
index 464cc75a..1f2f9c75 100644
--- a/src/style.css
+++ b/src/style.css
@@ -334,6 +334,25 @@ select:focus + .focus {
   height: 1em;
 }
 
+/* The icon controls are real <button>s for accessibility. This neutralises the
+   user-agent button chrome so they render identically to surrounding elements.
+   Only properties a <button> won't otherwise take from context are listed:
+   background/border/margin/padding/appearance don't inherit, and form controls
+   are UA-special-cased so `font`/`color` must be re-asserted (`font: inherit`
+   is load-bearing — the icons are sized in `em`). `cursor` inherits from the
+   wrapper rule above, whose flexbox also centres the button, so neither is
+   needed here. Scoped with `>` so it never leaks into custom-button content. */
+.jer-edit-buttons > button,
+.jer-confirm-buttons > button {
+  appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
 .jer-input-buttons {
   gap: 0.4em;
 }
diff --git a/src/types.ts b/src/types.ts
index cdb88867..f59cf9da 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -465,7 +465,7 @@ interface BaseNodeProps {
     e: React.KeyboardEvent,
     eventMap: Partial<Record<keyof KeyboardControlsFull, () => void>>
   ) => void
-  editConfirmRef: React.RefObject<HTMLDivElement | null>
+  editConfirmRef: React.RefObject<HTMLButtonElement | null>
   jsonStringify: (
     data: JsonData,
     // eslint-disable-next-line
diff --git a/test/JsonEditor.test.tsx b/test/JsonEditor.test.tsx
index 2b3b9d7c..10d68def 100644
--- a/test/JsonEditor.test.tsx
+++ b/test/JsonEditor.test.tsx
@@ -553,7 +553,7 @@ describe('JsonEditor — edit flow', () => {
     await user.type(input, 'hi')
 
     // .jer-confirm-buttons holds [OK, Cancel] in DOM order
-    const okBtn = container.querySelectorAll('.jer-confirm-buttons > div')[0]
+    const okBtn = container.querySelectorAll('.jer-confirm-buttons > button')[0]
     await user.click(okBtn)
 
     expect(setData).toHaveBeenCalledTimes(1)
@@ -571,7 +571,7 @@ describe('JsonEditor — edit flow', () => {
     await user.clear(input)
     await user.type(input, 'discard-me')
 
-    const cancelBtn = container.querySelectorAll('.jer-confirm-buttons > div')[1]
+    const cancelBtn = container.querySelectorAll('.jer-confirm-buttons > button')[1]
     await user.click(cancelBtn)
 
     expect(setData).not.toHaveBeenCalled()
@@ -579,6 +579,59 @@ describe('JsonEditor — edit flow', () => {
     expect(screen.getByText('"hello"')).toBeInTheDocument()
   })
 
+  // The clickable controls are real <button>s (not <div onClick>) so assistive
+  // tech announces them as actionable and labels them. They carry tabIndex={-1}
+  // to stay out of the editor's field-to-field Tab flow (Enter/Escape on the
+  // field itself drive confirm/cancel).
+  test('confirm/cancel controls are labelled <button>s kept out of the Tab order', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<JsonEditor data={{ greeting: 'hello' }} setData={noop} />)
+
+    await user.dblClick(screen.getByText('"hello"'))
+
+    const confirmButtons = container.querySelectorAll('.jer-confirm-buttons > button')
+    expect(confirmButtons).toHaveLength(2)
+    confirmButtons.forEach((btn) => {
+      expect(btn.tagName).toBe('BUTTON')
+      expect(btn).toHaveAttribute('type', 'button')
+      expect(btn).toHaveAttribute('tabindex', '-1')
+    })
+    expect(confirmButtons[0]).toHaveAttribute('aria-label', 'OK')
+    expect(confirmButtons[1]).toHaveAttribute('aria-label', 'Cancel')
+    // No visible tooltip by default (showIconTooltips is off)
+    expect(confirmButtons[0]).toHaveAttribute('title', '')
+    expect(confirmButtons[1]).toHaveAttribute('title', '')
+  })
+
+  // Regression: the confirm/cancel buttons must honour `showIconTooltips` the
+  // same way the edit icons do — the `title` (visible browser tooltip), gated
+  // on the prop, is separate from the always-present `aria-label`.
+  test('confirm/cancel buttons show a title tooltip when showIconTooltips is enabled', async () => {
+    const user = userEvent.setup()
+    const { container } = render(
+      <JsonEditor data={{ greeting: 'hello' }} setData={noop} showIconTooltips />
+    )
+
+    await user.dblClick(screen.getByText('"hello"'))
+
+    const confirmButtons = container.querySelectorAll('.jer-confirm-buttons > button')
+    expect(confirmButtons[0]).toHaveAttribute('title', 'OK')
+    expect(confirmButtons[1]).toHaveAttribute('title', 'Cancel')
+  })
+
+  test('edit/delete icon controls are labelled <button>s kept out of the Tab order', () => {
+    const { container } = render(<JsonEditor data={{ greeting: 'hello' }} setData={noop} />)
+
+    const editButton = container.querySelector('[aria-label="Edit"]') as HTMLElement
+    const deleteButton = container.querySelector('[aria-label="Delete"]') as HTMLElement
+    ;[editButton, deleteButton].forEach((btn) => {
+      expect(btn).not.toBeNull()
+      expect(btn.tagName).toBe('BUTTON')
+      expect(btn).toHaveAttribute('type', 'button')
+      expect(btn).toHaveAttribute('tabindex', '-1')
+    })
+  })
+
   // Regression: a `draggable` ancestor — not just the immediate parent, ANY
   // ancestor — suppresses native mouse text-selection / cursor-positioning
   // inside a nested input (Chromium starts a drag on `mousedown` instead). So
@@ -729,7 +782,7 @@ describe('JsonEditor — structural mutations', () => {
     // Commit (OK button) writes the converted default. 'hello' → number is NaN,
     // which the editor falls back to 0. .jer-confirm-buttons holds [OK,
     // Cancel].
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledTimes(1)
     expect(setData).toHaveBeenCalledWith({ x: 0 })
   })
@@ -1517,7 +1570,7 @@ describe('JsonEditor — restrictions and callbacks', () => {
 
     // Committing (the OK button) submits the coerced value, which onUpdate
     // rejects. .jer-confirm-buttons holds [OK, Cancel] in DOM order.
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(onUpdate).toHaveBeenCalled()
 
     // The rejection reverts the value and closes the edit session.
diff --git a/test/customNode.test.tsx b/test/customNode.test.tsx
index 175c597b..09d06f40 100644
--- a/test/customNode.test.tsx
+++ b/test/customNode.test.tsx
@@ -361,7 +361,7 @@ describe('CustomNode — switching type away mid-edit', () => {
     expect(input.value).toBe('')
 
     await user.type(input, 'hello')
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: 'hello' })
   })
 
@@ -384,7 +384,7 @@ describe('CustomNode — switching type away mid-edit', () => {
     expect(input).not.toBeNull()
     expect(input.value).toBe('0')
 
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: 0 })
   })
 
@@ -517,7 +517,7 @@ describe('CustomNode — toStandardType seeds the type-switch buffer', () => {
     expect(input).not.toBeNull()
     expect(input.value).toBe('https://example.com')
 
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: 'https://example.com' })
   })
 
@@ -637,7 +637,7 @@ describe('CustomNode — fromStandardType commit transform', () => {
     )
     const input = await startEdit(user)
     setBuffer(input, '123')
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: BigInt(123) })
   })
 
@@ -667,7 +667,7 @@ describe('CustomNode — fromStandardType commit transform', () => {
     )
     const input = await startEdit(user)
     setBuffer(input, 'abc')
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
 
     expect(setData).not.toHaveBeenCalled()
     expect(screen.getByTestId('custom-input')).toBeInTheDocument()
@@ -677,7 +677,7 @@ describe('CustomNode — fromStandardType commit transform', () => {
     expect(container.querySelector('.jer-error-slug')).toHaveTextContent('Invalid BigInt')
 
     setBuffer(input, '42')
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: BigInt(42) })
     expect(container.querySelector('.jer-error-slug')).toBeNull()
   })
@@ -690,7 +690,7 @@ describe('CustomNode — fromStandardType commit transform', () => {
     )
     const input = await startEdit(user)
     setBuffer(input, 'abc')
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     fireEvent.keyDown(screen.getByTestId('custom-input'), { key: 'Escape' })
 
     expect(setData).not.toHaveBeenCalled()
@@ -710,7 +710,7 @@ describe('CustomNode — fromStandardType commit transform', () => {
       />
     )
     await startEdit(user)
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(onUpdate).not.toHaveBeenCalled()
     expect(screen.queryByTestId('custom-input')).toBeNull()
   })
@@ -817,7 +817,7 @@ describe('CustomNode — fromStandardType commit transform', () => {
     await user.dblClick(screen.getByTestId('custom'))
     fireEvent.change(screen.getByTestId('field-text'), { target: { value: 'new text' } })
     fireEvent.change(screen.getByTestId('field-url'), { target: { value: 'new url' } })
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: { text: 'new text', url: 'new url' } })
   })
 })
@@ -899,7 +899,7 @@ describe('CustomNode — editOnTypeSwitch (deferred to-custom switch)', () => {
     await user.dblClick(screen.getByText('"hello"'))
     await switchTo(user, 'BigInt')
     fireEvent.change(screen.getByTestId('custom-input'), { target: { value: '123' } })
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
 
     expect(setData).toHaveBeenCalledWith({ x: BigInt(123) })
     expect(onUpdate).toHaveBeenCalledTimes(1)
@@ -984,7 +984,7 @@ describe('CustomNode — editOnTypeSwitch (deferred to-custom switch)', () => {
     expect((screen.getByTestId('custom-input') as HTMLInputElement).value).toBe('MARK')
     expect(setData).not.toHaveBeenCalled()
 
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: 'MARK' })
   })
 
@@ -1021,7 +1021,7 @@ describe('CustomNode — editOnTypeSwitch (deferred to-custom switch)', () => {
     await switchTo(user, 'Obj')
     expect(setDataSpy).not.toHaveBeenCalled()
 
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setDataSpy).toHaveBeenCalledWith({ x: { a: 1, b: 2 } })
     // `collapse={1}` would normally hide the new collection's contents — the
     // switch-commit launches it expanded, matching the instant-commit path.
@@ -1077,7 +1077,7 @@ describe('CustomNode — editOnTypeSwitch (deferred to-custom switch)', () => {
     expect(setData).not.toHaveBeenCalled()
 
     fireEvent.change(screen.getByTestId('custom-input'), { target: { value: '123' } })
-    await user.click(container.querySelectorAll('.jer-confirm-buttons > div')[0])
+    await user.click(container.querySelectorAll('.jer-confirm-buttons > button')[0])
     expect(setData).toHaveBeenCalledWith({ x: BigInt(123) })
   })
 
@@ -1255,7 +1255,7 @@ describe('CustomNode — JSON serialization hooks', () => {
     // edit the root object as raw JSON text
     await user.click(screen.getAllByTitle('Edit')[0])
     fireEvent.change(screen.getByRole('textbox'), { target: { value: '{"x":"PLACEHOLDER"}' } })
-    await user.click(container.querySelector('.jer-confirm-buttons > div') as HTMLElement)
+    await user.click(container.querySelector('.jer-confirm-buttons > button') as HTMLElement)
     await waitFor(() => expect(setData).toHaveBeenCalledWith({ x: 'REVIVED' }))
   })
 })

From 17f0f76cf2545914a61b04fd7a5b2eafbaf91640 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Tue, 16 Jun 2026 09:43:16 +1200
Subject: [PATCH 2/5] Add raw html page (no Chakra) to demo

---
 demo/src/RawHtmlPage.tsx | 27 +++++++++++++++++++++++++++
 demo/src/main.tsx        | 13 +++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 demo/src/RawHtmlPage.tsx

diff --git a/demo/src/RawHtmlPage.tsx b/demo/src/RawHtmlPage.tsx
new file mode 100644
index 00000000..c90e1b6d
--- /dev/null
+++ b/demo/src/RawHtmlPage.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { JsonEditor, type JsonData } from 'json-edit-react'
+import { data } from './demoData/data'
+
+// A deliberately bare page: rendered OUTSIDE ChakraProvider (unlike every other
+// route) and with no UI-framework CSS reset in scope — only the editor's own
+// bundled styles apply, plus index.css's body font. This is what a consumer who
+// drops `JsonEditor` onto a plain HTML page sees, so it's a handy reference for
+// checking the library's self-contained styling (e.g. the <button> appearance
+// reset in core's style.css). Reachable at /raw-html.
+export const RawHtmlPage = () => {
+  const [jsonData, setJsonData] = useState<JsonData>(data.starWars as JsonData)
+
+  return (
+    <div style={{ padding: '2em', maxWidth: 800, margin: '0 auto' }}>
+      <h1>Bare JsonEditor — no UI library</h1>
+      <p>
+        This page is rendered outside <code>ChakraProvider</code> and any UI-framework CSS reset, so
+        it shows how <code>JsonEditor</code> looks with only its own bundled styles — the
+        bare-consumer experience.
+      </p>
+      <JsonEditor data={jsonData} setData={setJsonData} collapse={2} />
+    </div>
+  )
+}
+
+export default RawHtmlPage
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
index 91ad76f7..5528a365 100644
--- a/demo/src/main.tsx
+++ b/demo/src/main.tsx
@@ -21,6 +21,13 @@ const ExamplesIndex = lazy(() =>
   import('./examples/ExamplesIndex').then((m) => ({ default: m.ExamplesIndex }))
 )
 
+// A bare editor rendered with no ChakraProvider / UI-framework reset, as a
+// reference for how the library looks for a plain-HTML consumer. Lazy-loaded so
+// it stays out of the main entry chunk.
+const RawHtmlPage = lazy(() =>
+  import('./RawHtmlPage').then((m) => ({ default: m.RawHtmlPage }))
+)
+
 const exampleFallback = (
   <Flex h="100vh" justify="center" align="center">
     <Spinner />
@@ -52,6 +59,12 @@ createRoot(document.getElementById('root')!).render(
             </Suspense>
           </ChakraProvider>
         </Route>
+        <Route path="/raw-html">
+          {/* Intentionally NOT wrapped in ChakraProvider — see RawHtmlPage. */}
+          <Suspense fallback={<div style={{ padding: 40, textAlign: 'center' }}>Loading…</div>}>
+            <RawHtmlPage />
+          </Suspense>
+        </Route>
         <Route>
           <ChakraProvider theme={theme}>
             <App />

From 1651800a550ff3533a95a234c1652f34b27b40ee Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Tue, 16 Jun 2026 10:14:32 +1200
Subject: [PATCH 3/5] Harden autogrow textarea line-height against host
 disruption

---
 .changeset/text-input-host-css-hardening.md |  7 +++++++
 src/style.css                               | 10 ++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 .changeset/text-input-host-css-hardening.md

diff --git a/.changeset/text-input-host-css-hardening.md b/.changeset/text-input-host-css-hardening.md
new file mode 100644
index 00000000..92e9994e
--- /dev/null
+++ b/.changeset/text-input-host-css-hardening.md
@@ -0,0 +1,7 @@
+---
+'json-edit-react': patch
+---
+
+Harden the text-editing fields against host-app CSS. The string and raw-JSON editors now pin `box-sizing` and an explicit `line-height` instead of leaving them to inherit, so a consuming app's global reset (e.g. `* { box-sizing: border-box }`) or an element-level `textarea` / `input` rule can no longer distort their layout or text wrapping. This also keeps the auto-growing textarea's hidden measuring element locked to the real `<textarea>`, fixing a latent case where the raw-JSON editor could mis-measure its height even with no host reset present.
+
+The pinned `box-sizing` is `content-box` (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 and may shift very slightly.
diff --git a/src/style.css b/src/style.css
index 1f2f9c75..e7732991 100644
--- a/src/style.css
+++ b/src/style.css
@@ -190,6 +190,12 @@ select:focus + .focus {
 }
 
 .jer-collection-text-area {
+  /* `box-sizing` and `line-height` are pinned (not just inherited) so the
+     AutogrowTextArea's real <textarea> and its hidden measuring <span> can't
+     drift apart when a host rule targets `textarea`/`input` or applies a global
+     `* { box-sizing: border-box }` reset. content-box is the model the sizing
+     was designed against, so consumers without a reset see no change. */
+  box-sizing: content-box;
   resize: both;
   padding-top: 0.2em;
   padding-left: 0.5em;
@@ -197,6 +203,7 @@ select:focus + .focus {
   padding-bottom: 0;
   overflow: hidden;
   max-height: 40em;
+  line-height: 1.25em;
   font-family: inherit;
   font-size: 0.85em;
 }
@@ -266,6 +273,9 @@ select:focus + .focus {
 }
 
 .jer-input-text {
+  /* See `.jer-collection-text-area` — pinned so the autogrow <textarea> and its
+     measuring <span> stay in sync under a host CSS reset. */
+  box-sizing: content-box;
   resize: none;
   margin: 0;
   height: 1.4em;

From 6ed5f12eea67e1dadebf03ab5a25e34db3dc084b Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Tue, 16 Jun 2026 10:40:10 +1200
Subject: [PATCH 4/5] Migration guide: add TOOLTIP_OK/CANCEL to the new-keys
 section

Broaden the "New localisation keys" section to cover the confirm/cancel
button labels added in this PR, and cross-reference ITEMS_FILTERED to
its existing home under the showCollectionCount change rather than
duplicating it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 migration-guide.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/migration-guide.md b/migration-guide.md
index a5c8f7e2..45aed412 100644
--- a/migration-guide.md
+++ b/migration-guide.md
@@ -446,21 +446,25 @@ Both receive the standard flat `NodeData` — `currentData` / `currentValue` / `
 
 `JerError` keeps its name and `{ code, message }` shape. What changes is its `code`: it's now the exported `JerErrorCode` union, which gains three forward-looking members — `RENAME_ERROR`, `MOVE_ERROR` and `CLIPBOARD_ERROR` — covering the new rename/move rejection and clipboard-failure paths. The additions are backward-compatible; you only need to act if you exhaustively `switch` on `error.code` and want to handle the new cases. (`onError`'s own payload also moves to flat `NodeData` — see [Observers reshaped](#10-observers-reshaped-oneditevent-lifecycle-stream-flat-onerror--oncollapse-oncopy-error).)
 
-### New localisation keys: `ERROR_RENAME` / `ERROR_MOVE`
+### New localisation keys
 
-Rejected `rename` and `move` operations now show operation-specific messages (`'Rename unsuccessful'` / `'Move unsuccessful'`) instead of the generic `'Update unsuccessful'`, mirroring `ERROR_ADD` / `ERROR_DELETE`. Their `onError` codes are likewise `RENAME_ERROR` / `MOVE_ERROR` (additive members of `JerErrorCode`).
+v2 adds several localisation keys. None require action — a `translations` object doesn't have to be exhaustive, so any key you don't define falls back to its English default. But if you ship a localised `translations` object and want full coverage, add them:
 
-No action is strictly required — a `translations` object doesn't have to be exhaustive, so any key you don't define falls back to the English default. But if you ship a localised `translations` object and want these two messages translated too, add the new keys:
+- `ERROR_RENAME` / `ERROR_MOVE` — rejected `rename` and `move` operations now show operation-specific messages (`'Rename unsuccessful'` / `'Move unsuccessful'`) instead of the generic `'Update unsuccessful'`, mirroring `ERROR_ADD` / `ERROR_DELETE`. (Their `onError` codes are likewise `RENAME_ERROR` / `MOVE_ERROR` — additive members of `JerErrorCode`.)
+- `TOOLTIP_OK` / `TOOLTIP_CANCEL` — labels for the ✓ / ✗ confirm and cancel controls, now that those are real `<button>`s. Always applied as `aria-label`s, and shown as visible tooltips when `showIconTooltips` is enabled.
 
 ```diff
   translations={{
     // ...existing keys
-    ERROR_UPDATE: '…',
 +   ERROR_RENAME: '…',
 +   ERROR_MOVE: '…',
++   TOOLTIP_OK: '…',
++   TOOLTIP_CANCEL: '…',
   }}
 ```
 
+One further new key, `ITEMS_FILTERED`, is covered alongside the `showCollectionCount` default change — see [Display / config prop renames](#7-display--config-prop-renames).
+
 ### Removed localisation key: `DEFAULT_STRING`
 
 The `DEFAULT_STRING` key (`'New data!'`) is gone — if your `translations` object defines it, remove it (TypeScript rejects unknown keys). It was the placeholder substituted into the edit buffer when switching a custom node's type to `string`; type-switching now converts the node's actual value instead (e.g. a `null`/`undefined` source becomes an empty string), so the placeholder no longer exists.

From bb0fae69e13db20eb159726c1a22b4b08ba91e25 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Tue, 16 Jun 2026 10:49:43 +1200
Subject: [PATCH 5/5] Update RawHtmlPage.tsx

---
 demo/src/RawHtmlPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/RawHtmlPage.tsx b/demo/src/RawHtmlPage.tsx
index c90e1b6d..a88fad58 100644
--- a/demo/src/RawHtmlPage.tsx
+++ b/demo/src/RawHtmlPage.tsx
@@ -19,7 +19,7 @@ export const RawHtmlPage = () => {
         it shows how <code>JsonEditor</code> looks with only its own bundled styles — the
         bare-consumer experience.
       </p>
-      <JsonEditor data={jsonData} setData={setJsonData} collapse={2} />
+      <JsonEditor data={jsonData} setData={setJsonData} collapse={2} showIconTooltips />
     </div>
   )
 }