@pocketprep/ui-kit 3.6.0 → 3.7.1

package/lib/components/Forms/Radio.vue

@@ -72,6 +72,7 @@
 import { ref } from 'vue'
 import { dark as vDark } from '../../directives'
 import RadioButton from './RadioButton.vue'
+import { stripHtmlTags } from '../../utils'
 
 interface IItem {
     value: string | number
@@ -115,14 +116,6 @@ const keyPressedItem = (e: KeyboardEvent) => {
     }
 }
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
 </script>
 
 <style lang="scss">

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

@@ -12,10 +12,10 @@
             {{ announcementMessage }}
         </div>    
         <div
-            v-breakpoint="breakpointsWithEl"
             class="uikit-question-build-list-choices-container-wrapper"
         >
             <TransitionGroup
+                v-dark="isDarkMode"
                 v-breakpoint="breakpointsWithEl"
                 name="list"
                 tag="ol"
@@ -27,6 +27,7 @@
                         (showBuildListOrder || reviewMode) && !isBuildListOrderCorrect,
                     'uikit-question-build-list-choices-container--teach-group-review': 
                         (showBuildListOrder || reviewMode) && isTeachGroupReview,
+                    'uikit-question-build-list-choices-container--review-mode': reviewMode,
                 }"
                 role="list"
                 :aria-label="`Build list with ${orderedChoices.length} items`"
@@ -46,6 +47,9 @@
                         v-dark="isDarkMode" 
                         v-breakpoint="breakpointsWithEl"
                         class="uikit-question-build-list-choices-container__choice-number"
+                        :class="{
+                            'uikit-question-build-list-choices-container__choice-number--review-mode': reviewMode
+                        }"
                     >
                         {{ index + 1 }}
                     </div>
@@ -54,14 +58,14 @@
                         v-breakpoint="breakpointsWithEl"
                         class="uikit-question-build-list-choices-container__choice"
                         :class="{
-                            'uikit-question-build-list-choices-container__choice--showing-answer': 
-                                reviewMode || showBuildListOrder
+                            'uikit-question-build-list-choices-container__choice--review-mode': reviewMode
                         }"
                         role="group"
                         :aria-label="`Choice ${index + 1}: ${stripHtmlTags(choice.text || '')}`"
-                        :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
+                        :tabindex="-1"
                         @keydown="handleCardKeydown($event, index)"
-                        @click="handleCardClick($event)"
+                        @click.prevent
+                        @mousedown.prevent
                         :ref="(el) => setCardRef(el, choice.key)"
                     >
                         <div 
@@ -72,7 +76,9 @@
                                 'uikit-question-build-list-choices-container__mobile-choice-number--correct': 
                                     (reviewMode || showBuildListOrder) && isChoiceInCorrectPosition(choice, index),
                                 'uikit-question-build-list-choices-container__mobile-choice-number--incorrect': 
-                                    (reviewMode || showBuildListOrder) && !isChoiceInCorrectPosition(choice, index)
+                                    (reviewMode || showBuildListOrder) && !isChoiceInCorrectPosition(choice, index),
+                                'uikit-question-build-list-choices-container__mobile-choice-number--review-mode': 
+                                    reviewMode,
                             }"
                         >
                             {{ index + 1 }}
@@ -92,7 +98,7 @@
                                 {{ getCorrectPositionOrderNumber(choice) }}
                             </div>
                             <Icon
-                                v-if="isChoiceInCorrectPosition(choice, index)"
+                                v-if="isChoiceInCorrectPosition(choice, index) && !reviewMode"
                                 v-dark="isDarkMode"
                                 v-breakpoint="breakpointsWithEl"
                                 class="uikit-question-build-list-choices-container__answer-correct-icon"
@@ -100,7 +106,7 @@
                                 
                             />
                             <Icon
-                                v-else
+                                v-else-if="!isChoiceInCorrectPosition(choice, index) && !reviewMode"
                                 v-dark="isDarkMode"
                                 v-breakpoint="breakpointsWithEl"
                                 class="uikit-question-build-list-choices-container__answer-incorrect-icon"
@@ -119,7 +125,8 @@
                                         index === 0
                                 }"
                                 :disabled="index === 0"
-                                @click="moveChoiceUp(index)"
+                                :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
+                                @click.prevent.stop="moveChoiceUp(index)"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' up`"
                                 :title="'Move up'"
                             >
@@ -138,7 +145,8 @@
                                         index === orderedChoices.length - 1
                                 }"
                                 :disabled="index === orderedChoices.length - 1"
-                                @click="moveChoiceDown(index)"
+                                :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
+                                @click.prevent.stop="moveChoiceDown(index)"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' down`"
                                 :title="'Move down'"
                             >
@@ -163,6 +171,7 @@ import Icon from '../../Icons/Icon.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
 import type { TBuildListChoice } from '../question'
+import { stripHtmlTags } from '../../../utils'
 
 const emit = defineEmits<{
     'reorderBuildList': [ choices: TBuildListChoice[] ]
@@ -186,6 +195,7 @@ const orderedChoices = ref<TBuildListChoice[]>([])
 const floatingChoiceKey = ref<string | null>(null)
 const choiceRefs = ref<Map<string, HTMLDivElement>>(new Map())
 const announcementMessage = ref<string>('')
+const isMoveTriggeredByArrowKey = ref<boolean>(false)
 
 onMounted(() => {
     updateOrderedChoices()
@@ -196,15 +206,6 @@ const prefersReducedMotion = () => {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches
 }
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
-
 const updateOrderedChoices = () => {
     // Map the selectedBuildListChoiceOrder keys to full TBuildListChoice objects
     if (selectedBuildListChoiceOrder.value.length) {
@@ -238,11 +239,37 @@ const restoreFocusAfterMove = (movedChoiceKey: string) => {
     setTimeout(() => {
         const choiceEl = choiceRefs.value.get(movedChoiceKey)
         if (choiceEl) {
+            // Temporarily make the choice focusable for animation
+            choiceEl.setAttribute('tabindex', '0')
             choiceEl.focus()
+            
+            // Remove tabindex after animation completes
+            const animationDelay = prefersReducedMotion() ? 0 : 350
+            setTimeout(() => {
+                choiceEl.setAttribute('tabindex', '-1')
+            }, animationDelay)
         }
     }, delay)
 }
 
+const removeFocusAfterAnimation = (movedChoiceKey: string) => {
+    // Don't remove focus if we're in review mode or showing the build list order
+    if (showBuildListOrder.value || reviewMode.value) {
+        return
+    }
+    
+    // Only remove focus if the move was NOT triggered by arrow keys
+    if (!isMoveTriggeredByArrowKey.value) {
+        const animationDelay = prefersReducedMotion() ? 0 : 350 // Slightly after animation completes
+        setTimeout(() => {
+            const choiceEl = choiceRefs.value.get(movedChoiceKey)
+            if (choiceEl) {
+                choiceEl.blur()
+            }
+        }, animationDelay)
+    }
+}
+
 // For accessibility, we want to announce to the user where they moved the choice
 // to in the ordered list. ie: “Moved Photosynthesis to position 2 of 6.”
 const announceMove = (choiceText: string, newPosition: number, totalItems: number) => {
@@ -269,8 +296,6 @@ const moveChoiceUp = (index: number) => {
             newChoices[ index ] = previousItem
             newChoices[ index - 1 ] = currentItem
             orderedChoices.value = newChoices
-            emit('reorderBuildList', newChoices)
-            
             // Announce the move
             const choiceText = stripHtmlTags(currentItem.text || '')
             announceMove(choiceText, index, orderedChoices.value.length)
@@ -278,6 +303,9 @@ const moveChoiceUp = (index: number) => {
             // Restore focus to the moved card
             restoreFocusAfterMove(currentItem.key)
             
+            // Remove focus after animation if not triggered by arrow key
+            removeFocusAfterAnimation(currentItem.key)
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -300,7 +328,6 @@ const moveChoiceDown = (index: number) => {
             newChoices[ index ] = nextItem
             newChoices[ index + 1 ] = currentItem
             orderedChoices.value = newChoices
-            emit('reorderBuildList', newChoices)
             
             // Announce the move
             const choiceText = stripHtmlTags(currentItem.text || '')
@@ -309,6 +336,9 @@ const moveChoiceDown = (index: number) => {
             // Restore focus to the moved card
             restoreFocusAfterMove(currentItem.key)
             
+            // Remove focus after animation
+            removeFocusAfterAnimation(currentItem.key)
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -332,27 +362,39 @@ const isChoiceInCorrectPosition = (choice: TBuildListChoice, currentIndex: numbe
     return correctOrderPosition === currentOrderPosition
 }
 
-const handleCardClick = (event: MouseEvent) => {
-    if (showBuildListOrder.value || reviewMode.value) {
-        event.preventDefault()
-        event.stopPropagation()
-    }
-}
-
 const handleCardKeydown = (event: KeyboardEvent, index: number) => {
     // Handle Alt+Arrow shortcuts for moving cards
     if (event.altKey) {
         if (event.key === 'ArrowUp' || event.key === 'Up') {
             event.preventDefault()
+            isMoveTriggeredByArrowKey.value = true
             moveChoiceUp(index)
+            // Reset flag after a short delay
+            setTimeout(() => {
+                isMoveTriggeredByArrowKey.value = false
+            }, 100)
         } else if (event.key === 'ArrowDown' || event.key === 'Down') {
             event.preventDefault()
+            isMoveTriggeredByArrowKey.value = true
             moveChoiceDown(index)
+            // Reset flag after a short delay
+            setTimeout(() => {
+                isMoveTriggeredByArrowKey.value = false
+            }, 100)
         }
     }
 }
 
-watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
+watch(orderedChoices, () => {
+    const newChoices = orderedChoices.value
+    emit('reorderBuildList', newChoices)
+}, { deep: true })
+
+watch(selectedBuildListChoiceOrder, () => {
+    if ((reviewMode.value || showBuildListOrder.value)) {
+        updateOrderedChoices() 
+    }
+})
 </script>
 
 <style lang="scss">
@@ -384,22 +426,23 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
     flex-direction: column;
     gap: 12px;
     list-style: none;
-    margin: 0;
+    margin: 0 0 0 -46px;
     padding: 0;
 
     &::after {
-            content: '';
-            position: absolute;
-            top: -8px;
-            bottom: -8px;
-            left: 32px;
-            right: -8px;
-            border-radius: 11px;
-            pointer-events: none;
+        content: '';
+        position: absolute;
+        top: -8px;
+        bottom: -8px;
+        left: 8px;
+        right: 10px;
+        border-radius: 11px;
+        pointer-events: none;
 
-        }
+    }
 
     &--mobile {
+        margin: 0;
         &::after {
             content: '';
             position: absolute;
@@ -413,6 +456,17 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
         }
     }
 
+    &--review-mode:not(&--mobile) {
+        margin: 0;
+        max-width: 492px;
+        width: 100%;
+        
+        &::after {
+            left: -8px;
+            right: -8px;
+        }
+    }
+
     &--correct {
         &::after {
             display: block;
@@ -456,8 +510,12 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
             z-index: 10;
             
             .uikit-question-build-list-choices-container__choice {
-                box-shadow: 0 8px 24px 0 rgba(71, 89, 103, 0.4);
-                border-radius: 8px;
+                outline: 2px solid $brand-blue;
+                outline-offset: 2px;
+                
+                &--dark {
+                    outline-color: $banana-bread;
+                }
             }
         }
     }
@@ -465,7 +523,7 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
     &__choice-number,
     &__mobile-choice-number {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
         justify-content: center;
         width: 24px;
         height: 24px;
@@ -483,13 +541,14 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
     }
 
     &__choice-number {
+        &--review-mode,
         &--mobile {
             display: none;
         }
     }
 
     &__mobile-choice-number {
-        &:not(&--mobile) {
+        &:not(&--mobile, &--review-mode) {
             display: none;
         }
 
@@ -530,28 +589,15 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
         box-shadow: 0 1px 4px 0 rgba(71, 89, 103, 0.30);
         outline: none;
 
-        &:focus:not(&--showing-answer) {
-            outline: 2px solid $brand-blue;
-            outline-offset: 2px;
-        }
-
         &--dark {
             border: 1px solid $slate;
             background-color: $brand-black;
             box-shadow: 0 1px 4px 0 rgba(71, 89, 103, 0.30);
-
-            &:focus:not(&--showing-answer) {
-                outline-color: $banana-bread;
-            }
         }
 
         &--mobile {
             width: 100%;
         }
-
-        &--showing-answer {
-            gap: 27px;
-        }
     }
 
     &__choice-text {
@@ -595,9 +641,30 @@ watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
         cursor: pointer;
         transition: all 0.2s ease;
 
+        &:focus {
+            outline: none;
+            border: 2px solid $white;
+            box-shadow: 0 0 0 2px $brand-blue-hover;
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $brand-blue-hover;
+        }
+
         &--dark {
             background-color: $banana-bread;
             color: $brand-black;
+
+            &:focus {
+                border: 2px solid $brand-black;
+                box-shadow: 0 0 0 2px $butterscotch;
+            }
+
+            &:hover,
+            &:focus {
+                background-color: $butterscotch;
+            }
         }
         
         &--disabled {

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

@@ -277,6 +277,7 @@ import PocketButton from '../../Buttons/Button.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
 import type { TChoiceKey } from '../question'
+import { stripHtmlTags } from '../../../utils'
 
 const emit = defineEmits<{
     'emitChoiceFocusIn': [ choiceKey: TChoiceKey ]
@@ -318,15 +319,6 @@ const {
     breakpointsWithEl,
 } = useQuestionContext()
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
-
 const emitChoiceFocusIn = (choiceKey: TChoiceKey) => {
     emit('emitChoiceFocusIn', choiceKey)
 }