base first button tabIndex=0 off of level prop, not querySelector

Author: bvandercar-vt

src/DataRenderer.test.tsx

@@ -411,4 +411,14 @@ describe('DataRender', () => {
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
     expect(screen.queryByText(/array/)).not.toBeInTheDocument();
   });
+
+  it('only one item with tabindex=0 if level=0, none if level>0', () => {
+    const data = { test: [1, 2, 3], test2: [1, 2, 3], test3: { a: 'b', c: { d: '1', a: 2 } } };
+
+    const { container, rerender } = render(<WrappedDataRenderer value={data} level={0} />);
+    expect(container.querySelectorAll('[tabindex="0"]')).toHaveLength(1);
+
+    rerender(<WrappedDataRenderer value={data} level={1} />);
+    expect(container.querySelectorAll('[tabindex="0"]')).toHaveLength(0);
+  });
 });

src/DataRenderer.tsx

@@ -23,6 +23,7 @@ export interface StyleProps {
 
 interface CommonRenderProps {
   lastElement: boolean;
+  /** There should only be one node with `level==0`. */
   level: number;
   style: StyleProps;
   shouldExpandNode: (level: number, value: any, field?: string) => boolean;
@@ -140,8 +141,8 @@ function ExpandableObject({
         aria-expanded={expanded}
         aria-controls={expanded ? contentsId : undefined}
         ref={expanderButtonRef}
-        // tabIndex=0 gets set by js
-        tabIndex={-1}
+        // tabIndex gets changed by js. There should only be one node (top level) with level==0.
+        tabIndex={level === 0 ? 0 : -1}
       />
       {(field || field === '') &&
         (clickToExpandNode ? (

src/index.test.tsx

@@ -47,7 +47,9 @@ describe('JsonView', () => {
   });
 
   it('should go to next node on ArrowDown, prev node with ArrowUp, tabindex should change', () => {
-    render(<JsonView data={{ test: [1, 2, 3], test2: [1, 2, 3] }} />);
+    const { container } = render(<JsonView data={{ test: [1, 2, 3], test2: [1, 2, 3] }} />);
+
+    expect(container.querySelectorAll('[tabindex="0"]')).toHaveLength(1);
     const buttons = screen.getAllByRole('button', { hidden: true });
     expect(buttons).toHaveLength(3);
 

src/index.tsx

@@ -58,15 +58,6 @@ export const JsonView = ({
   ...ariaAttrs
 }: Props) => {
   const outerRef = React.useRef<HTMLDivElement>(null);
-
-  // on first render, set first button to tabIndex=0.
-  React.useEffect(() => {
-    const firstButton = outerRef.current?.querySelector<HTMLElement>('[role=button]');
-    if (firstButton) {
-      firstButton.tabIndex = 0;
-    }
-  }, [outerRef]);
-
   return (
     <div
       aria-label='JSON view'