feat(Dropdown, DropdownMenu, DropdownToggle): allow Dropdown to have … #2077
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…listbox or menu role Dropdown Menu should allow for listbox or menu roles. Before this commit, the Dropdown could only have the menu role. After this commit, a user can add a menuRole property to the Dropdown component which will set a corresponding aria-haspopop property on the DropdownToggle, role property on the DropdownMenu, and role property on the Dropdown Items
kyletsang
requested changes
Jan 18, 2021
src/Dropdown.js
Outdated
| @@ -35,7 +36,8 @@ const defaultProps = { | |||
| active: false, | |||
| addonType: false, | |||
| inNavbar: false, | |||
| setActiveFromChild: false | |||
| setActiveFromChild: false, | |||
| menuRole: true | |||
There was a problem hiding this comment.
Don't think we need this. Just to make this behavior opt-in
Address all code cleanlieness and backwards compatibility issues brought up in PR
|
Okay! I made all the suggested changes. Thanks so much for all your suggestions and guidance @kyletsang |
kyletsang
requested changes
Jan 21, 2021
src/Dropdown.js
Outdated
| if(this.context.menuRole === 'listbox') { | ||
| return 'option' | ||
| } | ||
| return 'menu' |
There was a problem hiding this comment.
Suggested change
| return 'menu' | |
| return 'menuitem' |
src/Dropdown.js
Outdated
Comment on lines
124
to
127
| if(this.context.menuRole) { | ||
| return [].slice.call(menuContainer.querySelectorAll('[role="' + this.getItemType() + '"]')); | ||
| } | ||
| return [].slice.call(menuContainer.querySelectorAll('[role="menuitem"]')); |
There was a problem hiding this comment.
Suggested change
| if(this.context.menuRole) { | |
| return [].slice.call(menuContainer.querySelectorAll('[role="' + this.getItemType() + '"]')); | |
| } | |
| return [].slice.call(menuContainer.querySelectorAll('[role="menuitem"]')); | |
| return [].slice.call(menuContainer.querySelectorAll(`[role="${this.getItemType()}"]`)); |
getItemType will return the default menuitem in case when menuRole doesn't exist, so we can simplify this. Also, string interpolation is good to use here too
src/DropdownItem.js
Outdated
Comment on lines
35
to
41
| const menuRole = this.context.menuRole | ||
| if(menuRole === true || menuRole === 'menu' || menuRole === undefined) { | ||
| return 'menuitem' | ||
| } | ||
| if(menuRole === 'listbox') { | ||
| return 'option' | ||
| } |
There was a problem hiding this comment.
Can simplify this function similar to getRole in DropdownMenu
src/DropdownToggle.js
Outdated
| render() { | ||
| console.log(this.getRole()) |
There was a problem hiding this comment.
Suggested change
| console.log(this.getRole()) |
|
gotcha, I'm on it! Thanks so much for all your help. This has been super educational!!! |
… and fix a typo Address all issues mentioned in PR review
kyletsang
approved these changes
Jan 27, 2021
|
Looks good, thanks! |
Merged
This was referenced Mar 29, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…listbox or menu role
Dropdown Menu should allow for listbox or menu roles. Before this commit, the Dropdown could only have the menu role. After this commit, a user can add a menuRole property to the Dropdown component which will set a corresponding aria-haspopop property on the DropdownToggle, role property on the DropdownMenu, and role property on the Dropdown Items