Make tree more accessible and semantic

Author: jakezatecky

.eslintrc

@@ -4,8 +4,6 @@
   "rules": {
     "class-methods-use-this": 0,
     "indent": [2, "tab"],
-    "jsx-a11y/label-has-for": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
     "no-tabs": 0,
     "react/jsx-indent": [2, "tab"],
     "react/jsx-indent-props" : [2, "tab"],

gulpfile.js

@@ -28,6 +28,9 @@ gulp.task('test-mocha', ['test-script-format'], () =>
 			compilers: {
 				js: babel,
 			},
+			require: [
+				'./test/setup.js',
+			],
 		}))
 );
 

package.json

@@ -45,6 +45,7 @@
     "gulp-mocha": "^3.0.1",
     "gulp-sass": "^3.0.0",
     "gulp-scss-lint": "^0.4.0",
+    "jsdom": "^9.11.0",
     "mocha": "^3.0.2",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",

src/js/Tree.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import TreeNode from './TreeNode';
 import nodeShape from './nodeShape';
+import uniqueDomId from './uniqueDomId';
 
 class Tree extends React.Component {
 	static propTypes = {
@@ -38,6 +39,8 @@ class Tree extends React.Component {
 
 		this.onCheck = this.onCheck.bind(this);
 		this.onExpand = this.onExpand.bind(this);
+
+		this.id = uniqueDomId('rct');
 	}
 
 	onCheck(node) {
@@ -147,6 +150,7 @@ class Tree extends React.Component {
 					optimisticToggle={this.props.optimisticToggle}
 					rawChildren={node.children}
 					title={node.title}
+					treeId={this.id}
 					value={node.value}
 					onCheck={this.onCheck}
 					onExpand={this.onExpand}

src/js/TreeNode.js

@@ -8,6 +8,7 @@ class TreeNode extends React.Component {
 		expanded: React.PropTypes.bool.isRequired,
 		optimisticToggle: React.PropTypes.bool.isRequired,
 		title: React.PropTypes.string.isRequired,
+		treeId: React.PropTypes.string.isRequired,
 		value: React.PropTypes.string.isRequired,
 		onCheck: React.PropTypes.func.isRequired,
 		onExpand: React.PropTypes.func.isRequired,
@@ -100,21 +101,25 @@ class TreeNode extends React.Component {
 	}
 
 	render() {
+		const { checked, treeId, title, value } = this.props;
+		const inputId = `${treeId}-${value}`;
+
 		return (
 			<li className="rct-node">
 				<span className="rct-text">
-					<span className="rct-collapse" title="Toggle" onClick={this.onExpand}>
+					<button className="rct-collapse" title="Toggle" onClick={this.onExpand}>
 						{this.renderCollapseIcon()}
-					</span>
-					<label onClick={this.onCheck}>
+					</button>
+					<label htmlFor={inputId}>
+						<input checked={checked === 1} id={inputId} type="checkbox" onChange={this.onCheck} />
 						<span className="rct-checkbox">
 							{this.renderCheckboxIcon()}
 						</span>
 						<span className="rct-icon">
 							{this.renderNodeIcon()}
 						</span>
 						<span className="rct-title">
-							{this.props.title}
+							{title}
 						</span>
 					</label>
 				</span>

src/js/uniqueDomId.js

@@ -0,0 +1,27 @@
+let autoId = 0;
+
+/**
+ * Return a unique DOM ID for an element on the document.
+ *
+ * @param {string} prefix
+ *
+ * @return {string}
+ */
+function uniqueDomId(prefix = 'unique') {
+	let findingId = true;
+	let id = '';
+
+	while (findingId) {
+		id = `${prefix}-${autoId}`;
+
+		if (document.getElementById(id) === null) {
+			findingId = false;
+		}
+
+		autoId += 1;
+	}
+
+	return id;
+}
+
+export default uniqueDomId;

src/less/react-checkbox-tree.less

@@ -14,6 +14,15 @@
     }
   }
 
+  button {
+    line-height: normal;
+    color: inherit;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
   label {
     margin-bottom: 0;
     cursor: pointer;
@@ -23,6 +32,10 @@
     }
   }
 
+  input {
+    display: none;
+  }
+
   .fa {
     margin: 0 5px;
     width: 14px;
@@ -41,11 +54,16 @@
 }
 
 .rct-collapse {
+  border: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  line-height: normal;
+  color: inherit;
   font-size: 12px;
 
   .fa-chevron-right,
   .fa-chevron-down {
-    cursor: pointer;
     text-align: center;
   }
 

src/sass/react-checkbox-tree.scss

@@ -14,6 +14,15 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     }
   }
 
+  button {
+    line-height: normal;
+    color: inherit;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
   label {
     margin-bottom: 0;
     cursor: pointer;
@@ -23,6 +32,10 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     }
   }
 
+  input {
+    display: none;
+  }
+
   .fa {
     margin: 0 5px;
     width: 14px;
@@ -41,11 +54,16 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
 }
 
 .rct-collapse {
+  border: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  line-height: normal;
+  color: inherit;
   font-size: 12px;
 
   .fa-chevron-right,
   .fa-chevron-down {
-    cursor: pointer;
     text-align: center;
   }
 

test/setup.js

@@ -0,0 +1,13 @@
+import { jsdom } from 'jsdom';
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+	if (typeof global[property] === 'undefined') {
+		global[property] = document.defaultView[property];
+	}
+});
+
+global.navigator = {
+	userAgent: 'node.js',
+};