@pocketprep/ui-kit 3.7.3 → 3.7.5

package/lib/components/Quiz/Question/BuildListChoicesContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="uikit-question-build-list-choices-container-root">
+    <div class="uikit-question-build-list-choices-container-root" @click="clearFocusState">
         <!-- 
             Visually hidden aria-live region for choice move announcements:
             "Moved Photosynthesis to position 2 of 6."
@@ -17,7 +17,7 @@
             <TransitionGroup
                 v-dark="isDarkMode"
                 v-breakpoint="breakpointsWithEl"
-                name="list"
+                :name="shouldDisableTransitions ? '' : 'list'"
                 tag="ol"
                 class="uikit-question-build-list-choices-container"
                 :class="{
@@ -126,6 +126,9 @@
                                 :disabled="index === 0"
                                 :tabindex="buttonsAreFocusable && index !== 0 ? 0 : -1"
                                 @click.prevent.stop="moveChoiceUp(index)"
+                                @keydown.enter.prevent.stop="moveChoiceUp(index)"
+                                @focus="setFocusedArrowButton(choice.key, 'up')"
+                                @blur="clearFocusState"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' up`"
                                 :title="'Move up'"
                             >
@@ -146,6 +149,9 @@
                                 :disabled="index === orderedChoices.length - 1"
                                 :tabindex="buttonsAreFocusable && index !== orderedChoices.length - 1 ? 0 : -1"
                                 @click.prevent.stop="moveChoiceDown(index)"
+                                @keydown.enter.prevent.stop="moveChoiceDown(index)"
+                                @focus="setFocusedArrowButton(choice.key, 'down')"
+                                @blur="clearFocusState"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' down`"
                                 :title="'Move down'"
                             >
@@ -195,11 +201,17 @@ const floatingChoiceKey = ref<string | null>(null)
 const choiceRefs = ref<Map<string, HTMLDivElement>>(new Map())
 const announcementMessage = ref<string>('')
 const isMoveTriggeredByArrowKey = ref<boolean>(false)
+const focusedArrowButton = ref<{ choiceKey: string; direction: 'up' | 'down' } | null>(null)
+const isMoveInProgress = ref<boolean>(false)
 
 const buttonsAreFocusable = computed(() => {
     return !showBuildListOrder.value && !reviewMode.value
 })
 
+const shouldDisableTransitions = computed(() => {
+    return reviewMode.value || showBuildListOrder.value
+})
+
 onMounted(() => {
     updateOrderedChoices()
 })
@@ -232,12 +244,56 @@ const setCardRef = (el: Element | ComponentPublicInstance | null, choiceKey: str
     }
 }
 
+const clearFocusState = () => {
+    // Don't clear focus state if we're in the middle of animation
+    // This prevents clearing focus when the button temporarily loses focus during animation
+    if (!isMoveInProgress.value) {
+        focusedArrowButton.value = null
+    }
+}
+
+const setFocusedArrowButton = (choiceKey: string, direction: 'up' | 'down') => {
+    focusedArrowButton.value = { choiceKey, direction }
+}
+
+const restoreFocusToArrowButton = (choiceKey: string, direction: 'up' | 'down') => {
+    const choiceEl = choiceRefs.value.get(choiceKey)
+    if (choiceEl) {
+        const buttonSelector = direction === 'up' 
+            ? '.uikit-question-build-list-choices-container__choice-up-button'
+            : '.uikit-question-build-list-choices-container__choice-down-button'
+        const button = choiceEl.querySelector(buttonSelector) as HTMLButtonElement
+        if (button && !button.disabled) {
+            button.focus()
+            setFocusedArrowButton(choiceKey, direction)
+        } else {
+            // Move focus to opposite button if focused button becomes disabled
+            const oppositeDirection = direction === 'up' ? 'down' : 'up'
+            const oppositeButtonSelector = oppositeDirection === 'up' 
+                ? '.uikit-question-build-list-choices-container__choice-up-button'
+                : '.uikit-question-build-list-choices-container__choice-down-button'
+            const oppositeButton = choiceEl.querySelector(oppositeButtonSelector) as HTMLButtonElement
+            if (oppositeButton && !oppositeButton.disabled) {
+                oppositeButton.focus()
+                setFocusedArrowButton(choiceKey, oppositeDirection)
+            } else {
+                clearFocusState()
+            }
+        }
+    }
+}
+
 const restoreFocusAfterMove = (movedChoiceKey: string) => {
     // Don't restore focus if we're in review mode or showing the build list order
     if (showBuildListOrder.value || reviewMode.value) {
         return
     }
     
+    // Don't restore focus to choice element if there's a focused arrow button
+    if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === movedChoiceKey) {
+        return
+    }
+    
     const delay = prefersReducedMotion() ? 0 : 50
     setTimeout(() => {
         const choiceEl = choiceRefs.value.get(movedChoiceKey)
@@ -262,7 +318,8 @@ const removeFocusAfterAnimation = (movedChoiceKey: string) => {
     }
     
     // Only remove focus if the move was NOT triggered by arrow keys
-    if (!isMoveTriggeredByArrowKey.value) {
+    // AND there's no focused arrow button that should maintain focus
+    if (!isMoveTriggeredByArrowKey.value && !focusedArrowButton.value) {
         const animationDelay = prefersReducedMotion() ? 0 : 350 // Slightly after animation completes
         setTimeout(() => {
             const choiceEl = choiceRefs.value.get(movedChoiceKey)
@@ -293,6 +350,9 @@ const moveChoiceUp = (index: number) => {
         const previousItem = newChoices[ index - 1 ]
         
         if (currentItem && previousItem) {
+            // Set move in progress flag
+            isMoveInProgress.value = true
+            
             // Set floating state for the clicked choice
             floatingChoiceKey.value = currentItem.key
             
@@ -309,6 +369,25 @@ const moveChoiceUp = (index: number) => {
             // Remove focus after animation if not triggered by arrow key
             removeFocusAfterAnimation(currentItem.key)
             
+            // Restore focus to arrow button if it was previously focused
+            if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === currentItem.key) {
+                const delay = prefersReducedMotion() ? 0 : 400 // After animation completes
+                setTimeout(() => {
+                    const focusedButton = focusedArrowButton.value
+                    if (focusedButton) {
+                        restoreFocusToArrowButton(currentItem.key, focusedButton.direction)
+                    }
+                    // Clear move in progress flag after focus restoration
+                    isMoveInProgress.value = false
+                }, delay)
+            } else {
+                // Clear move in progress flag if no focus restoration needed
+                const delay = prefersReducedMotion() ? 0 : 400
+                setTimeout(() => {
+                    isMoveInProgress.value = false
+                }, delay)
+            }
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -325,6 +404,9 @@ const moveChoiceDown = (index: number) => {
         const nextItem = newChoices[ index + 1 ]
         
         if (currentItem && nextItem) {
+            // Set move in progress flag
+            isMoveInProgress.value = true
+            
             // Set floating state for the clicked choice
             floatingChoiceKey.value = currentItem.key
             
@@ -342,6 +424,25 @@ const moveChoiceDown = (index: number) => {
             // Remove focus after animation
             removeFocusAfterAnimation(currentItem.key)
             
+            // Restore focus to arrow button if it was previously focused
+            if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === currentItem.key) {
+                const delay = prefersReducedMotion() ? 0 : 400 // After animation completes
+                setTimeout(() => {
+                    const focusedButton = focusedArrowButton.value
+                    if (focusedButton) {
+                        restoreFocusToArrowButton(currentItem.key, focusedButton.direction)
+                    }
+                    // Clear move in progress flag after focus restoration
+                    isMoveInProgress.value = false
+                }, delay)
+            } else {
+                // Clear move in progress flag if no focus restoration needed
+                const delay = prefersReducedMotion() ? 0 : 400
+                setTimeout(() => {
+                    isMoveInProgress.value = false
+                }, delay)
+            }
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -523,6 +624,29 @@ watch(selectedBuildListChoiceOrder, () => {
         }
     }
 
+    // Disable transitions when in review mode or showing build list order
+    &--review-mode,
+    &--correct,
+    &--incorrect,
+    &--teach-group-review {
+        .uikit-question-build-list-choices-container__choice-container {
+            transition: none;
+
+            &--floating {
+                transform: none;
+            }
+        }
+
+        .uikit-question-build-list-choices-container__choice {
+            transition: none;
+        }
+
+        .uikit-question-build-list-choices-container__choice-up-button,
+        .uikit-question-build-list-choices-container__choice-down-button {
+            transition: none;
+        }
+    }
+
     &__choice-number,
     &__mobile-choice-number {
         display: flex;

package/lib/components/Quiz/Question/QuestionContext.vue

@@ -95,7 +95,7 @@ const isCorrectlyAnswered = computed(() => {
         return isMatrixQuestionCorrect.value
     }
 
-    if (isBuildListQuestion) {
+    if (isBuildListQuestion.value) {
         return isBuildListOrderCorrect.value
     }
 

package/lib/components/Quiz/Question.vue

@@ -93,7 +93,11 @@
                 v-if="question.passage || passageImageUrl"
                 ref="uikit-question__passage-and-image-dropdown"
                 class="uikit-question__passage-and-image-dropdown"
-                :class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
+                :class="{ 
+                    'uikit-question__passage-and-image-dropdown--review-mode': reviewMode,
+                    'uikit-question__passage-and-image-dropdown--build-list': isBuildListQuestion,
+
+                }"
                 @togglePassageImageLongAltDropdown="togglePassageImageLongAlt"
             />
             <Paywall
@@ -2075,6 +2079,11 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
         &--review-mode {
             display: block;
         }
+
+        &--build-list:not(#{&}--review-mode):not(#{&}--mobile) {
+            max-width: 452px;
+            margin-left: -8px;
+        }
     }
 
     &__unanswered-teach-review-label {

package/package.json

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