-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessibility Enhancements - Aria tags, Space/Enter keys #1428
Conversation
Is the only thing preventing this merge the test coverage? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall this is looking good. I noticed the coverage was reduced so we will need to update to approve these changes. Let me think of a few more uses cases of what should be added.
@@ -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']} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Looks like there is a space before the dash, please remove.
@@ -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']} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please update this also.
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} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more 😄
It would be great to get this merged! |
bump :) .. would be really nice to see those changes in the next version of react-select! |
fixed failing tests, resolved merge conflicts on #1428
Thanks for this @sushmabadam I've cleaned this up and merged it into master in the following PR #2092 |
return; | ||
} | ||
event.stopPropagation(); | ||
this.selectFocusedOption(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey guys, sorry to drudge up an old PR discussion, but I'm noticing some quirky behavior since this code. Bisecting for bug #2156 led me to PR #2092 and therefore here.
It would seem this didn't intentionally cause the functionality I'm noticing on multiselect (selecting options on space or creating options on space for Creatable
), so I'm trying to figure out how I might fix this bug while keeping the intentions of this change.
What use case are we trying to add here? As an example of a use case we don't want (I'm assuming) is if you're on the example page in the first example of states and click "United States," then start typing to New York, when you hit space after New
it will select New Hampshire
instead of continuing to filter down.
Tagging @gwyneplaine as the merger.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @buob thanks for catching this, the intention was to mimic native select behaviour, to enable selection of a focused option on SPACE. the behaviour you've identified is definitely an unintended side-effect.
Let me have a think about how to best solve for both these cases (it may very well be removing this behaviour when props.searchable is true). Happy to hear your thoughts on this as well
This PR contains the fixes for the issue #1399 Accessibility Enhancements - Aria tags, Space/Enter keys