@pie-element/image-cloze-association 10.3.0 → 10.3.1-beta.2

package/src/possible-response.jsx

@@ -40,9 +40,6 @@ const BaseContainer = styled('div')(() => ({
   '&.baseIncorrect': {
     border: `2px solid ${color.incorrect()} !important`,
   },
-  '&.selected': {
-    opacity: 0.7,
-  },
 }));
 
 const StyledSpan = styled(StaticHTMLSpan)(() => ({
@@ -53,17 +50,7 @@ const StyledSpan = styled(StaticHTMLSpan)(() => ({
   },
 }));
 
-const PossibleResponse = ({
-  canDrag,
-  containerStyle,
-  data,
-  onDragBegin,
-  answerChoiceTransparency,
-  isOverlay,
-  selectedResponse,
-  onSelectClick,
-  onPlacementClick,
-}) => {
+const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }) => {
   const rootRef = useRef(null);
   const longPressTimer = useRef(null);
 
@@ -77,31 +64,6 @@ const PossibleResponse = ({
     disabled: !canDrag,
   });
 
-  const isSelected =
-    !!selectedResponse && selectedResponse.id === data.id && selectedResponse.containerIndex === data.containerIndex;
-
-  const handleClick = (e) => {
-    if (!canDrag) return;
-
-    e.stopPropagation();
-
-    const isPlaced = data.containerIndex !== undefined;
-
-    if (isSelected) {
-      // Clicking the already-selected tile again deselects it.
-      onSelectClick?.(data);
-    } else if (selectedResponse && isPlaced) {
-      // Something else is selected, and this tile is already inside a container:
-      // place the selection into that same container (a swap/insert, handled by the
-      // existing handleOnAnswerSelect logic).
-      onPlacementClick?.(data.containerIndex);
-    } else {
-      // Nothing selected yet, or this is a pool item (pool items are never placement
-      // targets — the pool itself, in possible-responses.jsx, is): select this tile.
-      onSelectClick?.(data);
-    }
-  };
-
   const handleTouchEnd = () => {
     clearTimeout(longPressTimer.current);
   };
@@ -151,7 +113,6 @@ const PossibleResponse = ({
     answerChoiceTransparency: answerChoiceTransparency && !isDragging,
     [correctnessClass]: !!correctnessClass,
     textAnswerChoiceStyle: !containsImage && !isOverlay,
-    selected: isSelected && !isDragging,
   });
 
   const promptClassNames = classNames({ hiddenSpan: data.hidden });
@@ -164,7 +125,6 @@ const PossibleResponse = ({
         rootRef.current = ref;
         setNodeRef(ref);
       }}
-      onClick={handleClick}
       {...listeners}
       {...attributes}
     >
@@ -181,16 +141,12 @@ PossibleResponse.propTypes = {
   onDragBegin: PropTypes.func.isRequired,
   answerChoiceTransparency: PropTypes.bool,
   isOverlay: PropTypes.bool,
-  selectedResponse: PropTypes.object,
-  onSelectClick: PropTypes.func,
-  onPlacementClick: PropTypes.func,
 };
 
 PossibleResponse.defaultProps = {
   containerStyle: {},
   answerChoiceTransparency: false,
   isOverlay: false,
-  selectedResponse: null,
 };
 
 export default PossibleResponse;

package/src/possible-responses.jsx

@@ -22,40 +22,22 @@ const PossibleResponses = ({
   customStyle,
   isVertical,
   minHeight,
-  selectedResponse,
-  onSelectClick,
-  onPlacementClick,
-}) => {
-  const handlePoolClick = () => {
-    if (!canDrag) return;
-
-    if (selectedResponse) {
-      // `undefined` containerIndex means "the pool" — root.jsx's placeSelectedResponse
-      // routes it to handleOnAnswerRemove.
-      onPlacementClick?.(undefined);
-    }
-  };
-
-  return (
-    <BaseContainer style={customStyle} onClick={handlePoolClick}>
-      <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
-        {(data || []).map((item) => (
-          <PossibleResponse
-            canDrag={canDrag}
-            key={item.id}
-            data={item}
-            onDragBegin={onDragBegin}
-            answerChoiceTransparency={answerChoiceTransparency}
-            containerStyle={{ margin: '4px' }}
-            selectedResponse={selectedResponse}
-            onSelectClick={onSelectClick}
-            onPlacementClick={onPlacementClick}
-          />
-        ))}
-      </ICADroppablePlaceholder>
-    </BaseContainer>
-  );
-};
+}) => (
+  <BaseContainer style={customStyle}>
+    <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
+      {(data || []).map((item) => (
+        <PossibleResponse
+          canDrag={canDrag}
+          key={item.id}
+          data={item}
+          onDragBegin={onDragBegin}
+          answerChoiceTransparency={answerChoiceTransparency}
+          containerStyle={{ margin: '4px' }}
+        />
+      ))}
+    </ICADroppablePlaceholder>
+  </BaseContainer>
+);
 
 PossibleResponses.propTypes = {
   canDrag: PropTypes.bool.isRequired,
@@ -65,9 +47,6 @@ PossibleResponses.propTypes = {
   customStyle: PropTypes.object,
   isVertical: PropTypes.bool,
   minHeight: PropTypes.number,
-  selectedResponse: PropTypes.object,
-  onSelectClick: PropTypes.func,
-  onPlacementClick: PropTypes.func,
 };
 
 export default PossibleResponses;

package/src/root.jsx

@@ -16,16 +16,9 @@ import InteractiveSection from './interactive-section';
 import PossibleResponses from './possible-responses';
 import { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';
 import PossibleResponse from './possible-response';
-import { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';
 
 const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
 
-// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or
-// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the
-// click-to-select/click-to-place handlers below, or it would immediately reopen or
-// re-trigger a selection for a drag that just completed.
-const CLICK_AFTER_DRAG_GUARD_MS = 250;
-
 const StyledUiLayout = styled(UiLayout)({
   color: color.text(),
   backgroundColor: color.background(),
@@ -83,9 +76,7 @@ export class ImageClozeAssociationComponent extends React.Component {
       maxResponsePerZone: maxResponsePerZone || 1,
       showCorrect: false,
       isValidDrop: false,
-      selectedResponse: null,
     };
-    this.lastDragEndAt = 0;
   }
 
   onDragStart = (event) => {
@@ -95,7 +86,6 @@ export class ImageClozeAssociationComponent extends React.Component {
       this.setState({
         draggingElement: active.data.current,
         isValidDrop: false,
-        selectedResponse: active.data.current,
       });
     }
   };
@@ -122,9 +112,6 @@ export class ImageClozeAssociationComponent extends React.Component {
       isValidDrop: shouldDisableAnimation,
     });
 
-    this.cancelSelection();
-    this.lastDragEndAt = Date.now();
-
     if (!over || !active) {
       return;
     }
@@ -134,9 +121,7 @@ export class ImageClozeAssociationComponent extends React.Component {
     }
 
     if (over.id === 'ica-board') {
-      if (draggedItem.containerIndex !== undefined) {
-        this.handleOnAnswerRemove(draggedItem);
-      }
+      this.handleOnAnswerRemove(draggedItem);
       return;
     }
 
@@ -145,94 +130,6 @@ export class ImageClozeAssociationComponent extends React.Component {
     }
   };
 
-  onDragCancel = () => {
-    this.setState({ draggingElement: { id: '', value: '' } });
-    this.cancelSelection();
-    this.lastDragEndAt = Date.now();
-  };
-
-  isSameResponse = (a, b) => !!a && !!b && a.id === b.id && a.containerIndex === b.containerIndex;
-
-  // Click-to-select semantics: selecting the currently-selected response again clears
-  // the selection instead of re-selecting it.
-  toggleResponseSelection = (data) => {
-    this.setState((state) => ({
-      selectedResponse: this.isSameResponse(state.selectedResponse, data) ? null : data,
-    }));
-  };
-
-  cancelSelection = () => {
-    this.setState({ selectedResponse: null });
-  };
-
-  // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a
-  // click completes the placement below, it needs to be cleanly ended — otherwise
-  // dnd-kit would still think a drag is in progress. Escape is already configured as
-  // this sensor's cancel key (see the keyboardCodes passed to DragProvider below), and
-  // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level
-  // listener is reached from outside its sensor.
-  //
-  // Only dispatch when a drag is actually live (draggingElement.id is truthy) — this is
-  // a synthetic Escape keydown on `document`, so an unconditional dispatch would also be
-  // observed by any other document-level Escape listener (host player modals/dialogs,
-  // or another mounted instance of this same component) even when nothing here actually
-  // needed cancelling.
-  endAnyLiveKeyboardDrag = () => {
-    if (!this.state.draggingElement.id) {
-      return;
-    }
-
-    document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));
-  };
-
-  placeSelectedResponse = (containerIndex) => {
-    const { selectedResponse } = this.state;
-
-    if (!selectedResponse) {
-      return;
-    }
-
-    if (containerIndex === undefined) {
-      // Placing into the pool = removing it from wherever it currently is
-      if (selectedResponse.containerIndex !== undefined) {
-        this.handleOnAnswerRemove(selectedResponse);
-      }
-    } else {
-      this.handleOnAnswerSelect(selectedResponse, containerIndex);
-    }
-
-    this.cancelSelection();
-    this.endAnyLiveKeyboardDrag();
-    this.lastDragEndAt = Date.now();
-  };
-
-  isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS;
-
-  onResponseClick = (data) => {
-    if (this.isClickSoonAfterDragEnd()) {
-      return;
-    }
-
-    // A click that selects/deselects/switches a tile must end any dnd-kit drag that's
-    // still live from an earlier keyboard Space/Enter pick-up first — otherwise dnd-kit
-    // keeps thinking that earlier item is being dragged (it ignores new sensor
-    // activation while a drag is active) while selectedResponse visually points at
-    // whatever this click just selected. Ending the stale drag first (rather than
-    // after) matters: ending it also cancels the current selection as a side effect
-    // (see onDragCancel above), so doing it before
-    // toggleResponseSelection lets this click's own selection be the one that sticks.
-    this.endAnyLiveKeyboardDrag();
-    this.toggleResponseSelection(data);
-  };
-
-  onPlacementClick = (containerIndex) => {
-    if (this.isClickSoonAfterDragEnd()) {
-      return;
-    }
-
-    this.placeSelectedResponse(containerIndex);
-  };
-
   renderDragOverlay = () => {
     const { draggingElement } = this.state;
     const { model } = this.props;
@@ -456,9 +353,6 @@ export class ImageClozeAssociationComponent extends React.Component {
       responseContainerPadding,
       imageDropTargetPadding,
       maxResponsePerZone,
-      selectedResponse: this.state.selectedResponse,
-      onSelectClick: this.onResponseClick,
-      onPlacementClick: this.onPlacementClick,
     };
 
     const renderImage = () => (
@@ -487,22 +381,13 @@ export class ImageClozeAssociationComponent extends React.Component {
             }}
             isVertical={isVertical}
             minHeight={isVertical ? image?.height : undefined}
-            selectedResponse={this.state.selectedResponse}
-            onSelectClick={this.onResponseClick}
-            onPlacementClick={this.onPlacementClick}
           />
         </React.Fragment>
       );
     };
 
     return (
-      <DragProvider
-        onDragStart={this.onDragStart}
-        onDragEnd={this.onDragEnd}
-        onDragCancel={this.onDragCancel}
-        keyboardCoordinateGetter={closestDroppableKeyboardCoordinates}
-        keyboardCodes={{ start: ['Space', 'Enter'], cancel: ['Escape'], end: ['Space', 'Enter'] }}
-      >
+      <DragProvider onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
         <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>
           {showTeacherInstructions && (
             <StyledTeacherInstructions

package/lib/keyboard-coordinates.js

@@ -1,111 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.closestDroppableKeyboardCoordinates = void 0;
-var _core = require("@dnd-kit/core");
-/**
- * Custom keyboard coordinate getter for image-cloze-association's Tab-based placement.
- *
- * Tab/Shift+Tab cycle the dragged answer directly onto the next/previous enabled
- * droppable — a response container (`response-container-{index}`) or the choices pool
- * (`ica-board`) — sorted by on-screen position (top-to-bottom, then left-to-right),
- * since response containers are absolutely positioned over an image rather than laid
- * out as a simple list.
- *
- * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
- * the existing free-form arrow-key dragging behavior completely unchanged.
- */
-const closestDroppableKeyboardCoordinates = (event, {
-  context,
-  currentCoordinates
-}) => {
-  const {
-    code
-  } = event;
-  const isTab = code === 'Tab';
-  const isArrow = code === _core.KeyboardCode.Down || code === _core.KeyboardCode.Up || code === _core.KeyboardCode.Left || code === _core.KeyboardCode.Right;
-  if (!isTab && !isArrow) {
-    return undefined;
-  }
-  if (isArrow) {
-    return (0, _core.defaultKeyboardCoordinateGetter)(event, {
-      context,
-      currentCoordinates
-    });
-  }
-  event.preventDefault();
-  const {
-    droppableRects,
-    droppableContainers,
-    collisionRect
-  } = context;
-  if (!droppableRects || droppableRects.size === 0) {
-    return currentCoordinates;
-  }
-  const targets = [];
-  for (const [id, container] of droppableContainers) {
-    if (container?.disabled) continue;
-    const rect = droppableRects.get(id);
-    if (!rect) continue;
-    const center = {
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2
-    };
-    // Land the dragged item's own top-left corner at the target's center-left point,
-    // rather than at the target's own top-left corner (avoids overshooting into a
-    // neighboring droppable when the target is much wider than the dragged item).
-    const dropPosition = {
-      x: rect.left,
-      y: rect.top + rect.height / 2
-    };
-    targets.push({
-      id,
-      rect,
-      dropPosition,
-      center
-    });
-  }
-  if (targets.length === 0) {
-    return currentCoordinates;
-  }
-  const reverse = event.shiftKey;
-  targets.sort((a, b) => {
-    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
-    return a.center.x - b.center.x;
-  });
-
-  // Find the current target: whichever target's rect actually contains the dragged
-  // item's own center. This holds regardless of how the dragged item's size compares
-  // to the target's — a compact answer tile landed (per `dropPosition` above) at a much
-  // wider container's left edge is still contained within that container's rect.
-  // Comparing distances between reconstructed centers (as an earlier, buggy version of
-  // this same logic in match-list did) breaks down for exactly that shape: a
-  // reconstructed center can end up closer to a completely different droppable than to
-  // the one the item is actually sitting on, so the *next* press re-matches the wrong
-  // target and looks like it does nothing.
-  const draggedCenter = collisionRect ? {
-    x: collisionRect.left + collisionRect.width / 2,
-    y: collisionRect.top + collisionRect.height / 2
-  } : currentCoordinates;
-  let currentIndex = targets.findIndex(t => draggedCenter.x >= t.rect.left && draggedCenter.x <= t.rect.right && draggedCenter.y >= t.rect.top && draggedCenter.y <= t.rect.bottom);
-
-  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly
-  // inside any target (e.g. mid-flight after a free arrow-key move).
-  if (currentIndex === -1) {
-    let minDist = Infinity;
-    for (let i = 0; i < targets.length; i++) {
-      const dist = distance(currentCoordinates, targets[i].dropPosition);
-      if (dist < minDist) {
-        minDist = dist;
-        currentIndex = i;
-      }
-    }
-  }
-  const nextIndex = reverse ? (currentIndex - 1 + targets.length) % targets.length : (currentIndex + 1) % targets.length;
-  return targets[nextIndex].dropPosition;
-};
-exports.closestDroppableKeyboardCoordinates = closestDroppableKeyboardCoordinates;
-const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
-//# sourceMappingURL=keyboard-coordinates.js.map

package/lib/keyboard-coordinates.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard-coordinates.js","names":["_core","require","closestDroppableKeyboardCoordinates","event","context","currentCoordinates","code","isTab","isArrow","KeyboardCode","Down","Up","Left","Right","undefined","defaultKeyboardCoordinateGetter","preventDefault","droppableRects","droppableContainers","collisionRect","size","targets","id","container","disabled","rect","get","center","x","left","width","y","top","height","dropPosition","push","length","reverse","shiftKey","sort","a","b","Math","abs","draggedCenter","currentIndex","findIndex","t","right","bottom","minDist","Infinity","i","dist","distance","nextIndex","exports","sqrt"],"sources":["../src/keyboard-coordinates.js"],"sourcesContent":["import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';\n\n/**\n * Custom keyboard coordinate getter for image-cloze-association's Tab-based placement.\n *\n * Tab/Shift+Tab cycle the dragged answer directly onto the next/previous enabled\n * droppable — a response container (`response-container-{index}`) or the choices pool\n * (`ica-board`) — sorted by on-screen position (top-to-bottom, then left-to-right),\n * since response containers are absolutely positioned over an image rather than laid\n * out as a simple list.\n *\n * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving\n * the existing free-form arrow-key dragging behavior completely unchanged.\n */\nexport const closestDroppableKeyboardCoordinates = (event, { context, currentCoordinates }) => {\n  const { code } = event;\n  const isTab = code === 'Tab';\n  const isArrow =\n    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;\n\n  if (!isTab && !isArrow) {\n    return undefined;\n  }\n\n  if (isArrow) {\n    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });\n  }\n\n  event.preventDefault();\n\n  const { droppableRects, droppableContainers, collisionRect } = context;\n\n  if (!droppableRects || droppableRects.size === 0) {\n    return currentCoordinates;\n  }\n\n  const targets = [];\n\n  for (const [id, container] of droppableContainers) {\n    if (container?.disabled) continue;\n\n    const rect = droppableRects.get(id);\n\n    if (!rect) continue;\n\n    const center = {\n      x: rect.left + rect.width / 2,\n      y: rect.top + rect.height / 2,\n    };\n    // Land the dragged item's own top-left corner at the target's center-left point,\n    // rather than at the target's own top-left corner (avoids overshooting into a\n    // neighboring droppable when the target is much wider than the dragged item).\n    const dropPosition = {\n      x: rect.left,\n      y: rect.top + rect.height / 2,\n    };\n\n    targets.push({ id, rect, dropPosition, center });\n  }\n\n  if (targets.length === 0) {\n    return currentCoordinates;\n  }\n\n  const reverse = event.shiftKey;\n\n  targets.sort((a, b) => {\n    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;\n    return a.center.x - b.center.x;\n  });\n\n  // Find the current target: whichever target's rect actually contains the dragged\n  // item's own center. This holds regardless of how the dragged item's size compares\n  // to the target's — a compact answer tile landed (per `dropPosition` above) at a much\n  // wider container's left edge is still contained within that container's rect.\n  // Comparing distances between reconstructed centers (as an earlier, buggy version of\n  // this same logic in match-list did) breaks down for exactly that shape: a\n  // reconstructed center can end up closer to a completely different droppable than to\n  // the one the item is actually sitting on, so the *next* press re-matches the wrong\n  // target and looks like it does nothing.\n  const draggedCenter = collisionRect\n    ? { x: collisionRect.left + collisionRect.width / 2, y: collisionRect.top + collisionRect.height / 2 }\n    : currentCoordinates;\n\n  let currentIndex = targets.findIndex(\n    (t) =>\n      draggedCenter.x >= t.rect.left &&\n      draggedCenter.x <= t.rect.right &&\n      draggedCenter.y >= t.rect.top &&\n      draggedCenter.y <= t.rect.bottom,\n  );\n\n  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly\n  // inside any target (e.g. mid-flight after a free arrow-key move).\n  if (currentIndex === -1) {\n    let minDist = Infinity;\n\n    for (let i = 0; i < targets.length; i++) {\n      const dist = distance(currentCoordinates, targets[i].dropPosition);\n\n      if (dist < minDist) {\n        minDist = dist;\n        currentIndex = i;\n      }\n    }\n  }\n\n  const nextIndex = reverse\n    ? (currentIndex - 1 + targets.length) % targets.length\n    : (currentIndex + 1) % targets.length;\n\n  return targets[nextIndex].dropPosition;\n};\n\nconst distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n"],"mappings":"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","ignoreList":[]}

package/src/__tests__/image-drop-target.test.jsx

@@ -1,169 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import ImageDropTarget from '../image-drop-target';
-
-jest.mock('@dnd-kit/core', () => ({
-  useDroppable: () => ({
-    setNodeRef: jest.fn(),
-    isOver: false,
-  }),
-}));
-
-jest.mock('../possible-response', () => (props) => (
-  <div data-testid={`possible-response-${props.data.id}`} onClick={() => props.onSelectClick?.(props.data)}>
-    {props.data.value}
-  </div>
-));
-
-describe('ImageDropTarget', () => {
-  const baseProps = {
-    answers: [],
-    canDrag: true,
-    containerStyle: {},
-    draggingElement: { id: '' },
-    onDragAnswerBegin: jest.fn(),
-    onDragAnswerEnd: jest.fn(),
-    onDrop: jest.fn(),
-    index: 2,
-  };
-
-  describe('empty container', () => {
-    it('is a native tab stop (role=button, tabIndex=0) when canDrag', () => {
-      const { container } = render(<ImageDropTarget {...baseProps} />);
-      const target = container.firstChild;
-
-      expect(target.getAttribute('role')).toBe('button');
-      expect(target.getAttribute('tabindex')).toBe('0');
-    });
-
-    it('is not a tab stop when canDrag is false, and has no role either (I2)', () => {
-      const { container } = render(<ImageDropTarget {...baseProps} canDrag={false} />);
-      const target = container.firstChild;
-
-      expect(target.getAttribute('tabindex')).toBe('-1');
-      expect(target.getAttribute('role')).toBeNull();
-    });
-
-    it('places the selection here on click', () => {
-      const onPlacementClick = jest.fn();
-      const { container } = render(
-        <ImageDropTarget
-          {...baseProps}
-          selectedResponse={{ id: '9', containerIndex: undefined }}
-          onPlacementClick={onPlacementClick}
-        />,
-      );
-
-      fireEvent.click(container.firstChild);
-
-      expect(onPlacementClick).toHaveBeenCalledWith(2);
-    });
-
-    it('does nothing on click when nothing is selected', () => {
-      const onPlacementClick = jest.fn();
-      const { container } = render(<ImageDropTarget {...baseProps} onPlacementClick={onPlacementClick} />);
-
-      fireEvent.click(container.firstChild);
-
-      expect(onPlacementClick).not.toHaveBeenCalled();
-    });
-
-    it('places the selection here on Space/Enter', () => {
-      const onPlacementClick = jest.fn();
-      const { container } = render(
-        <ImageDropTarget
-          {...baseProps}
-          selectedResponse={{ id: '9', containerIndex: undefined }}
-          onPlacementClick={onPlacementClick}
-        />,
-      );
-
-      fireEvent.keyDown(container.firstChild, { code: 'Space' });
-
-      expect(onPlacementClick).toHaveBeenCalledWith(2);
-    });
-  });
-
-  describe('occupied container', () => {
-    const answers = [{ id: '7', value: 'Placed', containerIndex: 2 }];
-
-    it('is not its own tab stop and has no role either — occupied containers must not become unlabeled buttons for screen readers (I2)', () => {
-      const { container } = render(<ImageDropTarget {...baseProps} answers={answers} />);
-      const target = container.firstChild;
-
-      expect(target.getAttribute('tabindex')).toBe('-1');
-      expect(target.getAttribute('role')).toBeNull();
-    });
-
-    it('places the selection here when clicking empty background (not a specific tile)', () => {
-      const onPlacementClick = jest.fn();
-      const { container } = render(
-        <ImageDropTarget
-          {...baseProps}
-          answers={answers}
-          selectedResponse={{ id: '9', containerIndex: undefined }}
-          onPlacementClick={onPlacementClick}
-        />,
-      );
-
-      fireEvent.click(container.firstChild);
-
-      expect(onPlacementClick).toHaveBeenCalledWith(2);
-    });
-
-    it('forwards selection props to the placed tile, which handles its own click', () => {
-      const onSelectClick = jest.fn();
-      const { getByTestId } = render(
-        <ImageDropTarget {...baseProps} answers={answers} onSelectClick={onSelectClick} />,
-      );
-
-      fireEvent.click(getByTestId('possible-response-7'));
-
-      expect(onSelectClick).toHaveBeenCalledWith(answers[0]);
-    });
-  });
-
-  describe('hover affordance during click-to-select (I3)', () => {
-    it('gets the is-over highlight and a pointer cursor on hover when something is selected', () => {
-      const { container } = render(
-        <ImageDropTarget {...baseProps} selectedResponse={{ id: '9', containerIndex: undefined }} />,
-      );
-      const target = container.firstChild;
-
-      expect(target.className).not.toMatch(/\bis-over\b/);
-
-      fireEvent.mouseEnter(target);
-      expect(target.className).toMatch(/\bis-over\b/);
-      expect(target.style.cursor).toBe('pointer');
-
-      fireEvent.mouseLeave(target);
-      expect(target.className).not.toMatch(/\bis-over\b/);
-    });
-
-    it('does not show the is-over highlight on hover when nothing is selected', () => {
-      const { container } = render(<ImageDropTarget {...baseProps} selectedResponse={null} />);
-      const target = container.firstChild;
-
-      fireEvent.mouseEnter(target);
-
-      expect(target.className).not.toMatch(/\bis-over\b/);
-      expect(target.style.cursor).toBe('');
-    });
-
-    it('does not show the is-over highlight on hover when canDrag is false, even with a selection', () => {
-      const { container } = render(
-        <ImageDropTarget
-          {...baseProps}
-          canDrag={false}
-          selectedResponse={{ id: '9', containerIndex: undefined }}
-        />,
-      );
-      const target = container.firstChild;
-
-      fireEvent.mouseEnter(target);
-
-      expect(target.className).not.toMatch(/\bis-over\b/);
-      expect(target.style.cursor).toBe('');
-    });
-  });
-});