@pocketprep/ui-kit 3.0.28 → 3.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@pocketprep/ui-kit.js +2868 -2866
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +8 -8
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/lib/components/Icons/icon.d.ts +1 -0
- package/lib/components/Modal/ModalContainer.vue +54 -49
- package/package.json +1 -1
|
@@ -54,60 +54,65 @@ export default class ModalContainer extends Vue {
|
|
|
54
54
|
savedYPosition = 0
|
|
55
55
|
|
|
56
56
|
mounted () {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
)
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
57
|
+
// Prevent an error where multiple modals trigger a loop
|
|
58
|
+
// TODO: Find a way to have only the latest modal's focusListener active
|
|
59
|
+
const openModals = document.querySelectorAll('.uikit-modal-container')
|
|
60
|
+
if (openModals.length === 1) {
|
|
61
|
+
const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
|
|
62
|
+
|
|
63
|
+
// Reset focus to last element in modal so next tab will move it to top
|
|
64
|
+
const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
|
|
65
|
+
const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
|
|
66
|
+
if (modalFocusableEls.length) {
|
|
67
|
+
modalFocusableEls[modalFocusableEls.length - 1]?.focus()
|
|
68
|
+
modalFocusableEls[modalFocusableEls.length - 1]?.blur()
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Trap the user's focus within the modal - don't allow focusing elements behind the overlay
|
|
72
|
+
this.focusListener = event => {
|
|
73
|
+
const target = (event as FocusEvent).target as HTMLElement // The element receiving focus
|
|
74
|
+
const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
|
|
75
|
+
const hasCalendarClass = target
|
|
76
|
+
&& Array.from(target.classList).find(
|
|
77
|
+
c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
|
|
78
|
+
)
|
|
79
|
+
if (isFocusOutside && !hasCalendarClass) {
|
|
80
|
+
const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
|
|
81
|
+
focusableSelectors
|
|
82
|
+
))
|
|
83
|
+
const firstFocusableModalChild = focusableModalChildren.find(
|
|
84
|
+
el => !!el.getBoundingClientRect().width
|
|
85
|
+
)
|
|
86
|
+
const reversedModalChildren = [ ...focusableModalChildren ].reverse()
|
|
87
|
+
const lastFocusableModalChild = reversedModalChildren.find(
|
|
88
|
+
el => !!el.getBoundingClientRect().width
|
|
89
|
+
)
|
|
90
|
+
if (firstFocusableModalChild) {
|
|
91
|
+
const relatedTarget = (event as FocusEvent).relatedTarget // The element last focused
|
|
92
|
+
if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
|
|
93
|
+
// If focus moves from first element -> outside modal, focus the last element instead
|
|
94
|
+
lastFocusableModalChild.focus()
|
|
95
|
+
} else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
|
|
96
|
+
// If focus moves from last element -> outside modal, focus the first element instead
|
|
97
|
+
firstFocusableModalChild.focus()
|
|
98
|
+
} else if (relatedTarget && relatedTarget instanceof HTMLElement) {
|
|
99
|
+
// If focus goes outside in a different way, return focus to where it came from if possible
|
|
100
|
+
relatedTarget.focus()
|
|
101
|
+
} else {
|
|
102
|
+
// Otherwise, just return focus to the first element
|
|
103
|
+
firstFocusableModalChild.focus()
|
|
104
|
+
}
|
|
97
105
|
} else {
|
|
98
|
-
//
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
if (modalContainerEl.tabIndex === -1) {
|
|
104
|
-
modalContainerEl.tabIndex = 0
|
|
106
|
+
// If the modal doesn't have any focusable children, focus the container instead
|
|
107
|
+
if (modalContainerEl.tabIndex === -1) {
|
|
108
|
+
modalContainerEl.tabIndex = 0
|
|
109
|
+
}
|
|
110
|
+
modalContainerEl.focus()
|
|
105
111
|
}
|
|
106
|
-
modalContainerEl.focus()
|
|
107
112
|
}
|
|
108
113
|
}
|
|
114
|
+
document.addEventListener('focusin', this.focusListener)
|
|
109
115
|
}
|
|
110
|
-
document.addEventListener('focusin', this.focusListener)
|
|
111
116
|
|
|
112
117
|
// prevent scrolling outside of modal
|
|
113
118
|
const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
|