feat(ObjectViewer): improve a11y

output/components.eslint.txt

@@ -5,14 +5,11 @@ The react/require-extension rule is deprecated. Please use the import/extensions
 /home/travis/build/Talend/ui/packages/components/src/HeaderBar/HeaderBar.component.js
   105:37  error  Elements with ARIA roles must use a valid, non-abstract ARIA role  jsx-a11y/aria-role
 
-/home/travis/build/Talend/ui/packages/components/src/ObjectViewer/JSONLike/JSONLike.component.js
-  56:3  error  Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions
-
 /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/RowLarge/RowLarge.component.js
   47:3  error  Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions
 
 /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/utils/tablerow.js
   33:3  warning  Unexpected console statement  no-console
 
-✖ 4 problems (3 errors, 1 warning)
+✖ 3 problems (2 errors, 1 warning)
 

packages/components/__mocks__/tree.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class TreeItem extends React.Component {
+	render() {
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<li
+				id={this.props.item.id}
+				role="treeitem"
+				tabIndex="-1"
+				onKeyDown={e => this.props.onKeyDown(e, this.ref, this.props.item)}
+				ref={ref => {
+					this.ref = ref;
+				}}
+				aria-level={this.props.level}
+				aria-posinset={this.props.posinset}
+			>
+				{name}
+				{this.props.item.isOpened ? this.props.children : null}
+			</li>
+		);
+	}
+}
+TreeItem.propTypes = {
+	children: PropTypes.node,
+	id: PropTypes.string,
+	isOpened: PropTypes.bool,
+	item: PropTypes.object,
+	level: PropTypes.number,
+	onKeyDown: PropTypes.func.isRequired,
+	posinset: PropTypes.number,
+};
+
+function Tree(props) {
+	return (
+		<ul role={props.level === 0 ? 'tree' : undefined}>
+			{props.items.map((item, index) => (
+				<TreeItem
+					key={`item-${props.level}-${index}`}
+					onKeyDown={props.onKeyDown}
+					item={item}
+					name={`Item ${props.level} ${index}`}
+					level={props.level}
+					posinset={index}
+				>
+					{item.children && (
+						<Tree key="children" {...props} items={item.children} level={props.level + 1} />
+					)}
+				</TreeItem>
+			))}
+		</ul>
+	);
+}
+Tree.displayName = 'Tree';
+Tree.defaultProps = {
+	items: [],
+	level: 0,
+};
+Tree.propTypes = {
+	items: PropTypes.array,
+	level: PropTypes.number,
+};
+
+export default Tree;