Accessibility Enhancements - Aria tags, Space/Enter keys

src/Select.js

@@ -485,7 +485,10 @@ const Select = React.createClass({
 				this.selectFocusedOption();
 			return;
 			case 13: // enter
-				if (!this.state.isOpen) return;
+				if (!this.state.isOpen) {
+					this.focusNextOption();
+					return;
+				}
 				event.stopPropagation();
 				this.selectFocusedOption();
 			break;
@@ -498,6 +501,17 @@ const Select = React.createClass({
 					event.stopPropagation();
 				}
 			break;
+			case 32: // space
+				if (!this.props.searchable) {
+					event.preventDefault();
+				}
+				if (!this.state.isOpen) {
+					this.focusNextOption();
+					return;
+				}
+				event.stopPropagation();
+				this.selectFocusedOption();
+			break;
 			case 38: // up
 				this.focusPreviousOption();
 			break;
@@ -866,12 +880,14 @@ const Select = React.createClass({
 					aria-expanded={isOpen}
 					aria-owns={isOpen ? this._instancePrefix + '-list' : this._instancePrefix + '-value'}
 					aria-activedescendant={isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value'}
+					aria-labelledby={this.props['aria-labelledby']}
+					aria-label={this.props['aria-label']}
 					className={className}
 					tabIndex={this.props.tabIndex || 0}
 					onBlur={this.handleInputBlur}
 					onFocus={this.handleInputFocus}
 					ref={ref => this.input = ref}
-					aria-readonly={'' + !!this.props.disabled}
+					aria-disabled={'' + !!this.props.disabled}
 					style={{ border: 0, width: 1, display:'inline-block' }}/>
 			);
 		}

test/Select-test.js

@@ -33,6 +33,7 @@ var PLACEHOLDER_SELECTOR = '.Select-placeholder';
 var ARROW_UP = { keyCode: 38, key: 'ArrowUp' };
 var ARROW_DOWN = { keyCode: 40, key: 'ArrowDown' };
 var KEY_ENTER = { keyCode: 13, key: 'Enter' };
+var KEY_SPACE = { keyCode: 32, key: 'Space' };
 
 class PropsWrapper extends React.Component {
 
@@ -3191,7 +3192,6 @@ describe('Select', () => {
 			});
 
 			it('disabled option link is still clickable', () => {
-				var selectArrow = ReactDOM.findDOMNode(instance).querySelector('.Select-arrow');
 				var selectArrow = ReactDOM.findDOMNode(instance).querySelector('.Select-arrow');
 				TestUtils.Simulate.mouseDown(selectArrow);
 				var options = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
@@ -3845,7 +3845,7 @@ describe('Select', () => {
 					</span>);
 			});
 
-			it('updates the active descendant after a selection', () => {
+			it('updates the active descendant after a selection using enter key', () => {
 
 				return expect(wrapper,
 					'with event keyDown', ARROW_DOWN, 'on', <div className="Select-control" />,
@@ -3861,6 +3861,45 @@ describe('Select', () => {
 					});
 
 			});
+
+			it('expands the drop down when the enter key is pressed', () => {
+
+				return expect(wrapper,
+						'with event keyDown', KEY_ENTER, 'on', <div className="Select-control" />,
+						'queried for', <input role="combobox" />)
+						.then(input => {
+							expect(instance.state.focusedOption, 'to equal', { value: 'one', label: 'label one' });
+						});
+
+			});
+
+			it('updates the active descendant after a selection using space bar', () => {
+
+				return expect(wrapper,
+						'with event keyDown', ARROW_DOWN, 'on', <div className="Select-control" />,
+						'with event keyDown', KEY_SPACE, 'on', <div className="Select-control" />,
+						'queried for', <input role="combobox" />)
+						.then(input => {
+
+							// [ 'three', 'two', 'one' ] is now selected,
+							// therefore in-focus should be 'four'
+
+							const activeId = input.attributes['aria-activedescendant'].value;
+							expect(ReactDOM.findDOMNode(instance), 'queried for first', '#' + activeId, 'to have text', 'label four');
+						});
+
+			});
+
+			it('expands the drop down when the space bar is pressed', () => {
+
+				return expect(wrapper,
+						'with event keyDown', KEY_SPACE, 'on', <div className="Select-control" />,
+						'queried for', <input role="combobox" />)
+						.then(input => {
+							expect(instance.state.focusedOption, 'to equal', { value: 'one', label: 'label one' });
+						});
+
+			});
 		});
 	});
 });