Permalink
Browse files

Add aria-describedby support

  • Loading branch information...
ericj17 committed Feb 21, 2017
1 parent 2249f26 commit af0f77fe742fef8765b8578ff9486075991d1177
Showing with 15 additions and 0 deletions.
  1. +2 −0 src/Select.js
  2. +13 −0 test/Select-test.js
View
@@ -48,6 +48,7 @@ const Select = React.createClass({
addLabelText: React.PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input
'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)
'aria-describedby': React.PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech)
arrowRenderer: React.PropTypes.func, // Create drop-down caret element
autoBlur: React.PropTypes.bool, // automatically blur the component when an option is selected
autofocus: React.PropTypes.bool, // autofocus the component on mount
@@ -854,6 +855,7 @@ const Select = React.createClass({
'aria-haspopup': '' + isOpen,
'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value',
'aria-labelledby': this.props['aria-labelledby'],
'aria-describedby': this.props['aria-describedby'],
'aria-label': this.props['aria-label'],
className: className,
tabIndex: this.props.tabIndex,
View
@@ -3803,6 +3803,19 @@ describe('Select', () => {
'to contain', <input role="combobox" aria-labelledby="test-label-id" />);
});
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', <input role="combobox" aria-describedby="test-label1-id test-label2-id" />);
});
it('passes through the aria-label prop', () => {
instance = createControl({

0 comments on commit af0f77f

Please sign in to comment.