From af0f77fe742fef8765b8578ff9486075991d1177 Mon Sep 17 00:00:00 2001 From: Eric Lee Date: Tue, 21 Feb 2017 14:30:57 -0800 Subject: [PATCH 1/2] Add aria-describedby support --- src/Select.js | 2 ++ test/Select-test.js | 13 +++++++++++++ 2 files changed, 15 insertions(+) diff --git a/src/Select.js b/src/Select.js index fc09e715f0..4960865cf6 100644 --- a/src/Select.js +++ b/src/Select.js @@ -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, 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({ From ba7dc9fa143f3c41a7a6960e1ece6cb8597a5fe2 Mon Sep 17 00:00:00 2001 From: Eric Lee Date: Tue, 21 Feb 2017 14:53:32 -0800 Subject: [PATCH 2/2] Sort aria-describedby propTypes alphabetically --- src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 4960865cf6..5149cd65c8 100644 --- a/src/Select.js +++ b/src/Select.js @@ -46,9 +46,9 @@ 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) - '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,8 +854,8 @@ const Select = React.createClass({ 'aria-owns': ariaOwns, '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-labelledby': this.props['aria-labelledby'], 'aria-label': this.props['aria-label'], className: className, tabIndex: this.props.tabIndex,