@pocketprep/ui-kit 3.4.38 → 3.4.40
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 +264 -260
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +4 -4
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Modal/ModalContainer.vue +42 -39
- package/lib/components/Tags/Tag.vue +1 -1
- package/package.json +1 -1
|
@@ -49,6 +49,7 @@ export default class ModalContainer extends Vue {
|
|
|
49
49
|
@Prop({ default: false }) showCloseButton!: boolean
|
|
50
50
|
@Prop({ default: () => ({}) }) customCloseStyles?: { [key: string]: unknown }
|
|
51
51
|
@Prop({ default: false }) isDarkMode!: boolean
|
|
52
|
+
@Prop({ default: true }) trapFocus!: boolean
|
|
52
53
|
|
|
53
54
|
focusListener: Parameters<typeof addEventListener>[1] | null = null
|
|
54
55
|
savedYPosition = 0
|
|
@@ -74,51 +75,53 @@ export default class ModalContainer extends Vue {
|
|
|
74
75
|
}
|
|
75
76
|
|
|
76
77
|
// Trap the user's focus within the modal - don't allow focusing elements behind the overlay
|
|
77
|
-
this.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
78
|
+
if (this.trapFocus) {
|
|
79
|
+
this.focusListener = event => {
|
|
80
|
+
if (this.modalNumber === this.numberOfModals()) { // Only focus on the last open panel
|
|
81
|
+
const target = (event as FocusEvent).target as HTMLElement // The element receiving focus
|
|
82
|
+
const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
|
|
83
|
+
const hasCalendarClass = target
|
|
84
|
+
&& Array.from(target.classList).find(
|
|
85
|
+
c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
|
|
86
|
+
)
|
|
87
|
+
if (isFocusOutside && !hasCalendarClass) {
|
|
88
|
+
const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
|
|
89
|
+
focusableSelectors
|
|
90
|
+
))
|
|
91
|
+
const firstFocusableModalChild = focusableModalChildren.find(
|
|
92
|
+
el => !!el.getBoundingClientRect().width
|
|
93
|
+
)
|
|
94
|
+
const reversedModalChildren = [ ...focusableModalChildren ].reverse()
|
|
95
|
+
const lastFocusableModalChild = reversedModalChildren.find(
|
|
96
|
+
el => !!el.getBoundingClientRect().width
|
|
97
|
+
)
|
|
98
|
+
if (firstFocusableModalChild) {
|
|
99
|
+
const relatedTarget = (event as FocusEvent).relatedTarget // The element last focused
|
|
100
|
+
if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
|
|
101
|
+
// If focus moves from first element -> outside modal, focus the last element instead
|
|
102
|
+
lastFocusableModalChild.focus()
|
|
103
|
+
} else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
|
|
104
|
+
// If focus moves from last element -> outside modal, focus the first element instead
|
|
105
|
+
firstFocusableModalChild.focus()
|
|
106
|
+
} else if (relatedTarget && relatedTarget instanceof HTMLElement) {
|
|
107
|
+
// If focus goes outside in a different way, return focus to where it came from if possible
|
|
108
|
+
relatedTarget.focus()
|
|
109
|
+
} else {
|
|
110
|
+
// Otherwise, just return focus to the first element
|
|
111
|
+
firstFocusableModalChild.focus()
|
|
112
|
+
}
|
|
107
113
|
} else {
|
|
108
|
-
//
|
|
109
|
-
|
|
114
|
+
// If the modal doesn't have any focusable children, focus the container instead
|
|
115
|
+
if (modalContainerEl.tabIndex === -1) {
|
|
116
|
+
modalContainerEl.tabIndex = 0
|
|
117
|
+
}
|
|
118
|
+
modalContainerEl.focus()
|
|
110
119
|
}
|
|
111
|
-
} else {
|
|
112
|
-
// If the modal doesn't have any focusable children, focus the container instead
|
|
113
|
-
if (modalContainerEl.tabIndex === -1) {
|
|
114
|
-
modalContainerEl.tabIndex = 0
|
|
115
|
-
}
|
|
116
|
-
modalContainerEl.focus()
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
}
|
|
123
|
+
document.addEventListener('focusin', this.focusListener)
|
|
120
124
|
}
|
|
121
|
-
document.addEventListener('focusin', this.focusListener)
|
|
122
125
|
|
|
123
126
|
// prevent scrolling outside of modal
|
|
124
127
|
const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
|