Allow dropdown inputs to be manually enabled for DnD questions for accessibility

src/IsaacAppTypes.tsx

@@ -61,7 +61,7 @@ export type Action =
     | {type: ACTION_TYPE.USER_PREFERENCES_REQUEST}
     | {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS; userPreferences: UserPreferencesDTO}
     | {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_FAILURE; errorMessage: string}
-
+    | {type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET; accessibilityType: AccessibilitySettings}
     | {type: ACTION_TYPE.USER_LOG_IN_REQUEST; provider: ApiTypes.AuthenticationProvider}
     | {type: ACTION_TYPE.USER_LOG_IN_RESPONSE_SUCCESS; authResponse: ApiTypes.AuthenticationResponseDTO}
     | {type: ACTION_TYPE.USER_LOG_IN_RESPONSE_FAILURE; errorMessage: string}
@@ -232,6 +232,7 @@ export interface AccessibilitySettings {
     PREFER_MATHML?: boolean;
     REDUCED_MOTION?: boolean;
     SHOW_INACCESSIBLE_WARNING?: boolean;
+    NON_DRAGGING_INPUTS?: boolean;
 }
 
 export interface UserConsent {
@@ -462,6 +463,7 @@ export const DragAndDropRegionContext = React.createContext<(
     nonSelectedItems: Immutable<ReplaceableItem>[],
     allItems: Immutable<ReplaceableItem>[],
     zoneIds: Set<string>,
+    dragAndDropEnabled: boolean;
 } | undefined>(undefined);
 
 export const InlineContext = React.createContext<{

src/app/components/content/IsaacClozeQuestion.tsx

@@ -16,7 +16,7 @@ import {
     isDefined,
     isTouchDevice,
     useCurrentQuestionAttempt,
-    useDeviceSize
+    useDeviceSize,
 } from "../../services";
 import {customKeyboardCoordinates} from "../../services/clozeQuestionKeyboardCoordinateGetter";
 import {IsaacContentValueOrChildren} from "./IsaacContentValueOrChildren";
@@ -42,6 +42,7 @@ import {DragAndDropRegionContext, IsaacQuestionProps, ReplaceableItem} from "../
 import {v4 as uuid_v4} from "uuid";
 import {Immutable} from "immer";
 import {arraySwap, SortableContext} from "@dnd-kit/sortable";
+import { selectors, useAppSelector } from "../../state";
 
 const DropZoneItem = lazy(() => import("../elements/DnDItem"));
 
@@ -134,10 +135,13 @@ const useAutoScroll = ({active, acceleration, interval}: {active: boolean; accel
 };
 
 const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: IsaacQuestionProps<IsaacClozeQuestionDTO, ItemValidationResponseDTO>) => {
-    const deviceSize = useDeviceSize();
     const { currentAttempt: rawCurrentAttempt, dispatchSetCurrentAttempt } = useCurrentQuestionAttempt<ItemChoiceDTO>(questionId);
     const currentAttempt = useMemo(() => rawCurrentAttempt ? {...rawCurrentAttempt, items: replaceNullItems(rawCurrentAttempt.items)} : undefined, [rawCurrentAttempt]);
 
+    const deviceSize = useDeviceSize(); 
+    const accessibilityType = useAppSelector(selectors.accessibility.type);
+    const dragAndDropEnabled = isDefined(accessibilityType) ? !accessibilityType?.NON_DRAGGING_INPUTS : !(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)));
+
     const cssFriendlyQuestionPartId = questionId?.replace(/\|/g, '-') ?? ""; // Maybe we should clean up IDs more?
     const withReplacement = doc.withReplacement ?? false;
 
@@ -488,6 +492,7 @@ const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: Isa
             nonSelectedItems,
             allItems,
             zoneIds: new Set<string>(),
+            dragAndDropEnabled
         }}>
             <DndContext
                 sensors={sensors}
@@ -502,7 +507,7 @@ const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: Isa
                     {doc.children}
                 </IsaacContentValueOrChildren>
 
-                {(!(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)))) && <>
+                {dragAndDropEnabled && <>
                     {/* The item attached to the users cursor while dragging (just for display, shouldn't contain useDraggable/useSortable hooks) */}
                     <DragOverlay>
                         {activeItem && <Badge className="p-1 cloze-item cloze-bg is-dragging" color="theme">

src/app/components/content/IsaacDragAndDropQuestion.tsx

@@ -42,6 +42,8 @@ import {DragAndDropRegionContext, IsaacQuestionProps, ReplaceableItem} from "../
 import {v4 as uuid_v4} from "uuid";
 import {Immutable} from "immer";
 import {arraySwap, SortableContext} from "@dnd-kit/sortable";
+import { useAccessibilitySettings } from "../../services/accessibility";
+import { selectors, useAppSelector } from "../../state";
 
 const DropZoneItem = lazy(() => import("../elements/DnDItem"));
 
@@ -134,8 +136,16 @@ const useAutoScroll = ({active, acceleration, interval}: {active: boolean; accel
     }, [active]);
 };
 
-const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse}: IsaacQuestionProps<IsaacDragAndDropQuestionDTO, DndValidationResponseDTO>) => {
+export const useDefaultDragAndDropInputMode = () => {
+    const accessibilitySettings = useAccessibilitySettings();
     const deviceSize = useDeviceSize();
+    const accessibilityType = useAppSelector(selectors.accessibility.type);
+    console.log("ac", accessibilityType);
+
+    return !(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)) || accessibilitySettings.NON_DRAGGING_INPUTS || false);
+};
+
+const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse}: IsaacQuestionProps<IsaacDragAndDropQuestionDTO, DndValidationResponseDTO>) => {
     const { currentAttempt: rawCurrentAttempt, dispatchSetCurrentAttempt } = useCurrentQuestionAttempt<DndChoiceDTO>(questionId);
     const currentAttempt = useMemo(() => rawCurrentAttempt ? {...rawCurrentAttempt, items: replaceNullItems(rawCurrentAttempt.items)} : undefined, [rawCurrentAttempt]);
 
@@ -155,6 +165,10 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
             .map(({replacementId: _, ...item}) => item);
     };
 
+    const deviceSize = useDeviceSize();
+    const accessibilityType = useAppSelector(selectors.accessibility.type);
+    const dragAndDropEnabled = isDefined(accessibilityType) ? !accessibilityType?.NON_DRAGGING_INPUTS : !(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)));
+
     const cssFriendlyQuestionPartId = questionId?.replace(/\|/g, '-') ?? ""; // Maybe we should clean up IDs more?
     const withReplacement = doc.withReplacement ?? false;
 
@@ -511,6 +525,7 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
             nonSelectedItems,
             allItems,
             zoneIds: new Set<string>(),
+            dragAndDropEnabled
         }}>
             <DndContext
                 sensors={sensors}
@@ -525,7 +540,7 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
                     {doc.children}
                 </IsaacContentValueOrChildren>
 
-                {(!(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)))) && <>
+                {dragAndDropEnabled && <>
                     {/* The item attached to the users cursor while dragging (just for display, shouldn't contain useDraggable/useSortable hooks) */}
                     <DragOverlay>
                         {activeItem && <Badge className="p-1 cloze-item cloze-bg is-dragging" color="theme">

src/app/components/elements/PageMetadata.tsx

@@ -9,15 +9,18 @@ import { TeacherNotes } from './TeacherNotes';
 import { useLocation } from 'react-router';
 import { SidebarButton } from './SidebarButton';
 import { HelpButton } from './HelpButton';
-import { above, below, isAda, isPhy, useDeviceSize } from '../../services';
+import { above, ACTION_TYPE, below, isAda, isPhy, siteSpecific, useDeviceSize } from '../../services';
 import type { Location } from 'history';
 import classNames from 'classnames';
 import { UserContextPicker } from './inputs/UserContextPicker';
 import { LLMFreeTextQuestionIndicator } from './LLMFreeTextQuestionIndicator';
 import { CrossTopicQuestionIndicator } from './CrossTopicQuestionIndicator';
-import { selectors, useAppSelector } from '../../state';
+import { selectors, useAppDispatch, useAppSelector } from '../../state';
 import { BookmarkButton } from './BookmarkButton';
 import { FeatureFlag, FeatureFlagWrapper } from '../../services/featureFlag';
+import { Spacer } from './Spacer';
+import StyledToggle from "../elements/inputs/StyledToggle";
+import { StyledCheckbox } from './inputs/StyledCheckbox';
 
 type PageMetadataProps = {
     doc?: SeguePageDTO;
@@ -40,6 +43,23 @@ type PageMetadataProps = {
     }
 );
 
+export const DragAndDropInputModeToggle = ({dragAndDropEnabled, toggleDragAndDropEnabled}: {dragAndDropEnabled: boolean, toggleDragAndDropEnabled: () => void}) => {
+    return siteSpecific(<div className="d-flex flex-column align-items-center w-min-content mb-1">
+        <span>Question input mode</span>
+        <Spacer />
+        <StyledToggle
+            checked={dragAndDropEnabled}
+            falseLabel="Dropdown"
+            trueLabel="Drag and drop"
+            onChange={toggleDragAndDropEnabled}
+        />
+    </div>,
+    <div className="mt-1 ms-1">
+        <StyledCheckbox checked={!dragAndDropEnabled} onChange={toggleDragAndDropEnabled} label={<span className="text-muted">Use dropdowns for drag and drop questions</span>} /> 
+    </div>
+    );
+};
+
 interface ActionButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
     location: Location;
     isQuestion: boolean;
@@ -73,13 +93,18 @@ interface TagStackProps extends React.HTMLAttributes<HTMLDivElement> {
 const TagStack = ({doc, className}: TagStackProps) => {
     const isCrossTopic = doc?.tags?.includes("cross_topic");
     const pageContainsLLMFreeTextQuestion = useAppSelector(selectors.questions.includesLLMFreeTextQuestion);
+    const displayDragAndDropToggle = useAppSelector(selectors.questions.includesClozeOrDragAndDropQuestion) && isAda;
 
     return <div className={className}>
         {(isCrossTopic || pageContainsLLMFreeTextQuestion) && <div className="d-lg-flex align-items-center gap-3 me-3">
             {isAda && isCrossTopic && <CrossTopicQuestionIndicator/>}
             {pageContainsLLMFreeTextQuestion && <LLMFreeTextQuestionIndicator/>}
+            {displayDragAndDropToggle && <DragAndDropInputModeToggle dragAndDropEnabled={true} toggleDragAndDropEnabled={() => {}} />}
         </div>}
-        <EditContentButton doc={doc}/>
+        <div>
+            <EditContentButton doc={doc}/>
+            {displayDragAndDropToggle && !(isCrossTopic || pageContainsLLMFreeTextQuestion) && <DragAndDropInputModeToggle dragAndDropEnabled={true} toggleDragAndDropEnabled={() => {}} />}
+        </div>
     </div>;
 };
 
@@ -117,6 +142,15 @@ export const PageMetadata = (props: PageMetadataProps) => {
     const deviceSize = useDeviceSize();
     const actionButtonsFloat = noTitle && children;
 
+    const dispatch = useAppDispatch();
+    const pageContainsClozeOrDragAndDropQuestion = useAppSelector(selectors.questions.includesClozeOrDragAndDropQuestion);
+
+    const accessibilityType = useAppSelector(selectors.accessibility.type);
+    const dragAndDropEnabled = !accessibilityType?.NON_DRAGGING_INPUTS;
+    const toggleDragAndDropEnabled = () => {
+        dispatch({type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET, accessibilityType: {"NON_DRAGGING_INPUTS": dragAndDropEnabled}});
+    };    
+
     return <>
         {isPhy && showSidebarButton && sidebarInTitle && below['md'](deviceSize) && <SidebarButton buttonTitle={sidebarButtonText} absolute/>}
         <div className="page-metadata">
@@ -140,10 +174,16 @@ export const PageMetadata = (props: PageMetadataProps) => {
             <div className="d-flex align-items-end">
                 {isPhy && <TagStack doc={doc} className="d-flex align-items-end gap-3"/>}
                 {isConcept && <UserContextPicker className={classNames("flex-grow-1", {"mt-3": isAda})}/>}
+                {isPhy && pageContainsClozeOrDragAndDropQuestion && <>
+                    <Spacer />
+                    <DragAndDropInputModeToggle dragAndDropEnabled={dragAndDropEnabled} toggleDragAndDropEnabled={toggleDragAndDropEnabled} />
+                </>
+                }
             </div>
 
             {isPhy && <TeacherNotes notes={doc?.teacherNotes} />}
         </div>
         {isPhy && showSidebarButton && !sidebarInTitle && below['md'](deviceSize) && <SidebarButton className="my-2" buttonTitle={sidebarButtonText}/>}
     </>;
 };
+

src/app/components/elements/markup/portals/InlineDropZones.tsx

@@ -4,7 +4,7 @@ import React, {useContext, useEffect, useRef, useState} from "react";
 import {Dropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap";
 import {useDroppable} from "@dnd-kit/core";
 import classNames from "classnames";
-import {CLOZE_DROP_ZONE_ID_PREFIX, NULL_CLOZE_ITEM, below, isAda, isDefined, isPhy, isTouchDevice, useDeviceSize} from "../../../../services";
+import {CLOZE_DROP_ZONE_ID_PREFIX, NULL_CLOZE_ITEM, isAda, isDefined, isPhy} from "../../../../services";
 import { Markup } from "..";
 import DropZoneItem from "../../DnDItem";
 
@@ -20,7 +20,6 @@ interface InlineDropRegionProps {
 // Inline droppables rendered for each registered drop region
 function InlineDropRegion({divId, zoneId, emptyWidth, emptyHeight, rootElement, skipPortalling}: InlineDropRegionProps) {
     const dropRegionContext = useContext(DragAndDropRegionContext);
-    const deviceSize = useDeviceSize();
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const droppableId = CLOZE_DROP_ZONE_ID_PREFIX + zoneId;
     const dropdownItems = dropRegionContext?.allItems ?? [];
@@ -114,8 +113,7 @@ function InlineDropRegion({divId, zoneId, emptyWidth, emptyHeight, rootElement,
     </Dropdown>;
 
     if (dropRegionContext && droppableTarget) {
-        const result = (deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize))) 
-            ? dropdownZone : draggableDropZone;
+        const result = dropRegionContext?.dragAndDropEnabled ? draggableDropZone : dropdownZone;
         return skipPortalling ? result : ReactDOM.createPortal(result, droppableTarget);
     }
     return null;

src/app/components/elements/panels/UserAccessibilitySettings.tsx

@@ -34,8 +34,7 @@ export const UserAccessibilitySettings = ({ accessibilitySettings, setAccessibil
                 /></b>
                 <p>{`Enabling this will reduce motion effects on the platform. Browser preference will take priority over this setting.`}</p>
             </WithLinkableSetting>
-            <div className="pt-2"/>
-            <WithLinkableSetting id={"prefer-mathml-feature"}>
+            <WithLinkableSetting id={"show-inaccessible-warning-feature"}>
                 <b><StyledCheckbox 
                     checked={accessibilitySettings.SHOW_INACCESSIBLE_WARNING ?? isTeacherOrAbove(user)}
                     onChange={e => {
@@ -49,6 +48,20 @@ export const UserAccessibilitySettings = ({ accessibilitySettings, setAccessibil
                 /></b>
                 <p id="show-inaccessible-helptext">{`Enabling this will display warnings on certain content that may be inaccessible to assistive technologies.`}</p>
             </WithLinkableSetting>
+            <WithLinkableSetting id={"non-dragging-movement-feature"}>
+                <b><StyledCheckbox checked={accessibilitySettings.NON_DRAGGING_INPUTS ?? false}
+                    onChange={e => {
+                        setAccessibilitySettings((oldDs) => ({...oldDs, NON_DRAGGING_INPUTS: e.target.checked}));
+                    }}
+                    color={siteSpecific("primary", "")}
+                    label={<p>Enable non-dragging alternative inputs</p>}
+                    id={"non-dragging-movement"}
+                    aria-describedby="non-dragging-movement-helptext"
+                    removeVerticalOffset
+                /></b>
+                <p id="non-dragging-helptext">{`Enabling this will allow you to use alternative input methods that don't require dragging for certain question types (e.g. drag-and-drop).`}</p>
+            </WithLinkableSetting>
+            {/* Seperate maths-specific setting from the general site-wide accessibility settings */}
             <div className="section-divider" />
             <div className="pt-2"/>
             <WithLinkableSetting id={"prefer-mathml-feature"}>

src/app/services/constants.ts

@@ -130,6 +130,8 @@ export enum ACTION_TYPE {
     USER_PREFERENCES_RESPONSE_SUCCESS= "USER_PREFERENCES_RESPONSE_SUCCESS",
     USER_PREFERENCES_RESPONSE_FAILURE = "USER_PREFERENCES_RESPONSE_FAILURE",
 
+    ACCESSIBILITY_TYPE_SET = "ACCESSIBILITY_TYPE_SET",
+
     USER_PASSWORD_RESET_REQUEST= "USER_PASSWORD_RESET_REQUEST",
     USER_PASSWORD_RESET_RESPONSE_SUCCESS ="USER_PASSWORD_RESET_RESPONSE_SUCCESS",
     USER_PASSWORD_RESET_RESPONSE_FAILURE = "USER_PASSWORD_RESET_RESPONSE_FAILURE",

src/app/state/reducers/index.ts

@@ -29,6 +29,7 @@ import {
     topicSlice,
     linkableSettingSlice,
     sidebarSlice,
+    accessibilityType,
 } from "../index";
 
 export const rootReducer = combineReducers({
@@ -90,6 +91,9 @@ export const rootReducer = combineReducers({
     // Linkable settings
     linkableSetting: linkableSettingSlice.reducer,
 
+    // Accessibility
+    accessibilityType,
+
     // API reducer
     [isaacApi.reducerPath]: isaacApi.reducer
 });

src/app/state/reducers/userState.ts

@@ -1,4 +1,4 @@
-import {Action, UserPreferencesDTO} from "../../../IsaacAppTypes";
+import {AccessibilitySettings, Action, UserPreferencesDTO} from "../../../IsaacAppTypes";
 import {ACTION_TYPE} from "../../services";
 import {UserAuthenticationSettingsDTO} from "../../../IsaacApiTypes";
 import {userApi} from "../index";
@@ -40,3 +40,15 @@ export const totpChallengePending = (totpChallengePending: TotpChallengePendingS
             return totpChallengePending;
     }
 };
+
+type AccessibilityTypeState = AccessibilitySettings | null;
+export const accessibilityType = (accessibilityType: AccessibilityTypeState = null, action: Action) => {
+    switch (action.type) {
+        case ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS:
+            return action.userPreferences.ACCESSIBILITY ?? accessibilityType;
+        case ACTION_TYPE.ACCESSIBILITY_TYPE_SET:
+            return action.accessibilityType;
+        default:
+            return accessibilityType;
+    }
+};

src/app/state/selectors.tsx

@@ -46,6 +46,9 @@ export const selectors = {
         },
         includesLLMFreeTextQuestion: (state: AppState) => {
             return !!state?.questions?.questions.some(q => q.type === "isaacLLMFreeTextQuestion");
+        },
+        includesClozeOrDragAndDropQuestion: (state: AppState) => {
+            return !!state?.questions?.questions.some(q => q.type === "isaacClozeQuestion" || q.type === "isaacDndQuestion");
         }
     },
 
@@ -91,6 +94,10 @@ export const selectors = {
         previousContext: (state: AppState) => state?.pageContext?.previousContext ?? undefined,
         stage: (state: AppState) => state?.pageContext?.stage,
         subject: (state: AppState) => state?.pageContext?.subject,
+    },
+
+    accessibility: {
+        type: (state: AppState) => state?.accessibilityType
     }
 };
 

src/scss/common/questions.scss

@@ -529,6 +529,10 @@ figure .inline-container {
 .cloze-dropdown > button {
   min-width: 40px !important; // Bootstrap thinks its important
 
+  &.btn-secondary, &.btn-outline-secondary {
+    background-color: white;
+  }
+
   &.empty.empty {
     &, &:hover, &:active, &:focus { // Apply regardless of hover
       border: grey solid 1px !important;