@pocketprep/ui-kit 3.1.0 → 3.1.1

package/lib/components/Modal/ModalContainer.vue

@@ -52,24 +52,30 @@ export default class ModalContainer extends Vue {
 
     focusListener: Parameters<typeof addEventListener>[1] | null = null
     savedYPosition = 0
+    modalNumber = 0
+
+    numberOfModals () {
+        return document.querySelectorAll('.uikit-modal-container').length
+    }
 
     mounted () {
+        this.modalNumber = this.numberOfModals()
         // Prevent an error where multiple modals trigger a loop
         // TODO: Find a way to have only the latest modal's focusListener active
-        const openModals = document.querySelectorAll('.uikit-modal-container')
-        if (openModals.length === 1) {
-            const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
+
+        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
     
-            // Reset focus to last element in modal so next tab will move it to top
-            const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
-            const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
-            if (modalFocusableEls.length) {
-                modalFocusableEls[modalFocusableEls.length - 1]?.focus()
-                modalFocusableEls[modalFocusableEls.length - 1]?.blur()
-            }
+        // Reset focus to last element in modal so next tab will move it to top
+        const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
+        const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
+        if (modalFocusableEls.length) {
+            modalFocusableEls[modalFocusableEls.length - 1]?.focus()
+            modalFocusableEls[modalFocusableEls.length - 1]?.blur()
+        }
     
-            // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
-            this.focusListener = event => {
+        // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
+        this.focusListener = event => {
+            if (this.modalNumber === this.numberOfModals()) { // Only focus on the last open panel
                 const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
                 const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
                 const hasCalendarClass = target 
@@ -90,20 +96,20 @@ export default class ModalContainer extends Vue {
                     if (firstFocusableModalChild) {
                         const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
                         if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
-                            // If focus moves from first element -> outside modal, focus the last element instead
+                        // If focus moves from first element -> outside modal, focus the last element instead
                             lastFocusableModalChild.focus()
                         } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
-                            // If focus moves from last element -> outside modal, focus the first element instead
+                        // If focus moves from last element -> outside modal, focus the first element instead
                             firstFocusableModalChild.focus()
                         } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
-                            // If focus goes outside in a different way, return focus to where it came from if possible
+                        // If focus goes outside in a different way, return focus to where it came from if possible
                             relatedTarget.focus()
                         } else {
-                            // Otherwise, just return focus to the first element
+                        // Otherwise, just return focus to the first element
                             firstFocusableModalChild.focus()
                         }
                     } else {
-                        // If the modal doesn't have any focusable children, focus the container instead
+                    // If the modal doesn't have any focusable children, focus the container instead
                         if (modalContainerEl.tabIndex === -1) {
                             modalContainerEl.tabIndex = 0
                         }
@@ -111,8 +117,8 @@ export default class ModalContainer extends Vue {
                     }
                 }
             }
-            document.addEventListener('focusin', this.focusListener)
         }
+        document.addEventListener('focusin', this.focusListener)
 
         // prevent scrolling outside of modal
         const openModalCount = Number(document.body.getAttribute('data-openModalCount'))

package/lib/components/SidePanels/SidePanel.vue

@@ -142,6 +142,7 @@ export default class SidePanel extends Vue {
     notContentHeight = this.tabs && this.tabs.length ? 262 : 218
     focusListener: Parameters<typeof addEventListener>[1] | null = null
     savedYPosition = 0
+    sidePanelNumber = 0
 
     get sidePanelWidth () {
         return this.width === 'large'
@@ -151,57 +152,67 @@ export default class SidePanel extends Vue {
                 : this.width
     }
     
+    numberOfSidepanels () {
+        return document.querySelectorAll('.uikit-side-panel').length
+    }
+
     mounted () {
-        // Focus title after opening transition
-        const sidePanelEl = this.$refs['uikit-side-panel'] as HTMLElement | undefined
-        sidePanelEl?.addEventListener('transitionend', () => {
-            const titleEl = this.$refs['uikit-side-panel__title'] as HTMLElement | undefined
-            titleEl?.focus()
-        })
+        this.sidePanelNumber = this.numberOfSidepanels()
 
         // delay opening to show animation
         setTimeout(() => {
             this.openSidePanel = true
         }, 1)
 
+   
+        // Focus title after opening transition
+        const sidePanelEl = this.$refs['uikit-side-panel'] as HTMLElement | undefined
+        sidePanelEl?.addEventListener('transitionend', () => {
+            const titleEl = this.$refs['uikit-side-panel__title'] as HTMLElement | undefined
+            titleEl?.focus()
+        })
+            
         // Trap the user's focus within the side panel - don't allow focusing elements behind the overlay
         this.focusListener = event => {
-            const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
-            const sidePanelContainerEl = this.$refs['sidepanelContainer'] as HTMLElement
-            const isFocusOutside = target && sidePanelContainerEl && !sidePanelContainerEl.contains(target)
-            const hasCalendarClass = target 
-                && Array.from(target.classList).find(
-                    c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
-                )
-            if (isFocusOutside && !hasCalendarClass) {
-                const focusableSidePanelChildren = Array.from<HTMLElement>(sidePanelContainerEl.querySelectorAll(
-                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-                ))
-                const firstFocusableSidePanelChild = focusableSidePanelChildren.find(
-                    el => !!el.getBoundingClientRect().width
-                )
-                const reversedSidePanelChildren = [ ...focusableSidePanelChildren ].reverse()
-                const lastFocusableSidePanelChild = reversedSidePanelChildren.find(
-                    el => !!el.getBoundingClientRect().width
-                )
-                if (firstFocusableSidePanelChild) {
-                    const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
-                    if (relatedTarget === firstFocusableSidePanelChild && lastFocusableSidePanelChild) {
-                        // If focus moves from first element -> outside side panel, focus the last element instead
-                        lastFocusableSidePanelChild.focus()
+            if (this.sidePanelNumber === this.numberOfSidepanels()) { // Only focus on the last open panel
+                const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+                const sidePanelContainerEl = this.$refs['sidepanelContainer'] as HTMLElement
+                const isFocusOutside = target && sidePanelContainerEl && !sidePanelContainerEl.contains(target)
+                const hasCalendarClass = target 
+                                && Array.from(target.classList).find(
+                                    c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
+                                )
+                if (isFocusOutside && !hasCalendarClass) {
+                    const focusableSidePanelChildren = Array.from<HTMLElement>(sidePanelContainerEl.querySelectorAll(
+                        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                    ))
+                    const firstFocusableSidePanelChild = focusableSidePanelChildren.find(
+                        el => !!el.getBoundingClientRect().width
+                    )
+                    const reversedSidePanelChildren = [ ...focusableSidePanelChildren ].reverse()
+                    const lastFocusableSidePanelChild = reversedSidePanelChildren.find(
+                        el => !!el.getBoundingClientRect().width
+                    )
+                    if (firstFocusableSidePanelChild) {
+                        const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                        if (relatedTarget === firstFocusableSidePanelChild && lastFocusableSidePanelChild) {
+                            // If focus moves from first element -> outside side panel, focus the last element instead
+                            lastFocusableSidePanelChild.focus()
+                        } else {
+                            // If focus goes outside the side panel in any other way, focus the first element
+                            firstFocusableSidePanelChild.focus()
+                        }
                     } else {
-                        // If focus goes outside the side panel in any other way, focus the first element
-                        firstFocusableSidePanelChild.focus()
+                        // If the side panel doesn't have any focusable children, focus the container instead
+                        if (sidePanelContainerEl.tabIndex === -1) {
+                            sidePanelContainerEl.tabIndex = 0
+                        }
+                        sidePanelContainerEl.focus()
                     }
-                } else {
-                    // If the side panel doesn't have any focusable children, focus the container instead
-                    if (sidePanelContainerEl.tabIndex === -1) {
-                        sidePanelContainerEl.tabIndex = 0
-                    }
-                    sidePanelContainerEl.focus()
                 }
             }
         }
+
         document.addEventListener('focusin', this.focusListener)
 
         // prevent scrolling outside of modal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {