Various fixes for Modals #326
Merged
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
Ensures that the first focusable item in the modal is focused when it is shown. When selecting the item to focus: - First looks in footer - Then body - Then header - Else focus the modal itself Also included generate-id mixin for ARIA labeling
Changed from listing for focus to focusin for enforceFocus hanlder
enforceFocus event listeners are now only instantiated when the modal is shown.
Added a second optional argument to the `show::modal` event to allow specifying the element (i.e. button, link) to return focus to when Modal closes.
Allow to return focus to triggering element when modal is closed.
added in prop `returnFocus` to specify element to re-focus to when modal closes. Accepts either a CSS selector string (i.e. '#mybutton') or an `HTMLElement` reference. If CSS selector string matches more than one element, then only the first element is re-focused.
pi0
reviewed
May 2, 2017
lib/components/modal.vue
Outdated
| export default { | ||
| mixins: [generateId], |
There was a problem hiding this comment.
generateId usage should be limited to inputs only as is mentioned inside Mixin. Also as of vue 2.3.x we can not trust _uid because they are inconsistent between client server in SSR mode. See here
_uid is internal and should not be used as part of the application state
There was a problem hiding this comment.
Ah, yes. I'll remove that, and make sure aria-labeledby and aria-describedby don't get set if the ID is missing.
There was a problem hiding this comment.
Thanks @tmorehouse that's so sad that we currently can't have such behavior. I'll make an on/off switch for generateIds so non-ssr users can use them optionally until we can find better way generating consistent IDs :)
`aria-labelledby` and `aria-describedby` will not be present (by setting bound attribute to null) if an `id` is not specified for the modal.
pi0
approved these changes
May 2, 2017
|
Take a new look over, I think I have removed all generate-id references (including |
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.
Various fixes & tweaks:
onEscissue where hittingESCand the modal wasn't clicked initially (focused), the modal wouldn't close (see discussion at Added closeOnEsc, hideHeaderClose & enforceFocus #247), by ensuring that an element within the modal (or the modal itself) is focused when modal opens (using$nextTick)enforceFocushandler, and only instantiate it when the modal is open (removes it when closed),returnFocus) to the original element that triggered the modal opening. Works with thev-b-modaldirective automatically (i.e. the element with thev-b-modaldirective), or can be specified as a propreturn-focus. Can be a CSS selector string (i.e.'#mybutton'or anHTMLElementreference).generate-idmixin, in case the modal doesn't have an ID, foraria-labeledbyandaria-describedbycross referencing.For the initial focus on modal open, the modal content is searched for the first focusable element, and if not found defaults to the modal itself. When searching for focusable elements, the following order is used: