Add tree and treeitem roles to Resource Tree (#895)

* Add tree and treeitem roles to Resource Tree

* Updates
This commit is contained in:
Steve Faulkner 2021-06-15 14:52:21 -05:00 committed by GitHub
parent 239c7edf7b
commit af71a96d54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 1 deletions

View File

@ -58,7 +58,7 @@ export interface TreeComponentProps {
export class TreeComponent extends React.Component<TreeComponentProps> { export class TreeComponent extends React.Component<TreeComponentProps> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<div style={this.props.style} className={`treeComponent ${this.props.className}`}> <div style={this.props.style} className={`treeComponent ${this.props.className}`} role="tree">
<TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} /> <TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
</div> </div>
); );
@ -172,6 +172,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""}`} className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""}`}
onClick={(event: React.MouseEvent<HTMLDivElement>) => this.onNodeClick(event, node)} onClick={(event: React.MouseEvent<HTMLDivElement>) => this.onNodeClick(event, node)}
onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onNodeKeyPress(event, node)} onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onNodeKeyPress(event, node)}
role="treeitem"
> >
<div <div
className={`treeNodeHeader ${this.state.isMenuShowing ? "showingMenu" : ""}`} className={`treeNodeHeader ${this.state.isMenuShowing ? "showingMenu" : ""}`}

View File

@ -3,6 +3,7 @@
exports[`TreeComponent renders a simple tree 1`] = ` exports[`TreeComponent renders a simple tree 1`] = `
<div <div
className="treeComponent tree" className="treeComponent tree"
role="tree"
> >
<TreeNodeComponent <TreeNodeComponent
generation={0} generation={0}
@ -37,6 +38,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
className=" main2 nodeItem " className=" main2 nodeItem "
onClick={[Function]} onClick={[Function]}
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem"
> >
<div <div
className="treeNodeHeader " className="treeNodeHeader "
@ -137,6 +139,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
className="nodeClassname main12 nodeItem " className="nodeClassname main12 nodeItem "
onClick={[Function]} onClick={[Function]}
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem"
> >
<div <div
className="treeNodeHeader " className="treeNodeHeader "
@ -285,6 +288,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
className=" main2 nodeItem " className=" main2 nodeItem "
onClick={[Function]} onClick={[Function]}
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem"
> >
<div <div
className="treeNodeHeader " className="treeNodeHeader "
@ -356,6 +360,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
className="nodeClassname main12 nodeItem " className="nodeClassname main12 nodeItem "
onClick={[Function]} onClick={[Function]}
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem"
> >
<div <div
className="treeNodeHeader " className="treeNodeHeader "
@ -523,6 +528,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
className=" main2 nodeItem " className=" main2 nodeItem "
onClick={[Function]} onClick={[Function]}
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem"
> >
<div <div
className="treeNodeHeader " className="treeNodeHeader "

View File

@ -3,6 +3,7 @@
exports[`Resource tree for schema should render 1`] = ` exports[`Resource tree for schema should render 1`] = `
<div <div
className="treeComponent dataResourceTree" className="treeComponent dataResourceTree"
role="tree"
> >
<TreeNodeComponent <TreeNodeComponent
generation={0} generation={0}

View File

@ -3,6 +3,7 @@
exports[`Resource tree for resource token should render 1`] = ` exports[`Resource tree for resource token should render 1`] = `
<div <div
className="treeComponent dataResourceTree" className="treeComponent dataResourceTree"
role="tree"
> >
<TreeNodeComponent <TreeNodeComponent
generation={0} generation={0}