Merge pull request JedWatson#988 from bruderstein/add-aria-support

Add support for assistive technologies

less/control.less

@@ -112,8 +112,8 @@
 	white-space: nowrap;
 }
 
-.has-value.Select--single > .Select-control > .Select-value,
-.has-value.is-pseudo-focused.Select--single > .Select-control > .Select-value {
+.has-value.Select--single > .Select-control .Select-value,
+.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
 	.Select-value-label {
 		color: @select-text-color;
 	}
@@ -240,8 +240,17 @@
 	border-top-color: @select-arrow-color-hover;
 }
 
-
-
+.Select--multi .Select-multi-value-wrapper {
+  display: inline-block;
+}
+.Select .Select-aria-only {
+  display: inline-block;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  clip: rect(0,0,0,0);
+  overflow: hidden;
+}
 
 // Animation
 // ------------------------------

package.json

@@ -37,7 +37,7 @@
     "sinon": "^1.17.3",
     "unexpected": "^10.13.2",
     "unexpected-dom": "^3.1.0",
-    "unexpected-react": "^3.1.3",
+    "unexpected-react": "^3.2.3",
     "unexpected-sinon": "^10.2.0"
   },
   "peerDependencies": {

scss/control.scss

@@ -200,6 +200,10 @@
 	width: $select-clear-width;
 }
 
+.Select--multi .Select-multi-value-wrapper {
+  display: inline-block;
+}
+
 
 // arrow indicator
 

src/Option.js

@@ -5,13 +5,15 @@ const Option = React.createClass({
 	propTypes: {
 		children: React.PropTypes.node,
 		className: React.PropTypes.string,             // className (based on mouse position)
+		instancePrefix: React.PropTypes.string.isRequired,  // unique prefix for the ids (used for aria)
 		isDisabled: React.PropTypes.bool,              // the option is disabled
 		isFocused: React.PropTypes.bool,               // the option is focused
 		isSelected: React.PropTypes.bool,              // the option is selected
 		onFocus: React.PropTypes.func,                 // method to handle mouseEnter on option element
 		onSelect: React.PropTypes.func,                // method to handle click on option element
 		onUnfocus: React.PropTypes.func,               // method to handle mouseLeave on option element
 		option: React.PropTypes.object.isRequired,     // object that is base for that option
+		optionIndex: React.PropTypes.number,           // index of the option, used to generate unique ids for aria
 	},
 	blockEvent (event) {
 		event.preventDefault();
@@ -64,7 +66,7 @@ const Option = React.createClass({
 		}
 	},
 	render () {
-		var { option } = this.props;
+		var { option, instancePrefix, optionIndex } = this.props;
 		var className = classNames(this.props.className, option.className);
 
 		return option.disabled ? (
@@ -76,12 +78,14 @@ const Option = React.createClass({
 		) : (
 			<div className={className}
 				style={option.style}
-				onMouseDown={this.handleMouseDown}
+				role="option"
+				 onMouseDown={this.handleMouseDown}
 				onMouseEnter={this.handleMouseEnter}
 				onMouseMove={this.handleMouseMove}
 				onTouchStart={this.handleTouchStart}
 				onTouchMove={this.handleTouchMove}
 				onTouchEnd={this.handleTouchEnd}
+				id={instancePrefix + '-option-' + optionIndex}
 				title={option.title}>
 				{this.props.children}
 			</div>