@pocketprep/ui-kit 3.0.39 → 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/Quiz/Question.vue

@@ -102,7 +102,7 @@
                 :class="{
                     'uikit-question__prompt--passage-and-image': question.passage || passageImageUrl,
                 }"
-                v-html="question.question"
+                v-html="question.prompt"
             />
             <PocketButton
                 v-if="question.passage || passageImageUrl"
@@ -461,7 +461,7 @@
                                         'uikit-question__toggle-dropdown-explanation-img-description--open':
                                             showExplanationImageLongAlt,
                                         'uikit-question__toggle-dropdown-explanation-img-description--no-reference':
-                                            !question.reference || hideReferences,
+                                            !reference || hideReferences,
                                     }"
                                     :is-dark-mode="isDarkMode"
                                     :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
@@ -490,12 +490,12 @@
                                     v-html="explanationImageLongAlt"
                                 />
                                 <div
-                                    v-if="question.reference && !hideReferences"
+                                    v-if="reference && !hideReferences"
                                     v-dark="isDarkMode"
                                     class="uikit-question__dropdown-reference"
                                 >
                                     <span class="uikit-question__dropdown-reference-label">Reference: </span>
-                                    <div v-html="question.reference" />
+                                    <div v-html="reference" />
                                 </div>
                             </div>
                         </div>
@@ -661,7 +661,7 @@
                             'uikit-question__toggle-summary-dropdown-explanation-img-description--open':
                                 showExplanationImageLongAlt,
                             'uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference':
-                                !question.reference || hideReferences,
+                                !reference || hideReferences,
                         }"
                         :is-dark-mode="isDarkMode"
                         :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
@@ -690,12 +690,12 @@
                         v-html="explanationImageLongAlt"
                     />
                     <div
-                        v-if="question.reference && !hideReferences"
+                        v-if="reference && !hideReferences"
                         v-dark="isDarkMode"
                         class="uikit-question__summary-dropdown-reference"
                     >
                         <span class="uikit-question__summary-dropdown-reference-label">Reference: </span>
-                        <div v-html="question.reference" />
+                        <div v-html="reference" />
                     </div>
                 </div>
                 <Icon
@@ -924,12 +924,12 @@
                     v-html="explanationImageLongAlt"
                 />
                 <div
-                    v-if="question.reference && !hideReferences"
+                    v-if="reference && !hideReferences"
                     v-dark="isDarkMode"
                     class="uikit-question__reference"
                 >
                     <span class="uikit-question__reference-label">Reference: </span>
-                    <div v-html="question.reference" />
+                    <div v-html="reference" />
                 </div>
                 <div
                     v-if="!reviewMode"
@@ -1001,7 +1001,7 @@ type TViewNames = {
     },
 })
 export default class Question extends Vue {
-    @Prop() question!: Study.Class.ExamDataJSON
+    @Prop() question!: Study.Class.QuestionJSON
     @Prop() questionNumber!: number
     @Prop() quizLength!: number
     @Prop({ default: '' }) imageUrlPrefix!: string
@@ -1094,33 +1094,31 @@ export default class Question extends Vue {
     }
 
     get passageImageUrl () {
-        const imageUrl = this.question.images?.passage?.url
-                || this.question.images?.Question   // Legacy support - TODO: remove when `Question` is deprecated
+        const imageUrl = this.question.passageImage?.url
         
         return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
     }
 
     get passageImageAlt () {
-        return this.question.images?.passage?.altText
+        return this.question.passageImage?.altText
     }
 
     get passageImageLongAlt () {
-        return this.question.images?.passage?.longAltText
+        return this.question.passageImage?.longAltText
     }
 
     get explanationImageUrl () {
-        const imageUrl = this.question.images?.explanation?.url
-                || this.question.images?.Explanation   // Legacy support - TODO: remove when `Explanation` is deprecated
+        const imageUrl = this.question.explanationImage?.url
         
         return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
     }
 
     get explanationImageAlt () {
-        return this.question.images?.explanation?.altText
+        return this.question.explanationImage?.altText
     }
 
     get explanationImageLongAlt () {
-        return this.question.images?.explanation?.longAltText
+        return this.question.explanationImage?.longAltText
     }
 
     get showPassageAndImage () {
@@ -1137,18 +1135,15 @@ export default class Question extends Vue {
         }
     }
 
+    get reference () {
+        return this.question.references?.length ? this.question.references.join('') : undefined
+    }
+
     get answers (): TChoice[] {
-        const answers = [
-            { text: this.question.answer, key: 'a1' },
-            { text: this.question.answer2, key: 'a2' },
-            { text: this.question.answer3, key: 'a3' },
-            { text: this.question.answer4, key: 'a4' },
-            { text: this.question.answer5, key: 'a5' },
-            { text: this.question.answer6, key: 'a6' },
-            { text: this.question.answer7, key: 'a7' },
-            { text: this.question.answer8, key: 'a8' },
-            { text: this.question.answer9, key: 'a9' },
-        ] as const
+        const answers = this.question.choices.filter(choice => choice.isCorrect).map((choice, index) => ({
+            text: choice.text,
+            key: `a${index + 1}` as `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+        }))
         
         return answers.filter(choice => !!choice.text)
     }
@@ -1158,17 +1153,10 @@ export default class Question extends Vue {
     }
 
     get distractors (): TChoice[] {
-        const distractors = [
-            { text: this.question.distractor1, key: 'd1' },
-            { text: this.question.distractor2, key: 'd2' },
-            { text: this.question.distractor3, key: 'd3' },
-            { text: this.question.distractor4, key: 'd4' },
-            { text: this.question.distractor5, key: 'd5' },
-            { text: this.question.distractor6, key: 'd6' },
-            { text: this.question.distractor7, key: 'd7' },
-            { text: this.question.distractor8, key: 'd8' },
-            { text: this.question.distractor9, key: 'd9' },
-        ] as const
+        const distractors = this.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
+            text: choice.text,
+            key: `d${index + 1}` as `d${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+        }))
 
         return distractors.filter(choice => !!choice.text)
     }

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.0.39",
+  "version": "3.1.1",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -77,7 +77,7 @@
     "vue-facing-decorator": "2.1.20"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.8.10",
+    "@pocketprep/types": "1.11.1",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
     "@vitejs/plugin-vue": "4.2.1",