diff --git a/src/Select.js b/src/Select.js index fc09e715f0..5149cd65c8 100644 --- a/src/Select.js +++ b/src/Select.js @@ -46,6 +46,7 @@ const Select = React.createClass({ propTypes: { addLabelText: React.PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input + 'aria-describedby': React.PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) 'aria-label': React.PropTypes.string, // Aria label (for assistive tech) 'aria-labelledby': React.PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech) arrowRenderer: React.PropTypes.func, // Create drop-down caret element @@ -853,6 +854,7 @@ const Select = React.createClass({ 'aria-owns': ariaOwns, 'aria-haspopup': '' + isOpen, 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value', + 'aria-describedby': this.props['aria-describedby'], 'aria-labelledby': this.props['aria-labelledby'], 'aria-label': this.props['aria-label'], className: className, diff --git a/test/Select-test.js b/test/Select-test.js index d8df285436..10a2c6afb1 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -3803,6 +3803,19 @@ describe('Select', () => { 'to contain', ); }); + it('passes through the aria-describedby prop', () => { + + instance = createControl({ + options: defaultOptions, + value: 'one', + 'aria-describedby': 'test-label1-id test-label2-id' + }); + + expect(instance, + 'to contain', ); + }); + + it('passes through the aria-label prop', () => { instance = createControl({