Accessibility improvements

Author: aaronshaf

example/index.js

@@ -10,7 +10,8 @@ var App = React.createClass({
   getInitialState() {
     return {
       cheeseIsReady: false,
-      baconIsReady: false
+      baconIsReady: false,
+      eggsAreReady: false
     }
   },
 
@@ -22,27 +23,42 @@ var App = React.createClass({
     this.setState({baconIsReady: event.target.checked})
   },
 
+  handleEggsChange(event) {
+    this.setState({eggsAreReady: event.target.checked})
+  },
+
   render() {
     return (
       <form>
         <h1>react-toggle</h1>
-        <div>
-          <Toggle
-            checked={this.state.cheeseIsReady}
-            name="cheeseIsReady" // Optional
-            value="true" // Optional
-            onChange={this.handleCheeseChange} />
-        </div>
+        <h2>With a &lt;label&gt; wrapper tag</h2>
         <div>
           <label>
-            Works with labels
+            Wrapper label
             <Toggle
               checked={this.state.baconIsReady}
-              name="baconIsReady" // Optional
-              value="true" // Optional
               onChange={this.handleBaconChange} />
           </label>
         </div>
+
+        <h2>Without an adjacent &lt;label&gt; tag</h2>
+        <div>
+          <label htmlFor="cheese-status">Adjacent label</label>
+          <Toggle
+            id="cheese-status"
+            checked={this.state.cheeseIsReady}
+            ariaLabelledBy="cheese-label"
+            onChange={this.handleCheeseChange} />
+        </div>
+
+        <h2>Without a &lt;label&gt; tag</h2>
+        <div>
+          <Toggle
+            checked={this.state.eggsAreReady}
+            ariaLabel="Eggs"
+            onChange={this.handleEggsChange} />
+        </div>
+
       </form>
     )
   }

index.es6.js

@@ -10,7 +10,10 @@ export default React.createClass({
     checked: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     name: React.PropTypes.string,
-    value: React.PropTypes.string
+    value: React.PropTypes.string,
+    id: React.PropTypes.string,
+    ariaLabelledBy: React.PropTypes.string,
+    ariaLabel: React.PropTypes.string
   },
 
   getDefaultProps() {
@@ -66,6 +69,9 @@ export default React.createClass({
           defaultChecked={this.props.checked}
           className="screenreader-only"
           type="checkbox"
+          id={this.props.id}
+          aria-labelledby={this.props.ariaLabelledBy}
+          aria-label={this.props.ariaLabel}
           onChange={this.props.onChange} />
       </div>
     )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-toggle",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "An elegant, accessible toggle component for React. Also a glorified checkbox.",
   "main": "index.js",
   "scripts": {