diff --git a/src/DataRenderer.test.tsx b/src/DataRenderer.test.tsx
index 751a4bb..4b9ad10 100644
--- a/src/DataRenderer.test.tsx
+++ b/src/DataRenderer.test.tsx
@@ -4,7 +4,7 @@ import { allExpanded, collapseAllNested, defaultStyles } from './index';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-const commonProps: JsonRenderProps<any> = {
+const commonProps: Omit<JsonRenderProps<any>, 'outerRef'> = {
   lastElement: false,
   level: 0,
   style: {
@@ -30,20 +30,32 @@ const commonProps: JsonRenderProps<any> = {
   field: undefined
 };
 
+const WrappedDataRenderer = (testProps: Partial<JsonRenderProps<any>>) => {
+  const ref = React.useRef(null);
+  return (
+    <div ref={ref}>
+      <DataRender outerRef={ref} {...commonProps} {...testProps} />
+    </div>
+  );
+};
+
 const collapseAll = () => false;
 
 const testButtonsCollapsed = () => {
   const buttons = screen.getAllByRole('button', { hidden: true });
-  expect(buttons.length).toBe(2);
+  expect(buttons).toHaveLength(1);
   expect(buttons[0]).toHaveClass('expand-icon-light');
-  expect(buttons[1]).toHaveClass('collapsed-content-light');
+  expect(buttons[0]).not.toHaveClass('collapse-icon-light');
+  expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
   return buttons;
 };
 
 const testButtonsExpanded = () => {
   const buttons = screen.getAllByRole('button', { hidden: true });
-  expect(buttons.length).toBe(1);
+  expect(buttons).toHaveLength(1);
   expect(buttons[0]).toHaveClass('collapse-icon-light');
+  expect(buttons[0]).not.toHaveClass('expand-icon-light');
+  expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
   return buttons;
 };
 
@@ -53,39 +65,28 @@ const testButtonsIfEmpty = () => {
   }).toThrow();
 };
 
-const testClickableNodeCollapsed = () => {
-  const buttons = screen.getAllByRole('button', { hidden: true });
-  expect(buttons.length).toBe(4);
-  expect(buttons[0]).toHaveClass('collapse-icon-light');
-  expect(buttons[1]).toHaveClass('expand-icon-light');
-  expect(buttons[2]).toHaveClass('clickable-label-light');
-  expect(buttons[3]).toHaveClass('collapsed-content-light');
-  return buttons;
-};
-
 describe('DataRender', () => {
   it('should render booleans: true', () => {
-    render(<DataRender {...commonProps} value={{ test: true }} />);
+    render(<WrappedDataRenderer value={{ test: true }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('true')).toBeInTheDocument();
   });
 
   it('should render booleans: false', () => {
-    render(<DataRender {...commonProps} value={{ test: false }} />);
+    render(<WrappedDataRenderer value={{ test: false }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('false')).toBeInTheDocument();
   });
 
   it('should render strings', () => {
-    render(<DataRender {...commonProps} value={{ test: 'string' }} />);
+    render(<WrappedDataRenderer value={{ test: 'string' }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText(`"string"`)).toBeInTheDocument();
   });
 
   it('should render strings without quotes', () => {
     render(
-      <DataRender
-        {...commonProps}
+      <WrappedDataRenderer
         style={{ ...defaultStyles, noQuotesForStringValues: true }}
         value={{ test: 'string' }}
       />
@@ -97,8 +98,7 @@ describe('DataRender', () => {
 
   it('should render strings with quotes if noQuotesForStringValues is undefined', () => {
     render(
-      <DataRender
-        {...commonProps}
+      <WrappedDataRenderer
         style={{ ...defaultStyles, noQuotesForStringValues: undefined }}
         value={{ test: 'string' }}
       />
@@ -109,8 +109,7 @@ describe('DataRender', () => {
 
   it('should render field names without quotes if quotesForFieldNames is undefined', () => {
     render(
-      <DataRender
-        {...commonProps}
+      <WrappedDataRenderer
         style={{ ...defaultStyles, quotesForFieldNames: undefined }}
         value={{ test: 'string' }}
       />
@@ -120,8 +119,7 @@ describe('DataRender', () => {
 
   it('should render field names with quotes if quotesForFieldNames is true', () => {
     render(
-      <DataRender
-        {...commonProps}
+      <WrappedDataRenderer
         style={{ ...defaultStyles, quotesForFieldNames: true }}
         value={{ test: 'string' }}
       />
@@ -130,120 +128,116 @@ describe('DataRender', () => {
   });
 
   it('should render numbers', () => {
-    render(<DataRender {...commonProps} value={{ test: 42 }} />);
+    render(<WrappedDataRenderer value={{ test: 42 }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('42')).toBeInTheDocument();
   });
 
   it('should render bigints', () => {
-    render(<DataRender {...commonProps} value={{ test: BigInt(42) }} />);
+    render(<WrappedDataRenderer value={{ test: BigInt(42) }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('42n')).toBeInTheDocument();
   });
 
   it('should render dates', () => {
-    render(<DataRender {...commonProps} value={{ test: new Date(0) }} />);
+    render(<WrappedDataRenderer value={{ test: new Date(0) }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('1970-01-01T00:00:00.000Z')).toBeInTheDocument();
   });
 
   it('should render nulls', () => {
-    render(<DataRender {...commonProps} value={{ test: null }} />);
+    render(<WrappedDataRenderer value={{ test: null }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('null')).toBeInTheDocument();
   });
 
   it('should render undefineds', () => {
-    render(<DataRender {...commonProps} value={{ test: undefined }} />);
+    render(<WrappedDataRenderer value={{ test: undefined }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('undefined')).toBeInTheDocument();
   });
 
   it('should render unknown types', () => {
-    render(<DataRender {...commonProps} value={{ test: Symbol('2020') }} />);
+    render(<WrappedDataRenderer value={{ test: Symbol('2020') }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText(/2020/)).toBeInTheDocument();
   });
 
   it('should render object with empty key string', () => {
-    render(<DataRender {...commonProps} value={{ '': 'empty key' }} />);
+    render(<WrappedDataRenderer value={{ '': 'empty key' }} />);
     expect(screen.getByText(/"":/)).toBeInTheDocument();
     expect(screen.getByText(/empty key/)).toBeInTheDocument();
   });
 
   it('should render empty objects', () => {
-    render(<DataRender {...commonProps} value={{}} />);
+    render(<WrappedDataRenderer value={{}} />);
     expect(screen.getByText('{')).toBeInTheDocument();
     expect(screen.getByText('}')).toBeInTheDocument();
   });
 
   it('should render nested empty objects', () => {
-    render(<DataRender {...commonProps} value={{ nested: [] }} />);
+    render(<WrappedDataRenderer value={{ nested: [] }} />);
     expect(screen.getByText('nested:')).toBeInTheDocument();
     expect(screen.getByText('{')).toBeInTheDocument();
     expect(screen.getByText('}')).toBeInTheDocument();
   });
 
   it('should not expand empty objects', () => {
-    render(<DataRender {...commonProps} value={{}} shouldExpandNode={allExpanded} />);
+    render(<WrappedDataRenderer value={{}} shouldExpandNode={allExpanded} />);
     testButtonsIfEmpty();
   });
 
   it('should not collapse empty objects', () => {
-    render(<DataRender {...commonProps} value={{}} shouldExpandNode={collapseAll} />);
+    render(<WrappedDataRenderer value={{}} shouldExpandNode={collapseAll} />);
     testButtonsIfEmpty();
   });
 
   it('should render empty arrays', () => {
-    render(<DataRender {...commonProps} value={[]} />);
+    render(<WrappedDataRenderer value={[]} />);
     expect(screen.getByText('[')).toBeInTheDocument();
     expect(screen.getByText(']')).toBeInTheDocument();
   });
 
   it('should render nested empty arrays', () => {
-    render(<DataRender {...commonProps} value={{ nested: [] }} />);
+    render(<WrappedDataRenderer value={{ nested: [] }} />);
     expect(screen.getByText('nested:')).toBeInTheDocument();
     expect(screen.getByText('[')).toBeInTheDocument();
     expect(screen.getByText(']')).toBeInTheDocument();
   });
 
   it('should not expand empty arrays', () => {
-    render(<DataRender {...commonProps} value={[]} shouldExpandNode={allExpanded} />);
+    render(<WrappedDataRenderer value={[]} shouldExpandNode={allExpanded} />);
     testButtonsIfEmpty();
   });
 
   it('should not collapse empty arrays', () => {
-    render(<DataRender {...commonProps} value={[]} shouldExpandNode={collapseAll} />);
+    render(<WrappedDataRenderer value={[]} shouldExpandNode={collapseAll} />);
     testButtonsIfEmpty();
   });
 
   it('should render arrays', () => {
-    render(<DataRender {...commonProps} value={[1, 2, 3]} />);
+    render(<WrappedDataRenderer value={[1, 2, 3]} />);
     expect(screen.getByText('1')).toBeInTheDocument();
     expect(screen.getByText('2')).toBeInTheDocument();
     expect(screen.getByText('3')).toBeInTheDocument();
   });
 
   it('should render arrays with key', () => {
-    render(<DataRender {...commonProps} value={{ array: [1, 2, 3] }} />);
+    render(<WrappedDataRenderer value={{ array: [1, 2, 3] }} />);
     expect(screen.getByText('1')).toBeInTheDocument();
     expect(screen.getByText('2')).toBeInTheDocument();
     expect(screen.getByText('3')).toBeInTheDocument();
   });
 
   it('should render nested objects', () => {
-    render(<DataRender {...commonProps} value={{ obj: { test: 123 } }} />);
+    render(<WrappedDataRenderer value={{ obj: { test: 123 } }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.getByText('123')).toBeInTheDocument();
   });
 
   it('should render nested objects collapsed', () => {
     render(
-      <DataRender
-        {...commonProps}
-        value={{ obj: { test: 123 } }}
-        shouldExpandNode={collapseAllNested}
-      />
+      <WrappedDataRenderer value={{ obj: { test: 123 } }} shouldExpandNode={collapseAllNested} />
     );
     expect(screen.getByText(/obj/)).toBeInTheDocument();
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
@@ -252,53 +246,43 @@ describe('DataRender', () => {
 
   it('should render nested objects collapsed and expand it once property changed', () => {
     const { rerender } = render(
-      <DataRender
-        {...commonProps}
-        value={{ obj: { test: 123 } }}
-        shouldExpandNode={collapseAllNested}
-      />
+      <WrappedDataRenderer value={{ obj: { test: 123 } }} shouldExpandNode={collapseAllNested} />
     );
     expect(screen.getByText(/obj/)).toBeInTheDocument();
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
     expect(screen.queryByText('123')).not.toBeInTheDocument();
 
-    rerender(
-      <DataRender {...commonProps} value={{ obj: { test: 123 } }} shouldExpandNode={allExpanded} />
-    );
+    rerender(<WrappedDataRenderer value={{ obj: { test: 123 } }} shouldExpandNode={allExpanded} />);
     expect(screen.getByText(/obj/)).toBeInTheDocument();
     expect(screen.queryByText(/test:/)).toBeInTheDocument();
     expect(screen.queryByText('123')).toBeInTheDocument();
   });
 
   it('should render nested arrays collapsed', () => {
-    render(
-      <DataRender {...commonProps} value={{ test: [123] }} shouldExpandNode={collapseAllNested} />
-    );
+    render(<WrappedDataRenderer value={{ test: [123] }} shouldExpandNode={collapseAllNested} />);
     expect(screen.queryByText(/test:/)).toBeInTheDocument();
     expect(screen.queryByText('123')).not.toBeInTheDocument();
   });
 
   it('should render nested arrays collapsed and expand it once property changed', () => {
     const { rerender } = render(
-      <DataRender {...commonProps} value={{ test: [123] }} shouldExpandNode={collapseAllNested} />
+      <WrappedDataRenderer value={{ test: [123] }} shouldExpandNode={collapseAllNested} />
     );
     expect(screen.queryByText(/test:/)).toBeInTheDocument();
     expect(screen.queryByText('123')).not.toBeInTheDocument();
 
-    rerender(
-      <DataRender {...commonProps} value={{ test: [123] }} shouldExpandNode={allExpanded} />
-    );
+    rerender(<WrappedDataRenderer value={{ test: [123] }} shouldExpandNode={allExpanded} />);
     expect(screen.queryByText(/test:/)).toBeInTheDocument();
     expect(screen.queryByText('123')).toBeInTheDocument();
   });
 
   it('should render top arrays collapsed', () => {
-    render(<DataRender {...commonProps} value={[123]} shouldExpandNode={collapseAll} />);
+    render(<WrappedDataRenderer value={[123]} shouldExpandNode={collapseAll} />);
     expect(screen.queryByText('123')).not.toBeInTheDocument();
   });
 
   it('should collapse and expand objects by clicking on icon', () => {
-    render(<DataRender {...commonProps} value={{ test: true }} />);
+    render(<WrappedDataRenderer value={{ test: true }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     let buttons = testButtonsExpanded();
     fireEvent.click(buttons[0]);
@@ -309,9 +293,9 @@ describe('DataRender', () => {
   });
 
   it('should collapse and expand objects by clicking on node', () => {
-    render(
-      <DataRender
-        {...{ ...commonProps, clickToExpandNode: true }}
+    const { container } = render(
+      <WrappedDataRenderer
+        clickToExpandNode={true}
         value={{ test: { child: true } }}
         shouldExpandNode={collapseAll}
       />
@@ -320,9 +304,17 @@ describe('DataRender', () => {
     // open the 'test' node by clicking the icon
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
     expect(screen.queryByText(/child/)).not.toBeInTheDocument();
-    const buttons = testButtonsCollapsed();
+    let buttons = testButtonsCollapsed();
     fireEvent.click(buttons[0]);
-    testClickableNodeCollapsed();
+
+    buttons = screen.getAllByRole('button', { hidden: true });
+    expect(buttons.length).toBe(2);
+    expect(buttons[0]).toHaveClass('collapse-icon-light');
+    expect(buttons[1]).toHaveClass('expand-icon-light');
+    expect(buttons[0].tabIndex).toEqual(0);
+    expect(buttons[1].tabIndex).toEqual(-1);
+    expect(container.getElementsByClassName('clickable-label-light')).toHaveLength(1);
+    expect(container.getElementsByClassName('collapsed-content-light')).toHaveLength(1);
     expect(screen.getByText(/test:/)).toBeInTheDocument();
     expect(screen.queryByText(/child/)).not.toBeInTheDocument();
     fireEvent.click(buttons[0]);
@@ -331,16 +323,19 @@ describe('DataRender', () => {
   });
 
   it('should expand objects by clicking on collapsed content', () => {
-    render(<DataRender {...commonProps} value={{ test: true }} shouldExpandNode={collapseAll} />);
+    const { container } = render(
+      <WrappedDataRenderer value={{ test: true }} shouldExpandNode={collapseAll} />
+    );
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
-    const buttons = testButtonsCollapsed();
-    fireEvent.click(buttons[1]);
+    testButtonsCollapsed();
+    const collapsedContent = container.getElementsByClassName(commonProps.style.collapsedContent);
+    fireEvent.click(collapsedContent[0]);
     testButtonsExpanded();
     expect(screen.getByText(/test:/)).toBeInTheDocument();
   });
 
   it('should collapse and expand arrays by clicking on icon', () => {
-    render(<DataRender {...commonProps} value={[1, 2, 3]} />);
+    render(<WrappedDataRenderer value={[1, 2, 3]} />);
     expect(screen.getByText('1')).toBeInTheDocument();
     let buttons = testButtonsExpanded();
     fireEvent.click(buttons[0]);
@@ -351,55 +346,79 @@ describe('DataRender', () => {
   });
 
   it('should expand arrays by clicking on collapsed content', () => {
-    render(<DataRender {...commonProps} value={[1, 2, 3]} shouldExpandNode={collapseAll} />);
+    const { container } = render(
+      <WrappedDataRenderer value={[1, 2, 3]} shouldExpandNode={collapseAll} />
+    );
     expect(screen.queryByText('1')).not.toBeInTheDocument();
-    const buttons = testButtonsCollapsed();
-    fireEvent.click(buttons[1]);
+    testButtonsCollapsed();
+    const collapsedContent = container.getElementsByClassName(commonProps.style.collapsedContent);
+    fireEvent.click(collapsedContent[0]);
     testButtonsExpanded();
     expect(screen.getByText('1')).toBeInTheDocument();
   });
 
-  it('should expand objects by pressing Spacebar on icon', () => {
-    render(<DataRender {...commonProps} value={{ test: true }} shouldExpandNode={collapseAll} />);
-    expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
+  it('should expand objects by pressing ArrowRight on icon, collapse objects by pressing ArrowLeft on icon', () => {
+    render(<WrappedDataRenderer value={{ test: true }} shouldExpandNode={collapseAll} />);
+
     const buttons = testButtonsCollapsed();
-    fireEvent.keyDown(buttons[0], { key: ' ', code: 'Space' });
+    expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
+
+    fireEvent.keyDown(buttons[0], { key: 'ArrowRight', code: 'ArrowRight' });
     testButtonsExpanded();
     expect(screen.getByText(/test:/)).toBeInTheDocument();
+
+    fireEvent.keyDown(buttons[0], { key: 'ArrowLeft', code: 'ArrowLeft' });
+    testButtonsCollapsed();
+    expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
   });
 
   it('should not expand objects by pressing other keys on icon', () => {
-    render(<DataRender {...commonProps} value={{ test: true }} shouldExpandNode={collapseAll} />);
+    render(<WrappedDataRenderer value={{ test: true }} shouldExpandNode={collapseAll} />);
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
     const buttons = testButtonsCollapsed();
     fireEvent.keyDown(buttons[0], { key: 'Enter', code: 'Enter' });
+    fireEvent.keyDown(buttons[0], { key: ' ', code: 'Space' });
     testButtonsCollapsed();
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
   });
 
-  it('should expand arrays by pressing Spacebar on icon', () => {
-    render(
-      <DataRender {...commonProps} value={['test', 'array']} shouldExpandNode={collapseAll} />
-    );
+  it('should expand arrays by pressing ArrowRight on icon, collapse arrays by pressing ArrowLeft on icon', () => {
+    render(<WrappedDataRenderer value={['test', 'array']} shouldExpandNode={collapseAll} />);
+
     const buttons = testButtonsCollapsed();
     expect(screen.queryByText(/test/)).not.toBeInTheDocument();
     expect(screen.queryByText(/array/)).not.toBeInTheDocument();
-    fireEvent.keyDown(buttons[0], { key: ' ', code: 'Space' });
+
+    fireEvent.keyDown(buttons[0], { key: 'ArrowRight', code: 'ArrowRight' });
     testButtonsExpanded();
     expect(screen.getByText(/test/)).toBeInTheDocument();
     expect(screen.getByText(/array/)).toBeInTheDocument();
+
+    fireEvent.keyDown(buttons[0], { key: 'ArrowLeft', code: 'ArrowLeft' });
+    testButtonsCollapsed();
+    expect(screen.queryByText(/test/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/array/)).not.toBeInTheDocument();
   });
 
   it('should not expand arrays by pressing other keys on icon', () => {
-    render(
-      <DataRender {...commonProps} value={['test', 'array']} shouldExpandNode={collapseAll} />
-    );
+    render(<WrappedDataRenderer value={['test', 'array']} shouldExpandNode={collapseAll} />);
     const buttons = testButtonsCollapsed();
     expect(screen.queryByText(/test:/)).not.toBeInTheDocument();
     expect(screen.queryByText(/array/)).not.toBeInTheDocument();
     fireEvent.keyDown(buttons[0], { key: 'Enter', code: 'Enter' });
+    fireEvent.keyDown(buttons[0], { key: ' ', code: 'Space' });
     testButtonsCollapsed();
     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);
+  });
 });
diff --git a/src/DataRenderer.tsx b/src/DataRenderer.tsx
index bfa4cee..19c6455 100644
--- a/src/DataRenderer.tsx
+++ b/src/DataRenderer.tsx
@@ -21,27 +21,27 @@ export interface StyleProps {
   quotesForFieldNames?: boolean;
 }
 
-export interface JsonRenderProps<T> {
-  field?: string;
-  value: T;
+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;
   clickToExpandNode: boolean;
+  outerRef: React.RefObject<HTMLDivElement>;
+}
+
+export interface JsonRenderProps<T> extends CommonRenderProps {
+  field?: string;
+  value: T;
 }
 
-export interface ExpandableRenderProps {
+export interface ExpandableRenderProps extends CommonRenderProps {
   field: string | undefined;
   value: Array<any> | object;
   data: Array<[string | undefined, any]>;
   openBracket: string;
   closeBracket: string;
-  lastElement: boolean;
-  level: number;
-  style: StyleProps;
-  shouldExpandNode: (level: number, value: any, field?: string) => boolean;
-  clickToExpandNode: boolean;
 }
 
 function quoteString(value: string, quoted = false) {
@@ -62,12 +62,16 @@ function ExpandableObject({
   level,
   style,
   shouldExpandNode,
-  clickToExpandNode
+  clickToExpandNode,
+  outerRef
 }: ExpandableRenderProps) {
+  // follows tree example for role structure and keypress actions: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/
+
   const shouldExpandNodeCalledRef = React.useRef(false);
   const [expanded, toggleExpanded, setExpanded] = useBool(() =>
     shouldExpandNode(level, value, field)
   );
+  const expanderButtonRef = React.useRef<HTMLSpanElement>(null);
 
   React.useEffect(() => {
     if (!shouldExpandNodeCalledRef.current) {
@@ -85,33 +89,68 @@ function ExpandableObject({
   const lastIndex = data.length - 1;
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
-    if (e.key === ' ') {
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      setExpanded(e.key === 'ArrowRight');
+    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       e.preventDefault();
-      toggleExpanded();
+      const direction = e.key === 'ArrowUp' ? -1 : 1;
+
+      if (!outerRef.current) return;
+      const buttonElements = outerRef.current.querySelectorAll<HTMLElement>('[role=button]');
+      let currentIndex = -1;
+      buttonElements.forEach((el, i) => {
+        if (el.tabIndex === 0) currentIndex = i;
+      });
+      if (currentIndex < 0) return;
+
+      const nextIndex = (currentIndex + direction + buttonElements.length) % buttonElements.length; // auto-wrap
+      buttonElements[currentIndex].tabIndex = -1;
+      buttonElements[nextIndex].tabIndex = 0;
+      buttonElements[nextIndex].focus();
     }
   };
 
+  const onClick = () => {
+    toggleExpanded();
+
+    const buttonElement = expanderButtonRef.current;
+    if (!buttonElement) return;
+    const prevButtonElement = outerRef.current?.querySelector<HTMLElement>(
+      '[role=button][tabindex="0"]'
+    );
+    if (prevButtonElement) {
+      prevButtonElement.tabIndex = -1;
+    }
+    buttonElement.tabIndex = 0;
+    buttonElement.focus();
+  };
+
   return (
-    <div className={style.basicChildStyle} role='list'>
+    <div
+      className={style.basicChildStyle}
+      role='treeitem'
+      aria-expanded={expanded}
+      aria-selected={undefined}
+    >
       <span
         className={expanderIconStyle}
-        onClick={toggleExpanded}
+        onClick={onClick}
         onKeyDown={onKeyDown}
         role='button'
-        tabIndex={0}
         aria-label={ariaLabel}
         aria-expanded={expanded}
         aria-controls={expanded ? contentsId : undefined}
+        ref={expanderButtonRef}
+        // tabIndex gets changed by js. There should only be one node (top level) with level==0.
+        tabIndex={level === 0 ? 0 : -1}
       />
       {(field || field === '') &&
         (clickToExpandNode ? (
-          <span
-            className={style.clickableLabel}
-            onClick={toggleExpanded}
-            onKeyDown={onKeyDown}
-            role='button'
-            tabIndex={-1}
-          >
+          // don't apply role="button" or tabIndex even though has onClick, because has same
+          // function as the +/- expander button (so just expose that button to keyboard and a11y tree)
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+          <span className={style.clickableLabel} onClick={onClick} onKeyDown={onKeyDown}>
             {quoteString(field, style.quotesForFieldNames)}:
           </span>
         ) : (
@@ -120,7 +159,7 @@ function ExpandableObject({
       <span className={style.punctuation}>{openBracket}</span>
 
       {expanded ? (
-        <div id={contentsId}>
+        <ul id={contentsId} role='group'>
           {data.map((dataElement, index) => (
             <DataRender
               key={dataElement[0] || index}
@@ -131,20 +170,15 @@ function ExpandableObject({
               level={childLevel}
               shouldExpandNode={shouldExpandNode}
               clickToExpandNode={clickToExpandNode}
+              outerRef={outerRef}
             />
           ))}
-        </div>
+        </ul>
       ) : (
-        <span
-          className={style.collapsedContent}
-          onClick={toggleExpanded}
-          onKeyDown={onKeyDown}
-          role='button'
-          tabIndex={-1} // No need to be able to tab to this button, can just use the other button
-          aria-hidden={true} // No need for screen readers to see this button, they can just use the other button
-          aria-label={ariaLabel}
-          aria-expanded={expanded}
-        />
+        // don't apply role="button" or tabIndex even though has onClick, because has same
+        // function as the +/- expander button (so just expose that button to keyboard and a11y tree)
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <span className={style.collapsedContent} onClick={onClick} onKeyDown={onKeyDown} />
       )}
 
       <span className={style.punctuation}>{closeBracket}</span>
@@ -163,7 +197,7 @@ export interface EmptyRenderProps {
 
 function EmptyObject({ field, openBracket, closeBracket, lastElement, style }: EmptyRenderProps) {
   return (
-    <div className={style.basicChildStyle} role='listitem'>
+    <div className={style.basicChildStyle} role='treeitem' aria-selected={undefined}>
       {(field || field === '') && (
         <span className={style.label}>{quoteString(field, style.quotesForFieldNames)}:</span>
       )}
@@ -181,7 +215,8 @@ function JsonObject({
   lastElement,
   shouldExpandNode,
   clickToExpandNode,
-  level
+  level,
+  outerRef
 }: JsonRenderProps<Object>) {
   if (Object.keys(value).length === 0) {
     return EmptyObject({
@@ -203,7 +238,8 @@ function JsonObject({
     style,
     shouldExpandNode,
     clickToExpandNode,
-    data: Object.keys(value).map((key) => [key, value[key as keyof typeof value]])
+    data: Object.keys(value).map((key) => [key, value[key as keyof typeof value]]),
+    outerRef
   });
 }
 
@@ -214,7 +250,8 @@ function JsonArray({
   lastElement,
   level,
   shouldExpandNode,
-  clickToExpandNode
+  clickToExpandNode,
+  outerRef
 }: JsonRenderProps<Array<any>>) {
   if (value.length === 0) {
     return EmptyObject({
@@ -236,7 +273,8 @@ function JsonArray({
     style,
     shouldExpandNode,
     clickToExpandNode,
-    data: value.map((element) => [undefined, element])
+    data: value.map((element) => [undefined, element]),
+    outerRef
   });
 }
 
@@ -274,7 +312,7 @@ function JsonPrimitiveValue({
   }
 
   return (
-    <div className={style.basicChildStyle} role='listitem'>
+    <div className={style.basicChildStyle} role='treeitem' aria-selected={undefined}>
       {(field || field === '') && (
         <span className={style.label}>{quoteString(field, style.quotesForFieldNames)}:</span>
       )}
diff --git a/src/hooks.ts b/src/hooks.ts
index 4e44802..a0ac35c 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -5,9 +5,9 @@ export function useBool(
 ): [boolean, () => void, (value: boolean) => void] {
   const [value, setValue] = useState(initialValueCreator());
 
-  const tooggle = () => setValue((currentValue) => !currentValue);
+  const toggle = () => setValue((currentValue) => !currentValue);
 
-  return [value, tooggle, setValue];
+  return [value, toggle, setValue];
 }
 
 let componentId = 1;
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 3dedf65..7fcc48c 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { JsonView, defaultStyles, allExpanded, collapseAllNested } from '.';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { StyleProps } from './DataRenderer';
 
 describe('JsonView', () => {
   it('should render object', () => {
@@ -17,7 +18,7 @@ describe('JsonView', () => {
   });
 
   it('should render object with incomplete style object', () => {
-    render(<JsonView style={{}} data={{ test: true }} />);
+    render(<JsonView style={{} as StyleProps} data={{ test: true }} />);
     expect(screen.getByText(/test/)).toBeInTheDocument();
     expect(screen.getByText('true')).toBeInTheDocument();
   });
@@ -44,4 +45,35 @@ describe('JsonView', () => {
     expect(collapseAllNested(2)).toBeFalsy();
     expect(collapseAllNested(3)).toBeFalsy();
   });
+
+  it('should go to next node on ArrowDown, prev node with ArrowUp, tabindex should change', () => {
+    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);
+
+    expect(buttons[0].tabIndex).toEqual(0);
+    expect(buttons[1].tabIndex).toEqual(-1);
+    expect(buttons[2].tabIndex).toEqual(-1);
+
+    buttons[0].focus();
+    expect(buttons[0]).toHaveFocus();
+
+    fireEvent.keyDown(buttons[0], { key: 'ArrowDown', code: 'ArrowDown' });
+    expect(buttons[0]).not.toHaveFocus();
+    expect(buttons[1]).toHaveFocus();
+    expect(buttons[2]).not.toHaveFocus();
+    expect(buttons[0].tabIndex).toEqual(-1);
+    expect(buttons[1].tabIndex).toEqual(0);
+    expect(buttons[2].tabIndex).toEqual(-1);
+
+    fireEvent.keyDown(buttons[1], { key: 'ArrowUp', code: 'ArrowUp' });
+    expect(buttons[0]).toHaveFocus();
+    expect(buttons[1]).not.toHaveFocus();
+    expect(buttons[2]).not.toHaveFocus();
+    expect(buttons[0].tabIndex).toEqual(0);
+    expect(buttons[1].tabIndex).toEqual(-1);
+    expect(buttons[2].tabIndex).toEqual(-1);
+  });
 });
diff --git a/src/index.tsx b/src/index.tsx
index 828d974..9d133fc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import DataRender, { StyleProps } from './DataRenderer';
 import styles from './styles.module.css';
 
-export interface Props {
+export interface Props extends React.AriaAttributes {
   data: Object | Array<any>;
   style?: StyleProps;
   shouldExpandNode?: (level: number, value: any, field?: string) => boolean;
@@ -54,10 +54,18 @@ export const JsonView = ({
   data,
   style = defaultStyles,
   shouldExpandNode = allExpanded,
-  clickToExpandNode = false
+  clickToExpandNode = false,
+  ...ariaAttrs
 }: Props) => {
+  const outerRef = React.useRef<HTMLDivElement>(null);
   return (
-    <div className={style.container}>
+    <div
+      aria-label='JSON view'
+      {...ariaAttrs}
+      className={style.container}
+      ref={outerRef}
+      role='tree'
+    >
       <DataRender
         value={data}
         style={style}
@@ -65,6 +73,7 @@ export const JsonView = ({
         level={0}
         shouldExpandNode={shouldExpandNode}
         clickToExpandNode={clickToExpandNode}
+        outerRef={outerRef}
       />
     </div>
   );