From 0167b7e032ca016295b16fc6e54731cdf671af3f Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Mon, 22 Jul 2024 19:09:13 -0500
Subject: [PATCH] Backport of preventing checkwork tab stops when disabled

Backport of PR #222 to 0.6 branch
---
 package-lock.json                             |  4 +-
 .../src/components/abstract/BaseComponent.js  |  4 +-
 packages/doenetml/package.json                |  2 +-
 .../doenetml/src/Viewer/renderers/answer.jsx  | 28 +++++-
 .../src/Viewer/renderers/booleanInput.jsx     | 28 +++++-
 .../src/Viewer/renderers/choiceInput.jsx      | 71 ++++++++++++--
 .../src/Viewer/renderers/mathInput.jsx        | 28 +++++-
 .../src/Viewer/renderers/matrixInput.jsx      | 34 +++++--
 .../doenetml/src/Viewer/renderers/section.jsx | 98 ++++++++++++++-----
 .../src/Viewer/renderers/textInput.jsx        | 28 +++++-
 packages/standalone/package.json              |  2 +-
 11 files changed, 264 insertions(+), 63 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5466a41e3..7e64f2a14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15060,7 +15060,7 @@
         },
         "packages/doenetml": {
             "name": "@doenet/doenetml",
-            "version": "0.6.6",
+            "version": "0.6.8",
             "license": "AGPL-3.0-or-later",
             "dependencies": {
                 "@chakra-ui/icons": "^2.0.19",
@@ -15289,7 +15289,7 @@
         },
         "packages/standalone": {
             "name": "@doenet/standalone",
-            "version": "0.6.6",
+            "version": "0.6.8",
             "license": "AGPL-3.0-or-later",
             "devDependencies": {
                 "vite": "^4.5.0"
diff --git a/packages/doenetml-worker/src/components/abstract/BaseComponent.js b/packages/doenetml-worker/src/components/abstract/BaseComponent.js
index 92c9dc3ad..27b637100 100644
--- a/packages/doenetml-worker/src/components/abstract/BaseComponent.js
+++ b/packages/doenetml-worker/src/components/abstract/BaseComponent.js
@@ -529,7 +529,9 @@ export default class BaseComponent {
                 if (!usedDefault.disabledPreliminary) {
                     return {
                         setValue: {
-                            disabled: dependencyValues.disabledPreliminary,
+                            disabled: Boolean(
+                                dependencyValues.disabledPreliminary,
+                            ),
                         },
                     };
                 }
diff --git a/packages/doenetml/package.json b/packages/doenetml/package.json
index 2bc3a9b35..929c1db1f 100644
--- a/packages/doenetml/package.json
+++ b/packages/doenetml/package.json
@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml",
     "type": "module",
     "description": "Semantic markup for building interactive web activities",
-    "version": "0.6.6",
+    "version": "0.6.8",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,
diff --git a/packages/doenetml/src/Viewer/renderers/answer.jsx b/packages/doenetml/src/Viewer/renderers/answer.jsx
index 651986ce0..d87ffb80d 100644
--- a/packages/doenetml/src/Viewer/renderers/answer.jsx
+++ b/packages/doenetml/src/Viewer/renderers/answer.jsx
@@ -87,12 +87,14 @@ export default React.memo(function Answer(props) {
             padding: "1px 6px 1px 6px",
         };
 
+        let checkWorkTabIndex = "0";
         if (disabled) {
             checkWorkStyle.backgroundColor = getComputedStyle(
                 document.documentElement,
             ).getPropertyValue("--mainGray");
             checkWorkStyle.color = "black";
             checkWorkStyle.cursor = "not-allowed";
+            checkWorkTabIndex = "-1";
         }
 
         let checkWorkText = SVs.submitLabel;
@@ -102,7 +104,7 @@ export default React.memo(function Answer(props) {
         let checkworkComponent = (
             <Button
                 id={id + "_submit"}
-                tabIndex="0"
+                tabIndex={checkWorkTabIndex}
                 disabled={disabled}
                 style={checkWorkStyle}
                 onClick={submitAnswer}
@@ -133,7 +135,11 @@ export default React.memo(function Answer(props) {
                     document.documentElement,
                 ).getPropertyValue("--mainGreen");
                 checkworkComponent = (
-                    <Button id={id + "_correct"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_correct"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCheck} />
                         &nbsp; Correct
                     </Button>
@@ -143,7 +149,11 @@ export default React.memo(function Answer(props) {
                     document.documentElement,
                 ).getPropertyValue("--mainRed");
                 checkworkComponent = (
-                    <Button id={id + "_incorrect"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_incorrect"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faTimes} />
                         &nbsp; Incorrect
                     </Button>
@@ -154,7 +164,11 @@ export default React.memo(function Answer(props) {
                 let partialCreditContents = `${percent}% Correct`;
 
                 checkworkComponent = (
-                    <Button id={id + "_partial"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_partial"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         {partialCreditContents}
                     </Button>
                 );
@@ -164,7 +178,11 @@ export default React.memo(function Answer(props) {
             if (validationState !== "unvalidated") {
                 checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                 checkworkComponent = (
-                    <Button id={id + "_saved"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_saved"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCloud} />
                         &nbsp; Response Saved
                     </Button>
diff --git a/packages/doenetml/src/Viewer/renderers/booleanInput.jsx b/packages/doenetml/src/Viewer/renderers/booleanInput.jsx
index f28584560..ece67095f 100644
--- a/packages/doenetml/src/Viewer/renderers/booleanInput.jsx
+++ b/packages/doenetml/src/Viewer/renderers/booleanInput.jsx
@@ -468,6 +468,7 @@ export default React.memo(function BooleanInput(props) {
         cursor: "pointer",
         padding: "1px 6px 1px 6px",
     };
+    let checkWorkTabIndex = "0";
 
     if (disabled) {
         // Disable the checkWorkButton
@@ -476,6 +477,7 @@ export default React.memo(function BooleanInput(props) {
         ).getPropertyValue("--mainGray");
         checkWorkStyle.color = "black";
         checkWorkStyle.cursor = "not-allowed";
+        checkWorkTabIndex = "-1";
     }
 
     //Assume we don't have a check work button
@@ -497,7 +499,7 @@ export default React.memo(function BooleanInput(props) {
             checkWorkButton = (
                 <Button
                     id={id + "_submit"}
-                    tabIndex="0"
+                    tabIndex={checkWorkTabIndex}
                     disabled={disabled}
                     // ref={c => { this.target = c && ReactDOM.findDOMNode(c); }}
                     style={checkWorkStyle}
@@ -537,7 +539,11 @@ export default React.memo(function BooleanInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainGreen");
                     checkWorkButton = (
-                        <Button id={id + "_correct"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_correct"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faCheck} />
                         </Button>
                     );
@@ -550,7 +556,11 @@ export default React.memo(function BooleanInput(props) {
 
                     checkWorkStyle.backgroundColor = "#efab34";
                     checkWorkButton = (
-                        <Button id={id + "_partial"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_partial"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             {partialCreditContents}
                         </Button>
                     );
@@ -560,7 +570,11 @@ export default React.memo(function BooleanInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainRed");
                     checkWorkButton = (
-                        <Button id={id + "_incorrect"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_incorrect"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faTimes} />
                         </Button>
                     );
@@ -570,7 +584,11 @@ export default React.memo(function BooleanInput(props) {
                 checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                 checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
                 checkWorkButton = (
-                    <Button id={id + "_saved"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_saved"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCloud} />
                     </Button>
                 );
diff --git a/packages/doenetml/src/Viewer/renderers/choiceInput.jsx b/packages/doenetml/src/Viewer/renderers/choiceInput.jsx
index 815379a5e..941e34a52 100644
--- a/packages/doenetml/src/Viewer/renderers/choiceInput.jsx
+++ b/packages/doenetml/src/Viewer/renderers/choiceInput.jsx
@@ -154,6 +154,23 @@ export default React.memo(function ChoiceInput(props) {
             padding: "1px 6px 1px 6px",
             width: "24px",
         };
+        let checkWorkTabIndex = "0";
+
+        let selectStyle = {};
+
+        if (disabled) {
+            // Disable the checkWorkButton
+            checkWorkStyle.backgroundColor = getComputedStyle(
+                document.documentElement,
+            ).getPropertyValue("--mainGray");
+            checkWorkStyle.color = "black";
+            checkWorkStyle.cursor = "not-allowed";
+            checkWorkTabIndex = "-1";
+            selectStyle.cursor = "not-allowed";
+            selectStyle.borderColor = getComputedStyle(
+                document.documentElement,
+            ).getPropertyValue("--mainGray");
+        }
 
         //Assume we don't have a check work button
         let checkWorkButton = null;
@@ -168,7 +185,7 @@ export default React.memo(function ChoiceInput(props) {
                     <Button
                         id={id + "_submit"}
                         disabled={disabled}
-                        tabIndex="0"
+                        tabIndex={checkWorkTabIndex}
                         // ref={c => { this.target = c && ReactDOM.findDOMNode(c); }}
                         style={checkWorkStyle}
                         onClick={() =>
@@ -202,7 +219,11 @@ export default React.memo(function ChoiceInput(props) {
                             document.documentElement,
                         ).getPropertyValue("--mainGreen");
                         checkWorkButton = (
-                            <Button id={id + "_correct"} style={checkWorkStyle}>
+                            <Button
+                                id={id + "_correct"}
+                                style={checkWorkStyle}
+                                tabIndex={checkWorkTabIndex}
+                            >
                                 <FontAwesomeIcon icon={faCheck} />
                             </Button>
                         );
@@ -215,7 +236,11 @@ export default React.memo(function ChoiceInput(props) {
 
                         checkWorkStyle.backgroundColor = "#efab34";
                         checkWorkButton = (
-                            <Button id={id + "_partial"} style={checkWorkStyle}>
+                            <Button
+                                id={id + "_partial"}
+                                style={checkWorkStyle}
+                                tabIndex={checkWorkTabIndex}
+                            >
                                 {partialCreditContents}
                             </Button>
                         );
@@ -228,6 +253,7 @@ export default React.memo(function ChoiceInput(props) {
                             <Button
                                 id={id + "_incorrect"}
                                 style={checkWorkStyle}
+                                tabIndex={checkWorkTabIndex}
                             >
                                 <FontAwesomeIcon icon={faTimes} />
                             </Button>
@@ -238,7 +264,11 @@ export default React.memo(function ChoiceInput(props) {
                     checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                     checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
                     checkWorkButton = (
-                        <Button id={id + "_saved"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_saved"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faCloud} />
                         </Button>
                     );
@@ -311,6 +341,7 @@ export default React.memo(function ChoiceInput(props) {
                         value={value}
                         disabled={disabled}
                         multiple={SVs.selectMultiple}
+                        style={selectStyle}
                     >
                         <option hidden={true} value="">
                             {SVs.placeHolder}
@@ -329,6 +360,17 @@ export default React.memo(function ChoiceInput(props) {
             cursor: "pointer",
             // fontWeight: "bold",
         };
+        let checkWorkTabIndex = "0";
+
+        if (disabled) {
+            // Disable the checkWorkButton
+            checkWorkStyle.backgroundColor = getComputedStyle(
+                document.documentElement,
+            ).getPropertyValue("--mainGray");
+            checkWorkStyle.color = "black";
+            checkWorkStyle.cursor = "not-allowed";
+            checkWorkTabIndex = "-1";
+        }
 
         let checkworkComponent = null;
 
@@ -346,7 +388,7 @@ export default React.memo(function ChoiceInput(props) {
                 checkworkComponent = (
                     <Button
                         id={id + "_submit"}
-                        tabIndex="0"
+                        tabIndex={checkWorkTabIndex}
                         disabled={disabled}
                         style={checkWorkStyle}
                         onClick={() =>
@@ -382,7 +424,11 @@ export default React.memo(function ChoiceInput(props) {
                             document.documentElement,
                         ).getPropertyValue("--mainGreen");
                         checkworkComponent = (
-                            <Button id={id + "_correct"} style={checkWorkStyle}>
+                            <Button
+                                id={id + "_correct"}
+                                style={checkWorkStyle}
+                                tabIndex={checkWorkTabIndex}
+                            >
                                 <FontAwesomeIcon icon={faCheck} />
                                 &nbsp; Correct
                             </Button>
@@ -395,6 +441,7 @@ export default React.memo(function ChoiceInput(props) {
                             <Button
                                 id={id + "_incorrect"}
                                 style={checkWorkStyle}
+                                tabIndex={checkWorkTabIndex}
                             >
                                 <FontAwesomeIcon icon={faTimes} />
                                 &nbsp; Incorrect
@@ -406,7 +453,11 @@ export default React.memo(function ChoiceInput(props) {
                         let partialCreditContents = `${percent}% Correct`;
 
                         checkworkComponent = (
-                            <Button id={id + "_partial"} style={checkWorkStyle}>
+                            <Button
+                                id={id + "_partial"}
+                                style={checkWorkStyle}
+                                tabIndex={checkWorkTabIndex}
+                            >
                                 {partialCreditContents}
                             </Button>
                         );
@@ -414,7 +465,11 @@ export default React.memo(function ChoiceInput(props) {
                 } else {
                     checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                     checkworkComponent = (
-                        <Button id={id + "_saved"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_saved"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faCloud} />
                             &nbsp; Response Saved
                         </Button>
diff --git a/packages/doenetml/src/Viewer/renderers/mathInput.jsx b/packages/doenetml/src/Viewer/renderers/mathInput.jsx
index b39d8f44d..6205c7755 100644
--- a/packages/doenetml/src/Viewer/renderers/mathInput.jsx
+++ b/packages/doenetml/src/Viewer/renderers/mathInput.jsx
@@ -234,6 +234,7 @@ export default function MathInput(props) {
     }
 
     let mathInputWrapperCursor = "allowed";
+    let checkWorkTabIndex = "0";
     if (SVs.disabled) {
         // Disable the checkWorkButton
         checkWorkStyle.backgroundColor = getComputedStyle(
@@ -241,6 +242,7 @@ export default function MathInput(props) {
         ).getPropertyValue("--mainGray");
         checkWorkStyle.color = "black";
         checkWorkStyle.cursor = "not-allowed";
+        checkWorkTabIndex = "-1";
 
         // Disable the mathInput
         mathInputStyle.borderColor = getComputedStyle(
@@ -263,7 +265,7 @@ export default function MathInput(props) {
             checkWorkButton = (
                 <Button
                     id={id + "_submit"}
-                    tabIndex="0"
+                    tabIndex={checkWorkTabIndex}
                     disabled={SVs.disabled}
                     style={checkWorkStyle}
                     onClick={() =>
@@ -297,7 +299,11 @@ export default function MathInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainGreen");
                     checkWorkButton = (
-                        <Button id={id + "_correct"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_correct"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faCheck} />
                         </Button>
                     );
@@ -310,7 +316,11 @@ export default function MathInput(props) {
 
                     checkWorkStyle.backgroundColor = "#efab34";
                     checkWorkButton = (
-                        <Button id={id + "_partial"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_partial"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             {partialCreditContents}
                         </Button>
                     );
@@ -320,7 +330,11 @@ export default function MathInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainRed");
                     checkWorkButton = (
-                        <Button id={id + "_incorrect"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_incorrect"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faTimes} />
                         </Button>
                     );
@@ -330,7 +344,11 @@ export default function MathInput(props) {
                 checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                 checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
                 checkWorkButton = (
-                    <Button id={id + "_saved"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_saved"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCloud} />
                     </Button>
                 );
diff --git a/packages/doenetml/src/Viewer/renderers/matrixInput.jsx b/packages/doenetml/src/Viewer/renderers/matrixInput.jsx
index af41dab92..bc0b6bdae 100644
--- a/packages/doenetml/src/Viewer/renderers/matrixInput.jsx
+++ b/packages/doenetml/src/Viewer/renderers/matrixInput.jsx
@@ -111,6 +111,7 @@ export default React.memo(function MatrixInput(props) {
         cursor: "pointer",
         padding: "1px 6px 1px 6px",
     };
+    let checkWorkTabIndex = "0";
 
     if (disabled) {
         // Disable the checkWorkButton
@@ -119,6 +120,7 @@ export default React.memo(function MatrixInput(props) {
         ).getPropertyValue("--mainGray");
         checkWorkStyle.color = "black";
         checkWorkStyle.cursor = "not-allowed";
+        checkWorkTabIndex = "-1";
     }
 
     //Assume we don't have a check work button
@@ -128,7 +130,7 @@ export default React.memo(function MatrixInput(props) {
             checkWorkButton = (
                 <Button
                     id={id + "_submit"}
-                    tabIndex="0"
+                    tabIndex={checkWorkTabIndex}
                     disabled={disabled}
                     style={checkWorkStyle}
                     onClick={() =>
@@ -162,7 +164,11 @@ export default React.memo(function MatrixInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainGreen");
                     checkWorkButton = (
-                        <Button id={id + "_correct"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_correct"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faCheck} />
                         </Button>
                     );
@@ -175,7 +181,11 @@ export default React.memo(function MatrixInput(props) {
 
                     checkWorkStyle.backgroundColor = "#efab34";
                     checkWorkButton = (
-                        <Button id={id + "_partial"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_partial"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             {partialCreditContents}
                         </Button>
                     );
@@ -185,7 +195,11 @@ export default React.memo(function MatrixInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainRed");
                     checkWorkButton = (
-                        <Button id={id + "_incorrect"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_incorrect"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faTimes} />
                         </Button>
                     );
@@ -195,7 +209,11 @@ export default React.memo(function MatrixInput(props) {
                 checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                 checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
                 checkWorkButton = (
-                    <Button id={id + "_saved"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_saved"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCloud} />
                     </Button>
                 );
@@ -260,7 +278,7 @@ export default React.memo(function MatrixInput(props) {
                                 args: { numRows: SVs.numRows - 1 },
                             })
                         }
-                        disabled={SVs.numRows < 2}
+                        disabled={SVs.numRows < 2 || disabled}
                     >
                         r-
                     </ActionButton>
@@ -273,6 +291,7 @@ export default React.memo(function MatrixInput(props) {
                                 args: { numRows: SVs.numRows + 1 },
                             })
                         }
+                        disabled={disabled}
                     >
                         r+
                     </ActionButton>
@@ -294,7 +313,7 @@ export default React.memo(function MatrixInput(props) {
                                 args: { numColumns: SVs.numColumns - 1 },
                             })
                         }
-                        disabled={SVs.numColumns < 2}
+                        disabled={SVs.numColumns < 2 || disabled}
                     >
                         c-
                     </ActionButton>
@@ -307,6 +326,7 @@ export default React.memo(function MatrixInput(props) {
                                 args: { numColumns: SVs.numColumns + 1 },
                             })
                         }
+                        disabled={disabled}
                     >
                         c+
                     </ActionButton>
diff --git a/packages/doenetml/src/Viewer/renderers/section.jsx b/packages/doenetml/src/Viewer/renderers/section.jsx
index 07bf9215c..272034601 100644
--- a/packages/doenetml/src/Viewer/renderers/section.jsx
+++ b/packages/doenetml/src/Viewer/renderers/section.jsx
@@ -1,23 +1,45 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useContext } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     faCheck,
     faLevelDownAlt,
     faTimes,
     faCloud,
-    faPercentage,
 } from "@fortawesome/free-solid-svg-icons";
+import styled from "styled-components";
 import { faCaretRight as twirlIsClosed } from "@fortawesome/free-solid-svg-icons";
 import { faCaretDown as twirlIsOpen } from "@fortawesome/free-solid-svg-icons";
 
 import useDoenetRenderer from "../useDoenetRenderer";
 import VisibilitySensor from "react-visibility-sensor-v2";
+import { PageContext } from "../PageViewer";
+
+// Moved most of checkWorkStyle styling into Button
+const Button = styled.button`
+    position: relative;
+    height: 24px;
+    display: inline-block;
+    color: white;
+    background-color: var(--mainBlue);
+    padding: 2px;
+    /* border: var(--mainBorder); */
+    border: none;
+    border-radius: var(--mainBorderRadius);
+    margin: 0px 4px 4px 0px;
+
+    &:hover {
+        background-color: var(--lightBlue);
+        color: black;
+    }
+`;
 
 export default React.memo(function Section(props) {
     let { name, id, SVs, children, actions, callAction } =
         useDoenetRenderer(props);
     // console.log("name: ", name, " SVs: ", SVs," Children",children);
 
+    const { showAnswerTitles } = useContext(PageContext) || {};
+
     let onChangeVisibility = (isVisible) => {
         callAction({
             action: actions.recordVisibilityChange,
@@ -40,6 +62,8 @@ export default React.memo(function Section(props) {
 
     let validationState = useRef(null);
 
+    let disabled = SVs.disabled;
+
     const updateValidationState = () => {
         validationState.current = "unvalidated";
         if (SVs.justSubmitted) {
@@ -181,23 +205,30 @@ export default React.memo(function Section(props) {
         updateValidationState();
 
         let checkWorkStyle = {
-            height: "23px",
-            display: "inline-block",
-            backgroundColor: "var(--mainBlue)",
+            cursor: "pointer",
             padding: "1px 6px 1px 6px",
-            color: "white",
-            fontWeight: "bold",
-            marginBottom: "30px", //Space after check work
         };
 
+        let checkWorkTabIndex = "0";
+        if (disabled) {
+            checkWorkStyle.backgroundColor = getComputedStyle(
+                document.documentElement,
+            ).getPropertyValue("--mainGray");
+            checkWorkStyle.color = "black";
+            checkWorkStyle.cursor = "not-allowed";
+            checkWorkTabIndex = "-1";
+        }
+
         let checkWorkText = SVs.submitLabel;
         if (!SVs.showCorrectness) {
             checkWorkText = SVs.submitLabelNoCorrectness;
         }
+
         checkworkComponent = (
-            <button
+            <Button
                 id={id + "_submit"}
-                tabIndex="0"
+                tabIndex={checkWorkTabIndex}
+                disabled={disabled}
                 style={checkWorkStyle}
                 onClick={submitAllAnswers}
                 onKeyPress={(e) => {
@@ -205,6 +236,7 @@ export default React.memo(function Section(props) {
                         submitAllAnswers();
                     }
                 }}
+                title={showAnswerTitles ? `Answer name: ${name}` : null}
             >
                 <FontAwesomeIcon
                     icon={faLevelDownAlt}
@@ -212,46 +244,66 @@ export default React.memo(function Section(props) {
                 />
                 &nbsp;
                 {checkWorkText}
-            </button>
+            </Button>
         );
 
         if (SVs.showCorrectness) {
             if (validationState.current === "correct") {
-                checkWorkStyle.backgroundColor = "var(--mainGreen)";
+                checkWorkStyle.backgroundColor = getComputedStyle(
+                    document.documentElement,
+                ).getPropertyValue("--mainGreen");
                 checkworkComponent = (
-                    <span id={id + "_correct"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_correct"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCheck} />
                         &nbsp; Correct
-                    </span>
+                    </Button>
                 );
             } else if (validationState.current === "incorrect") {
-                checkWorkStyle.backgroundColor = "var(--mainRed)";
+                checkWorkStyle.backgroundColor = getComputedStyle(
+                    document.documentElement,
+                ).getPropertyValue("--mainRed");
                 checkworkComponent = (
-                    <span id={id + "_incorrect"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_incorrect"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faTimes} />
                         &nbsp; Incorrect
-                    </span>
+                    </Button>
                 );
             } else if (validationState.current === "partialcorrect") {
-                checkWorkStyle.backgroundColor = "var(--mainYellow)";
+                checkWorkStyle.backgroundColor = "#efab34";
                 let percent = Math.round(SVs.creditAchieved * 100);
                 let partialCreditContents = `${percent}% Correct`;
 
                 checkworkComponent = (
-                    <span id={id + "_partial"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_partial"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         {partialCreditContents}
-                    </span>
+                    </Button>
                 );
             }
         } else {
             // showCorrectness is false
             if (validationState.current !== "unvalidated") {
-                checkWorkStyle.backgroundColor = "var(--mainPurple)";
+                checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                 checkworkComponent = (
-                    <span id={id + "_saved"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_saved"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCloud} />
                         &nbsp; Response Saved
-                    </span>
+                    </Button>
                 );
             }
         }
diff --git a/packages/doenetml/src/Viewer/renderers/textInput.jsx b/packages/doenetml/src/Viewer/renderers/textInput.jsx
index e60606fc1..4a956b779 100644
--- a/packages/doenetml/src/Viewer/renderers/textInput.jsx
+++ b/packages/doenetml/src/Viewer/renderers/textInput.jsx
@@ -606,6 +606,7 @@ export default function TextInput(props) {
         cursor: "pointer",
         padding: "1px 6px 1px 6px",
     };
+    let checkWorkTabIndex = "0";
 
     if (disabled) {
         checkWorkStyle.backgroundColor = getComputedStyle(
@@ -613,6 +614,7 @@ export default function TextInput(props) {
         ).getPropertyValue("--mainGray");
         checkWorkStyle.cursor = "not-allowed";
         checkWorkStyle.color = "black";
+        checkWorkTabIndex = "-1";
     }
 
     // Assume we don't have a check work button
@@ -622,7 +624,7 @@ export default function TextInput(props) {
             checkWorkButton = (
                 <Button
                     id={id + "_submit"}
-                    tabIndex="0"
+                    tabIndex={checkWorkTabIndex}
                     disabled={disabled}
                     style={checkWorkStyle}
                     onClick={() =>
@@ -661,7 +663,11 @@ export default function TextInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainGreen");
                     checkWorkButton = (
-                        <Button id={id + "_correct"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_correct"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faCheck} />
                         </Button>
                     );
@@ -673,7 +679,11 @@ export default function TextInput(props) {
 
                     checkWorkStyle.backgroundColor = "#efab34";
                     checkWorkButton = (
-                        <Button id={id + "_partial"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_partial"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             {partialCreditContents}
                         </Button>
                     );
@@ -683,7 +693,11 @@ export default function TextInput(props) {
                         document.documentElement,
                     ).getPropertyValue("--mainRed");
                     checkWorkButton = (
-                        <Button id={id + "_incorrect"} style={checkWorkStyle}>
+                        <Button
+                            id={id + "_incorrect"}
+                            style={checkWorkStyle}
+                            tabIndex={checkWorkTabIndex}
+                        >
                             <FontAwesomeIcon icon={faTimes} />
                         </Button>
                     );
@@ -693,7 +707,11 @@ export default function TextInput(props) {
                 checkWorkStyle.backgroundColor = "rgb(74, 3, 217)";
                 checkWorkStyle.padding = "1px 8px 1px 4px"; // To center the faCloud icon
                 checkWorkButton = (
-                    <Button id={id + "_saved"} style={checkWorkStyle}>
+                    <Button
+                        id={id + "_saved"}
+                        style={checkWorkStyle}
+                        tabIndex={checkWorkTabIndex}
+                    >
                         <FontAwesomeIcon icon={faCloud} />
                     </Button>
                 );
diff --git a/packages/standalone/package.json b/packages/standalone/package.json
index ef79ebc16..78d82c729 100644
--- a/packages/standalone/package.json
+++ b/packages/standalone/package.json
@@ -2,7 +2,7 @@
     "name": "@doenet/standalone",
     "type": "module",
     "description": "Standalone renderer for DoenetML suitable for being included in a web page",
-    "version": "0.6.6",
+    "version": "0.6.8",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,