@pocketprep/ui-kit 3.5.30 → 3.7.0

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

@@ -0,0 +1,714 @@
+<template>
+    <div class="uikit-question-build-list-choices-container-root">
+        <!-- 
+            Visually hidden aria-live region for choice move announcements:
+            "Moved Photosynthesis to position 2 of 6."
+         -->
+        <div
+            aria-live="polite"
+            aria-atomic="true"
+            class="uikit-question-build-list-choices-container__announcements"
+        >
+            {{ announcementMessage }}
+        </div>    
+        <div
+            v-breakpoint="breakpointsWithEl"
+            class="uikit-question-build-list-choices-container-wrapper"
+        >
+            <TransitionGroup
+                v-breakpoint="breakpointsWithEl"
+                name="list"
+                tag="ol"
+                class="uikit-question-build-list-choices-container"
+                :class="{
+                    'uikit-question-build-list-choices-container--correct': 
+                        (showBuildListOrder || reviewMode) && isBuildListOrderCorrect,
+                    'uikit-question-build-list-choices-container--incorrect': 
+                        (showBuildListOrder || reviewMode) && !isBuildListOrderCorrect,
+                    'uikit-question-build-list-choices-container--teach-group-review': 
+                        (showBuildListOrder || reviewMode) && isTeachGroupReview,
+                }"
+                role="list"
+                :aria-label="`Build list with ${orderedChoices.length} items`"
+            >
+                <li
+                    v-for="(choice, index) in orderedChoices"
+                    :key="choice.key"
+                    class="uikit-question-build-list-choices-container__choice-container"
+                    :class="{
+                        'uikit-question-build-list-choices-container__choice-container--floating': 
+                            floatingChoiceKey === choice.key
+                    }"
+                    role="listitem"
+                    :aria-label="`Item ${index + 1} of ${orderedChoices.length}: ${stripHtmlTags(choice.text || '')}`"
+                >
+                    <div 
+                        v-dark="isDarkMode" 
+                        v-breakpoint="breakpointsWithEl"
+                        class="uikit-question-build-list-choices-container__choice-number"
+                    >
+                        {{ index + 1 }}
+                    </div>
+                    <div
+                        v-dark="isDarkMode"
+                        v-breakpoint="breakpointsWithEl"
+                        class="uikit-question-build-list-choices-container__choice"
+                        :class="{
+                            'uikit-question-build-list-choices-container__choice--showing-answer': 
+                                reviewMode || showBuildListOrder
+                        }"
+                        role="group"
+                        :aria-label="`Choice ${index + 1}: ${stripHtmlTags(choice.text || '')}`"
+                        :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
+                        @keydown="handleCardKeydown($event, index)"
+                        @click="handleCardClick($event)"
+                        :ref="(el) => setCardRef(el, choice.key)"
+                    >
+                        <div 
+                            v-dark="isDarkMode"
+                            v-breakpoint="breakpointsWithEl" 
+                            class="uikit-question-build-list-choices-container__mobile-choice-number"
+                            :class="{
+                                '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)
+                            }"
+                        >
+                            {{ index + 1 }}
+                        </div>
+                        <div v-dark="isDarkMode" class="uikit-question-build-list-choices-container__choice-text">
+                            {{ stripHtmlTags(choice.text || '') }}
+                        </div>
+                        <div 
+                            v-if="reviewMode || showBuildListOrder"
+                            class="uikit-question-build-list-choices-container__answer-info"
+                        >
+                            <div
+                                v-if="!isChoiceInCorrectPosition(choice, index)"
+                                v-dark="isDarkMode"
+                                class="uikit-question-build-list-choices-container__correct-position-order-number"
+                            >
+                                {{ getCorrectPositionOrderNumber(choice) }}
+                            </div>
+                            <Icon
+                                v-if="isChoiceInCorrectPosition(choice, index)"
+                                v-dark="isDarkMode"
+                                v-breakpoint="breakpointsWithEl"
+                                class="uikit-question-build-list-choices-container__answer-correct-icon"
+                                type="correct"
+                                
+                            />
+                            <Icon
+                                v-else
+                                v-dark="isDarkMode"
+                                v-breakpoint="breakpointsWithEl"
+                                class="uikit-question-build-list-choices-container__answer-incorrect-icon"
+                                type="incorrect"
+                            />
+                        </div>
+                        <div
+                            v-else
+                            class="uikit-question-build-list-choices-container__choice-actions"
+                        >
+                            <button
+                                v-dark="isDarkMode"
+                                class="uikit-question-build-list-choices-container__choice-up-button"
+                                :class="{
+                                    'uikit-question-build-list-choices-container__choice-up-button--disabled': 
+                                        index === 0
+                                }"
+                                :disabled="index === 0"
+                                @click="moveChoiceUp(index)"
+                                :aria-label="`Move '${stripHtmlTags(choice.text || '')}' up`"
+                                :title="'Move up'"
+                            >
+                                <Icon
+                                    v-dark="isDarkMode"
+                                    class="uikit-question-build-list-choices-container__up-button-icon"
+                                    type="arrow" 
+                                    :aria-hidden="true"
+                                />
+                            </button>
+                            <button
+                                v-dark="isDarkMode"
+                                class="uikit-question-build-list-choices-container__choice-down-button"
+                                :class="{
+                                    'uikit-question-build-list-choices-container__choice-down-button--disabled': 
+                                        index === orderedChoices.length - 1
+                                }"
+                                :disabled="index === orderedChoices.length - 1"
+                                @click="moveChoiceDown(index)"
+                                :aria-label="`Move '${stripHtmlTags(choice.text || '')}' down`"
+                                :title="'Move down'"
+                            >
+                                <Icon
+                                    v-dark="isDarkMode"
+                                    class="uikit-question-build-list-choices-container__down-button-icon"
+                                    type="arrow" 
+                                    :aria-hidden="true"
+                                />
+                            </button>
+                        </div>
+                    </div>
+                </li>
+            </TransitionGroup>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, type ComponentPublicInstance } from 'vue'
+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[] ]
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    breakpointsWithEl,
+    buildListChoices,
+    isBuildListOrderCorrect,
+    isDarkMode,
+    isTeachGroupReview,
+    reviewMode,
+    selectedBuildListChoiceOrder,
+    showBuildListOrder,
+} = useQuestionContext()
+
+const orderedChoices = ref<TBuildListChoice[]>([])
+const floatingChoiceKey = ref<string | null>(null)
+const choiceRefs = ref<Map<string, HTMLDivElement>>(new Map())
+const announcementMessage = ref<string>('')
+
+onMounted(() => {
+    updateOrderedChoices()
+})
+
+// Check if user prefers reduced motion
+const prefersReducedMotion = () => {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+const updateOrderedChoices = () => {
+    // Map the selectedBuildListChoiceOrder keys to full TBuildListChoice objects
+    if (selectedBuildListChoiceOrder.value.length) {
+        orderedChoices.value = selectedBuildListChoiceOrder.value.map(key => 
+            buildListChoices.value.find(choice => choice.key === key)
+        ).filter(Boolean) as TBuildListChoice[]
+    } else {
+        orderedChoices.value = buildListChoices.value
+    }
+}
+
+const setCardRef = (el: Element | ComponentPublicInstance | null, choiceKey: string) => {
+    if (el && '$el' in el) {
+        const choiceEl = el.$el as HTMLDivElement
+        if (choiceEl) {
+            choiceRefs.value.set(choiceKey, choiceEl)
+        }
+    } else if (el) {
+        const choiceEl = el as HTMLDivElement
+        choiceRefs.value.set(choiceKey, choiceEl)
+    }
+}
+
+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
+    }
+    
+    const delay = prefersReducedMotion() ? 0 : 50
+    setTimeout(() => {
+        const choiceEl = choiceRefs.value.get(movedChoiceKey)
+        if (choiceEl) {
+            choiceEl.focus()
+        }
+    }, delay)
+}
+
+// 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) => {
+    // Clear previous announcement
+    announcementMessage.value = ''
+    
+    // Set new announcement after a brief delay to ensure screen readers pick it up
+    const delay = prefersReducedMotion() ? 0 : 10
+    setTimeout(() => {
+        announcementMessage.value = `Moved ${choiceText} to position ${newPosition} of ${totalItems}`
+    }, delay)
+}
+
+const moveChoiceUp = (index: number) => {
+    if (index > 0) {
+        const newChoices = [ ...orderedChoices.value ]
+        const currentItem = newChoices[ index ]
+        const previousItem = newChoices[ index - 1 ]
+        
+        if (currentItem && previousItem) {
+            // Set floating state for the clicked choice
+            floatingChoiceKey.value = currentItem.key
+            
+            newChoices[ index ] = previousItem
+            newChoices[ index - 1 ] = currentItem
+            orderedChoices.value = newChoices
+            // Announce the move
+            const choiceText = stripHtmlTags(currentItem.text || '')
+            announceMove(choiceText, index, orderedChoices.value.length)
+            
+            // Restore focus to the moved card
+            restoreFocusAfterMove(currentItem.key)
+            
+            // Clear floating state after animation completes
+            const animationDelay = prefersReducedMotion() ? 0 : 300
+            setTimeout(() => {
+                floatingChoiceKey.value = null
+            }, animationDelay)
+        }
+    }
+}
+
+const moveChoiceDown = (index: number) => {
+    if (index < orderedChoices.value.length - 1) {
+        const newChoices = [ ...orderedChoices.value ]
+        const currentItem = newChoices[ index ]
+        const nextItem = newChoices[ index + 1 ]
+        
+        if (currentItem && nextItem) {
+            // Set floating state for the clicked choice
+            floatingChoiceKey.value = currentItem.key
+            
+            newChoices[ index ] = nextItem
+            newChoices[ index + 1 ] = currentItem
+            orderedChoices.value = newChoices
+            
+            // Announce the move
+            const choiceText = stripHtmlTags(currentItem.text || '')
+            announceMove(choiceText, index + 2, orderedChoices.value.length)
+            
+            // Restore focus to the moved card
+            restoreFocusAfterMove(currentItem.key)
+            
+            // Clear floating state after animation completes
+            const animationDelay = prefersReducedMotion() ? 0 : 300
+            setTimeout(() => {
+                floatingChoiceKey.value = null
+            }, animationDelay)
+        }
+    }
+}
+ 
+const getCorrectPositionOrderNumber = (choice: TBuildListChoice) => {
+    return Number(choice?.key.substring(1))
+}
+
+const isChoiceInCorrectPosition = (choice: TBuildListChoice, currentIndex: number): boolean => {
+    const correctOrderPosition = getCorrectPositionOrderNumber(choice)
+    if (!correctOrderPosition) {
+        return false
+    }
+    
+    const currentOrderPosition = currentIndex + 1
+    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()
+            moveChoiceUp(index)
+        } else if (event.key === 'ArrowDown' || event.key === 'Down') {
+            event.preventDefault()
+            moveChoiceDown(index)
+        }
+    }
+}
+
+
+watch(orderedChoices, () => {
+    const newChoices = orderedChoices.value
+    emit('reorderBuildList', newChoices)
+}, { deep: true })
+
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
+
+.uikit-question-build-list-choices-container__announcements {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+.uikit-question-build-list-choices-container-root {
+    display: contents;
+}
+
+.uikit-question-build-list-choices-container-wrapper {
+    display: contents;
+}
+
+.uikit-question-build-list-choices-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &::after {
+            content: '';
+            position: absolute;
+            top: -8px;
+            bottom: -8px;
+            left: 32px;
+            right: -8px;
+            border-radius: 11px;
+            pointer-events: none;
+
+        }
+
+    &--mobile {
+        &::after {
+            content: '';
+            position: absolute;
+            top: -8px;
+            bottom: -8px;
+            left: -8px;
+            right: -8px;
+            border-radius: 11px;
+            pointer-events: none;
+
+        }
+    }
+
+    &--correct {
+        &::after {
+            display: block;
+            border: 2px solid $cadaverous;
+        }
+
+        &--dark::after {
+            border-color: $jungle-green;
+        }
+    }
+
+    &--incorrect {
+        &::after {
+            display: block;
+            border: 2px solid $pepper;
+        }
+
+        &--dark::after {
+            border-color: $rosa;
+        }
+    }
+
+    &--teach-group-review {
+        &::after {
+            display: none;
+        }
+
+        &--dark::after {
+            display: none;
+        }
+    }
+
+    &__choice-container {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        transition: all 0.3s ease;
+
+        &--floating {
+            transform: translateY(-4px);
+            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;
+            }
+        }
+    }
+
+    &__choice-number,
+    &__mobile-choice-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        background-color: $brand-black;
+        color: $white;
+        border-radius: 50%;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+        
+        &--dark {
+            background-color: $jet;
+        }
+    }
+
+    &__choice-number {
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__mobile-choice-number {
+        &:not(&--mobile) {
+            display: none;
+        }
+
+        &--correct {
+            background-color: $spectral-green;
+            color: $white;
+
+            &--dark {
+                background-color: $jungle-green;
+                color: $brand-black;
+            }
+        }
+
+        &--incorrect {
+            background-color: $white;
+            border: 1px solid $pepper;
+            color: $pepper;
+
+            &--dark {
+                background-color: $brand-black;
+                border: 1px solid $rosa;
+                color: $rosa;
+            }
+        }
+    }
+
+    &__choice {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: 16px;
+        padding: 12px 16px;
+        transition: all 0.3s ease;
+        flex: 1;
+        border-radius: 5px;
+        border: 1px solid rgba($pewter, 0.85);
+        background-color: $white;
+        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 {
+        flex: 1 0 0;
+        color: $brand-black;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--dark {
+            color: $barely-background;
+        }
+    }
+
+    &__choice-actions {
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+        flex-shrink: 0;
+    }
+
+    &__answer-info {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    &__choice-up-button,
+    &__choice-down-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border: none;
+        border-radius: 50%;
+        background-color: $brand-blue;
+        color: $white;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &--dark {
+            background-color: $banana-bread;
+            color: $brand-black;
+        }
+        
+        &--disabled {
+            opacity: 0.3;
+            cursor: default;
+        }
+    }
+
+    &__up-button-icon,
+    &__down-button-icon {
+        width: 16px;
+        height: 12px;
+        flex-shrink: 0;
+    }
+
+    &__up-button-icon {
+        transform: rotate(270deg);
+    }
+
+    &__down-button-icon {
+        transform: rotate(90deg);
+    }
+
+    &__correct-position-order-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        background-color: $slate;
+        color: $white;
+        border-radius: 50%;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--dark {
+            background-color: $pewter;
+            color: $brand-black;
+        }
+    }
+
+    &__answer-correct-icon,
+    &__answer-incorrect-icon {
+        width: 21px;
+        height: 22px;
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__answer-correct-icon {
+        color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
+    }
+
+    &__answer-incorrect-icon {
+        color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
+    }
+
+    // TransitionGroup animations
+    .list-move,
+    .list-enter-active,
+    .list-leave-active {
+        transition: all 0.2s ease;
+    }
+
+    .list-enter-from,
+    .list-leave-to {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+
+    .list-leave-active {
+        position: absolute;
+        width: 100%;
+    }
+
+    // Respect prefers-reduced-motion
+    @media (prefers-reduced-motion: reduce) {
+        .list-move,
+        .list-enter-active,
+        .list-leave-active {
+            transition: none;
+        }
+
+        .list-enter-from,
+        .list-leave-to {
+            opacity: 1;
+            transform: none;
+        }
+
+        &__choice-container {
+            transition: none;
+
+            &--floating {
+                transform: none;
+            }
+        }
+
+        &__choice {
+            transition: none;
+        }
+
+        &__choice-up-button,
+        &__choice-down-button {
+            transition: none;
+        }
+    }
+}
+</style>