[button-group] Toolbar keyboard navigation + new button-group-dropdown component #349
Conversation
This file contains hidden or 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
* Create form-input-static.vue New form-static input * Added form-input-static compoinent * Refactored static input Refactored to use the new `<b-form-input-static>` component * Switch to bFormInputStatic Updated child component var to bFormInputStatic to follow proper naming conventions * Removed lazyFormatter from static-input * Added trailing semi-colon To make CircleCI happy * Added missing 'this' * [nav-item] add dropdown class * Added <slot> for robustness * new b-form-input-static component (#292) * Create form-input-static.vue New form-static input * Added form-input-static compoinent * Refactored static input Refactored to use the new `<b-form-input-static>` component * Switch to bFormInputStatic Updated child component var to bFormInputStatic to follow proper naming conventions * Removed lazyFormatter from static-input * Added trailing semi-colon To make CircleCI happy * Added missing 'this' * Added <slot> for robustness * fixed missing `.vue` extension on import * Added missing extension on component import (#293) * Optimized import order in form-input.vue (#294) * Added missing extension on component import * Optimized import order
Resync with master
Resync with master
Resync with master
Resync with master
Resync with Master
Resync with Master
Adds optional keyboard navigation to toolbar variant via the prop toolbarKeyNav (Defaults to false). Keyboard navigation caveat: It is not recommended to place text (or text-like) inputs in a toolbar that has keyboard navigation enabled, as they LEFT/RIGHT/UP/DOWN keys will cause a text input to not cursor through the input, but rather jump to the next or previous control in the toolbar.
Dropdowns for button-groups (split not supported)
Added keyboard support for opening dropdown when button focused. Clicking button or pressing ENTER or SPACE will open dropdown menu
|
Thats so nice @tmorehouse 💯 |
33 tasks
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.
Addes ARIA and optional keyboard navigation support to
toolbarvariant. By default keyboard navigation is disabled, and must be explicitly enabled by setting proptoolbarKeyNavtotrue(only applicable totoolbarvariant), See caveat.Tabbing into toolbar will focus the first non-disabled visible item. pressing LEFT or UP will focus previous non-disabled item in toolbar. pressing RIGHT or DOWN will focus next non-disabled item in toolbar. SHIFT+LEFT/UP will focus the first non-disabled item in the toolbar, while SHIFT+RIGHT/DOWN will focus the last.
Also introduces new component
b-button-group-dropdownfor button group dropdowns (splitbutton not supported)Caveat: Toolbars with text or text-like inputs (via nested
input-groups) introduce some issues with Keyboard navigation. When a text (or text-like) input is focused, pressing LEFT/UP/RIGHT/DOWN will not move the text cursor, but instead will jump to previous or next item in the toolbar, making editing text slightly more difficult. This is why keyboard navigation is disabled by default. When enabling keyboard navigation, one should avoid using text or text-like inputs in toolbars.Addresses parts of #333