From e8b07a9c11de2279868369216fbdeae893288e9b Mon Sep 17 00:00:00 2001
From: Michael Adsit <tisdadd@gmail.com>
Date: Tue, 3 Sep 2024 17:04:26 -0500
Subject: [PATCH 1/3] Initial Basic Accessibility Added

---
 packages/react-json-tree/src/ItemRange.tsx    |  4 +++-
 packages/react-json-tree/src/JSONArrow.tsx    | 10 ++++++---
 .../react-json-tree/src/JSONNestedNode.tsx    |  8 ++++++-
 .../src/createStylingFromTheme.ts             |  5 +++++
 .../src/getAriaPropsFromKeyPath.ts            | 21 +++++++++++++++++++
 5 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-json-tree/src/getAriaPropsFromKeyPath.ts

diff --git a/packages/react-json-tree/src/ItemRange.tsx b/packages/react-json-tree/src/ItemRange.tsx
index a051a01598..ac17679d65 100644
--- a/packages/react-json-tree/src/ItemRange.tsx
+++ b/packages/react-json-tree/src/ItemRange.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import JSONArrow from './JSONArrow.js';
-import type { CircularCache, CommonInternalProps } from './types.js';
+import type { CircularCache, CommonInternalProps, KeyPath } from './types.js';
 
 interface Props extends CommonInternalProps {
   data: unknown;
@@ -10,6 +10,7 @@ interface Props extends CommonInternalProps {
   renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;
   circularCache: CircularCache;
   level: number;
+  keyPath: KeyPath;
 }
 
 export default function ItemRange(props: Props) {
@@ -32,6 +33,7 @@ export default function ItemRange(props: Props) {
         expanded={false}
         onClick={handleClick}
         arrowStyle="double"
+        ariaLabel={`Expand Array from ${from} to ${to}`}
       />
       {`${from} ... ${to}`}
     </div>
diff --git a/packages/react-json-tree/src/JSONArrow.tsx b/packages/react-json-tree/src/JSONArrow.tsx
index e00fe456c4..e04f6c9525 100644
--- a/packages/react-json-tree/src/JSONArrow.tsx
+++ b/packages/react-json-tree/src/JSONArrow.tsx
@@ -6,7 +6,9 @@ interface Props {
   arrowStyle?: 'single' | 'double';
   expanded: boolean;
   nodeType: string;
-  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  ariaControls?: string;
+  ariaLabel?: string
 }
 
 export default function JSONArrow({
@@ -15,15 +17,17 @@ export default function JSONArrow({
   expanded,
   nodeType,
   onClick,
+  ariaControls,
+  ariaLabel
 }: Props) {
   return (
-    <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
+    <button {...styling('arrowContainer', arrowStyle)} aria-label={ariaLabel} aria-expanded={expanded} aria-controls={ariaControls} onClick={onClick}>
       <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
         {'\u25B6'}
         {arrowStyle === 'double' && (
           <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
         )}
       </div>
-    </div>
+    </button>
   );
 }
diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx
index fbc9a47b61..4cd9605820 100644
--- a/packages/react-json-tree/src/JSONNestedNode.tsx
+++ b/packages/react-json-tree/src/JSONNestedNode.tsx
@@ -4,6 +4,7 @@ import getCollectionEntries from './getCollectionEntries.js';
 import JSONNode from './JSONNode.js';
 import ItemRange from './ItemRange.js';
 import type { CircularCache, CommonInternalProps } from './types.js';
+import getAriaPropsFromKeyPath from './getAriaPropsFromKeyPath.js';
 
 /**
  * Renders nested values (eg. objects, arrays, lists, etc.)
@@ -62,6 +63,7 @@ function renderChildNodes(
           from={entry.from}
           to={entry.to}
           renderChildNodes={renderChildNodes}
+          keyPath={[entry.from, ...keyPath]}
         />,
       );
     } else {
@@ -141,6 +143,8 @@ export default function JSONNestedNode(props: Props) {
   );
   const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
 
+  const {ariaControls, ariaLabel} = getAriaPropsFromKeyPath(keyPath)
+
   return hideRoot ? (
     <li {...styling('rootNode', ...stylingArgs)}>
       <ul {...styling('rootNodeChildren', ...stylingArgs)}>
@@ -155,6 +159,8 @@ export default function JSONNestedNode(props: Props) {
           nodeType={nodeType}
           expanded={expanded}
           onClick={handleClick}
+          ariaControls={ariaControls}
+          ariaLabel={ariaLabel}
         />
       )}
       <label
@@ -169,7 +175,7 @@ export default function JSONNestedNode(props: Props) {
       >
         {renderedItemString}
       </span>
-      <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
+      <ul {...styling('nestedNodeChildren', ...stylingArgs)} id={expandable ? ariaControls : undefined}>
         {renderedChildren}
       </ul>
     </li>
diff --git a/packages/react-json-tree/src/createStylingFromTheme.ts b/packages/react-json-tree/src/createStylingFromTheme.ts
index 47665c1994..4adaccb45e 100644
--- a/packages/react-json-tree/src/createStylingFromTheme.ts
+++ b/packages/react-json-tree/src/createStylingFromTheme.ts
@@ -122,6 +122,11 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
     arrowContainer: ({ style }, arrowStyle) => ({
       style: {
         ...style,
+        background: 'none',
+        color: 'inherit',
+        border: 'none',
+        padding: 0,
+        font: 'inherit',
         display: 'inline-block',
         paddingRight: '0.5em',
         paddingLeft: arrowStyle === 'double' ? '1em' : 0,
diff --git a/packages/react-json-tree/src/getAriaPropsFromKeyPath.ts b/packages/react-json-tree/src/getAriaPropsFromKeyPath.ts
new file mode 100644
index 0000000000..528cefb608
--- /dev/null
+++ b/packages/react-json-tree/src/getAriaPropsFromKeyPath.ts
@@ -0,0 +1,21 @@
+import { KeyPath } from "./types.js";
+
+const replaceSpacesRegex = / /g;
+
+const getAriaPropsFromKeyPath = (
+    keyPath: KeyPath
+) => {
+    let ariaControls = '';
+    let ariaLabel = 'JSON Tree Node: ';
+    for(let i = keyPath.length - 1; i >= 0; i--) {
+        const key = keyPath[i];
+        ariaControls += `${key}`.replace(replaceSpacesRegex, '-');
+        ariaLabel += `${key} `;
+    }
+
+    ariaLabel = ariaLabel.trim();
+
+    return { ariaControls, ariaLabel };
+}
+
+export default getAriaPropsFromKeyPath;
\ No newline at end of file

From f2c45915d6e60968cbc08324eb868864c8815e70 Mon Sep 17 00:00:00 2001
From: Michael Adsit <tisdadd@gmail.com>
Date: Tue, 3 Sep 2024 17:45:25 -0500
Subject: [PATCH 2/3] Added ArrowComponentOverride

---
 packages/react-json-tree/README.md            | 28 +++++++++++++++++++
 packages/react-json-tree/examples/src/App.tsx | 11 +++++++-
 packages/react-json-tree/src/ItemRange.tsx    |  1 +
 packages/react-json-tree/src/JSONArrow.tsx    | 28 +++++++++++--------
 .../react-json-tree/src/JSONNestedNode.tsx    |  1 +
 packages/react-json-tree/src/index.tsx        |  5 ++++
 packages/react-json-tree/src/types.ts         |  4 ++-
 7 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md
index 678a5b6a64..07964b4c06 100644
--- a/packages/react-json-tree/README.md
+++ b/packages/react-json-tree/README.md
@@ -137,6 +137,34 @@ Their full signatures are:
 - `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
 - `valueRenderer: function(valueAsString, value, ...keyPath)`
 
+Additionally, it is possible to override the arrows for expanding, for example with a `+` and `-` button.
+
+```tsx
+const ArrowOverride = ({ expanded, ...rest }: JSONArrowProps) => {
+  if (expanded) {
+    return <button {...rest}>-</button>
+  }
+  return <button {...rest}>+</button>
+}
+
+<JSONTree ArrowComponentOverride={ArrowOverride} />
+```
+
+The default `JSONArrow` component will literally check if an `ArrowComponentOverride` exists and pass it's props there. The typescript for these props is as follows.
+
+```ts
+interface JSONArrowProps {
+  styling: StylingFunction;
+  arrowStyle?: 'single' | 'double';
+  expanded: boolean;
+  nodeType: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  ariaControls?: string;
+  ariaLabel?: string
+  OverrideComponent?: ComponentType<JSONArrowProps>;
+}
+```
+
 #### More Options
 
 - `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)
diff --git a/packages/react-json-tree/examples/src/App.tsx b/packages/react-json-tree/examples/src/App.tsx
index a972ce5888..a47d8e907f 100644
--- a/packages/react-json-tree/examples/src/App.tsx
+++ b/packages/react-json-tree/examples/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Map } from 'immutable';
-import { JSONTree, StylingValue } from 'react-json-tree';
+import { JSONArrowProps, JSONTree, StylingValue } from 'react-json-tree';
 
 const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
   style: {
@@ -125,6 +125,13 @@ const theme = {
   base0F: '#cc6633',
 };
 
+const ArrowOverride = ({ expanded, ...rest }: JSONArrowProps) => {
+  if (expanded) {
+    return <button {...rest}>-</button>
+  }
+  return <button {...rest}>+</button>
+}
+
 const App = () => (
   <div>
     <JSONTree data={data} theme={theme} invertTheme />
@@ -168,10 +175,12 @@ const App = () => (
     <p>
       Pass <code>labelRenderer</code> or <code>valueRenderer</code>.
     </p>
+    <p>Additionally, you may pass an <code>ArrowComponentOverride</code></p>
     <div>
       <JSONTree
         data={data}
         theme={theme}
+        ArrowComponentOverride={ArrowOverride}
         labelRenderer={([raw]) => <span>(({raw})):</span>}
         valueRenderer={(raw) => (
           <em>
diff --git a/packages/react-json-tree/src/ItemRange.tsx b/packages/react-json-tree/src/ItemRange.tsx
index ac17679d65..9b40c36129 100644
--- a/packages/react-json-tree/src/ItemRange.tsx
+++ b/packages/react-json-tree/src/ItemRange.tsx
@@ -34,6 +34,7 @@ export default function ItemRange(props: Props) {
         onClick={handleClick}
         arrowStyle="double"
         ariaLabel={`Expand Array from ${from} to ${to}`}
+        OverrideComponent={props.ArrowComponentOverride}
       />
       {`${from} ... ${to}`}
     </div>
diff --git a/packages/react-json-tree/src/JSONArrow.tsx b/packages/react-json-tree/src/JSONArrow.tsx
index e04f6c9525..f0e7aaaf29 100644
--- a/packages/react-json-tree/src/JSONArrow.tsx
+++ b/packages/react-json-tree/src/JSONArrow.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import type { StylingFunction } from 'react-base16-styling';
 
-interface Props {
+export interface JSONArrowProps {
   styling: StylingFunction;
   arrowStyle?: 'single' | 'double';
   expanded: boolean;
@@ -9,17 +9,23 @@ interface Props {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   ariaControls?: string;
   ariaLabel?: string
+  OverrideComponent?: ComponentType<JSONArrowProps>;
 }
 
-export default function JSONArrow({
-  styling,
-  arrowStyle = 'single',
-  expanded,
-  nodeType,
-  onClick,
-  ariaControls,
-  ariaLabel
-}: Props) {
+export default function JSONArrow({OverrideComponent, ...props}: JSONArrowProps) {
+  const {
+    styling,
+    arrowStyle = 'single',
+    expanded,
+    nodeType,
+    onClick,
+    ariaControls,
+    ariaLabel
+  } = props
+  if(OverrideComponent) {
+    return <OverrideComponent {...props} />
+  }
+
   return (
     <button {...styling('arrowContainer', arrowStyle)} aria-label={ariaLabel} aria-expanded={expanded} aria-controls={ariaControls} onClick={onClick}>
       <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx
index 4cd9605820..58b468899c 100644
--- a/packages/react-json-tree/src/JSONNestedNode.tsx
+++ b/packages/react-json-tree/src/JSONNestedNode.tsx
@@ -161,6 +161,7 @@ export default function JSONNestedNode(props: Props) {
           onClick={handleClick}
           ariaControls={ariaControls}
           ariaLabel={ariaLabel}
+          OverrideComponent={props.ArrowComponentOverride}
         />
       )}
       <label
diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx
index 6f298f0eb6..8edd565171 100644
--- a/packages/react-json-tree/src/index.tsx
+++ b/packages/react-json-tree/src/index.tsx
@@ -47,6 +47,7 @@ export function JSONTree({
   isCustomNode = noCustomNode,
   collectionLimit = 50,
   sortObjectKeys = false,
+  ArrowComponentOverride
 }: Props) {
   const styling = useMemo(
     () =>
@@ -69,6 +70,7 @@ export function JSONTree({
         postprocessValue={postprocessValue}
         collectionLimit={collectionLimit}
         sortObjectKeys={sortObjectKeys}
+        ArrowComponentOverride={ArrowComponentOverride}
       />
     </ul>
   );
@@ -87,4 +89,7 @@ export type {
   Styling,
   CommonExternalProps,
 } from './types.js';
+
+export type { JSONArrowProps } from './JSONArrow.js';
+
 export type { StylingValue };
diff --git a/packages/react-json-tree/src/types.ts b/packages/react-json-tree/src/types.ts
index e046126101..08033aa2c9 100644
--- a/packages/react-json-tree/src/types.ts
+++ b/packages/react-json-tree/src/types.ts
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { StylingFunction } from 'react-base16-styling';
+import { JSONArrowProps } from './JSONArrow.js';
 
 export type Key = string | number;
 
@@ -46,6 +47,7 @@ export interface CommonExternalProps {
   keyPath: KeyPath;
   labelRenderer: LabelRenderer;
   valueRenderer: ValueRenderer;
+  ArrowComponentOverride?: ComponentType<JSONArrowProps>;
   shouldExpandNodeInitially: ShouldExpandNodeInitially;
   hideRoot: boolean;
   getItemString: GetItemString;

From 14f3136bbb5ceb5d81cdd66a573e33377b72bec4 Mon Sep 17 00:00:00 2001
From: Michael Adsit <tisdadd@gmail.com>
Date: Tue, 3 Sep 2024 17:57:15 -0500
Subject: [PATCH 3/3] Added changeset.

---
 .changeset/purple-timers-whisper.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/purple-timers-whisper.md

diff --git a/.changeset/purple-timers-whisper.md b/.changeset/purple-timers-whisper.md
new file mode 100644
index 0000000000..765dc4bbc5
--- /dev/null
+++ b/.changeset/purple-timers-whisper.md
@@ -0,0 +1,6 @@
+---
+'react-json-tree': minor
+'react-json-tree-example': minor
+---
+
+Changed to using buttons for a11y compatibility, and added ability to override Arrow Component.