Add accessibility buttons to reorder/parsons questions (+ simplify code)

src/app/components/content/IsaacReorderQuestion.tsx

@@ -2,42 +2,16 @@ import React, {useEffect, useState} from "react";
 import {IsaacContentValueOrChildren} from "./IsaacContentValueOrChildren";
 import {IsaacReorderQuestionDTO, ItemChoiceDTO, ItemDTO} from "../../../IsaacApiTypes";
 import {Col, Row} from "reactstrap";
-import {DragDropContext, Draggable, Droppable, DropResult} from "@hello-pangea/dnd";
+import {DragDropContext, Droppable, DropResult} from "@hello-pangea/dnd";
 import _differenceBy from "lodash/differenceBy";
 import {useCurrentQuestionAttempt} from "../../services";
 import {IsaacQuestionProps} from "../../../IsaacAppTypes";
 import classNames from "classnames";
-import {Markup} from "../elements/markup";
 import {Immutable} from "immer";
-
-const ReorderDraggableItem = ({item, index, inAvailableItems, readonly}: {item: Immutable<ItemDTO>; index: number; inAvailableItems?: boolean; readonly?: boolean}) => {
-    return <Draggable
-        key={item.id}
-        draggableId={`${item.id || index}|reorder-item-choice`}
-        index={index}
-        isDragDisabled={readonly}
-    >
-        {(provided) => {
-            return <div
-                id={`${item.id || index}|reorder-item-${inAvailableItems ? "available" : "choice"}`}
-                className={`reorder-item`}
-                ref={provided.innerRef}
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                style={provided.draggableProps.style}
-            >
-                <Markup trusted-markup-encoding={"html"}>
-                    {item?.value ?? ""}
-                </Markup>
-            </div>;
-        }}
-    </Draggable>;
-};
+import { ParsonsDraggableItem } from "./IsaacParsonsQuestion";
 
 const IsaacReorderQuestion = ({doc, questionId, readonly} : IsaacQuestionProps<IsaacReorderQuestionDTO>) => {
-
     const {currentAttempt, dispatchSetCurrentAttempt} = useCurrentQuestionAttempt<ItemChoiceDTO>(questionId);
-
     const [availableItems, setAvailableItems] = useState<Immutable<ItemDTO>[]>([...doc.items ?? []]);
 
     const moveItem = (src: Immutable<ItemDTO>[] | undefined, fromIndex: number, dst: Immutable<ItemDTO>[] | undefined, toIndex: number) => {
@@ -139,7 +113,8 @@ const IsaacReorderQuestion = ({doc, questionId, readonly} : IsaacQuestionProps<I
                                 className={classNames("parsons-items", {"empty": !(availableItems && availableItems.length > 0), "drag-over": snapshot.isDraggingOver})}
                             >
                                 {availableItems && availableItems.map((item, index) =>
-                                    <ReorderDraggableItem key={item.id} item={item} index={index} inAvailableItems readonly={readonly}/>)}
+                                    <ParsonsDraggableItem key={item.id} currentItem={item} index={index} inAvailableItems readonly={readonly}
+                                        setItems={setAvailableItems} items={availableItems}/>)}
                                 {(!availableItems || availableItems.length === 0)
                                     ? <div>&nbsp;</div>
                                     : provided.placeholder}
@@ -155,7 +130,9 @@ const IsaacReorderQuestion = ({doc, questionId, readonly} : IsaacQuestionProps<I
                                 className={classNames("parsons-items", {"empty": !(currentAttempt && currentAttempt.items && currentAttempt.items.length > 0), "drag-over": snapshot.isDraggingOver})}
                             >
                                 {currentAttempt && currentAttempt.items && currentAttempt.items.map((item, index) =>
-                                    <ReorderDraggableItem key={item.id} item={item} index={index} readonly={readonly}/>)}
+                                    <ParsonsDraggableItem key={item.id} currentItem={item} index={index} readonly={readonly}
+                                        setItems={(items: Immutable<ItemDTO>[]) => dispatchSetCurrentAttempt({...currentAttempt, items})} 
+                                        items={(currentAttempt?.items || []) as Immutable<ItemDTO>[]}/>)}
                                 {(!currentAttempt || currentAttempt?.items?.length === 0)
                                     ? <div className="text-muted text-center">
                                         {readonly ? "No answer entered" : "Drag items across to build your answer"}

src/scss/common/questions.scss

@@ -352,7 +352,7 @@ figure .inline-container {
 
 .parsons-question {
   .parsons-items {
-    border: solid 1px #00000021;
+    border: solid 1px $gray-136;
     padding: 0 0.5em;
 
     &.empty {
@@ -363,23 +363,6 @@ figure .inline-container {
       }
     }
 
-    .parsons-item > pre {
-      margin: 0.5rem 0;
-      padding: 0.5em 1em;
-      cursor: grab; // Doesn't work?
-    }
-
-    .reorder-item {
-      > * {
-        overflow-x: auto;
-        margin: 0.5rem 0;
-        padding: 0.5em 1em;
-        cursor: grab;
-        background: var(--color-neutral-white, white);
-        border: solid 1px #00000021;
-      }
-    }
-
     // REMINDER: If you change the PARSONS_MAX_INDENT and PARSONS_INDENT_STEP
     // constants, you also have to change these two in here.
     $parsons-max-indent: 3;
@@ -392,50 +375,74 @@ figure .inline-container {
         }
       }
 
-      position: relative;
+      .indent-buttons {
+        display: flex;
+        align-items: center;
 
-      .controls {
-        display: none;
-      }
+        button {
+          display: grid;
+          position: relative;
+          justify-content: center;
+          align-content: center;
 
-      .show-controls {
-        .controls {
-          position: absolute;
-          right: 0.5rem;
-          top: 0.5rem;
-          display: block;
-
-          button {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            padding: 0;
-            background: $gray-120;
-
-            &.show:hover {
-              background-color: $primary !important;
-            }
-
-            &.hide {
-              opacity: 0.2;
-              cursor: default;
-            }
-
-            &.show {
-              opacity: 1.0;
-            }
+          width: 20px;
+          height: 20px;
+          padding: 0;
+          background-color: $gray-120;
+
+          &.show:hover {
+            background-color: $primary;
+          }
+
+          &.hide {
+            opacity: 0.2;
+            cursor: default;
           }
+
+          &.show {
+            opacity: 1.0;
+          }
+        }
+
+        // Use negative z-index rather than `display: none` to hide buttons so they can still be selected using keyboard controls
+        &:not(:has(:focus)) button {
+          z-index: -999;
+        }
+        &:has(:focus) button {
+          z-index: 2;
         }
       }
     }
 
-    // The fixed position of a selected parsons-item causes the box-shadow to be drawn in the wrong place,
-    // so we need to apply it to the correctly positioned child instead
     .parsons-item, .reorder-item {
-      &:focus-visible:focus-visible {
-        box-shadow: none;
-        > * {
-          @include focus-outline;
+      display: flex;
+      align-items: center;
+      position: relative;
+      border: solid 1px $gray-136;
+      margin: 0.5rem 0;
+      background: var(--color-neutral-white, white);
+
+      pre {
+        margin: 0.25em 0.5em;
+        padding: 0.25em 0;
+        border: none;
+        background: none;
+      }
+
+      .reorder-buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        button {
+          display: grid;
+          justify-content: center;
+        }
+      }
+
+      &:hover, &:focus-within {
+        .indent-buttons button {
+          z-index: 2;
         }
       }
     }

src/scss/cs/questions.scss

@@ -188,3 +188,11 @@
     margin-top: 0.7rem;
   }
 }
+
+.parsons-question {
+  .parsons-item, .reorder-item {
+    .reorder-buttons button.disabled {
+      opacity: 0.5;
+    }
+  }
+}

src/scss/phy/typography.scss

@@ -39,7 +39,6 @@ pre {
   background: var(--color-neutral-white);
   padding: 1rem;
   font-weight: 400;
-  border: solid 1px #00000021;
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.875rem;