From d7bb31c5a2d49ff6e26a49b8adedd84db9162b6e Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Fri, 24 Jan 2025 17:15:42 -0600
Subject: [PATCH] remove focus on card when overlay is up and add autoFocus for
 first interactive element on overlay

---
 src/components/Card.tsx                       |   87 +-
 src/components/Exercise.stories.tsx           |    2 +-
 .../IncludeRemoveQuestion/index.tsx           |    4 +-
 .../__snapshots__/Card.spec.tsx.snap          |  280 +--
 .../__snapshots__/Exercise.spec.tsx.snap      | 1993 +++++++++--------
 .../IncludeRemoveQuestion.spec.tsx.snap       |    8 +-
 6 files changed, 1228 insertions(+), 1146 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 5a07c2fa..e1d9641a 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useState, useRef } from "react";
+import { ReactNode, useState, useRef, useEffect, useCallback } from "react";
 import { breakpoints, colors, layouts, mixins } from "../theme";
 import { AvailablePoints, StepBase, StepWithData } from "../types";
 import styled from "styled-components";
@@ -205,8 +205,7 @@ export const StyledOverlay = styled.div`
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
-    background-color: #FFFFFF;
-    opacity: 0.8;
+    background-color: #FFFFFF80;
     z-index: 2;
 `;
 
@@ -249,6 +248,8 @@ const StepCard = ({
   overlayChildren,
   ...otherProps }: StepCardProps) => {
 
+  // Helps to stop focusing first child when is already focused
+  const [previousFocusedElement, setPreviousFocusedElement] = useState<HTMLElement | null>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const [showOverlay, setShowOverlay] = useState<boolean>(false);
 
@@ -262,6 +263,42 @@ const StepCard = ({
     }
   };
 
+  const handleOverlayFocus = useCallback((event: FocusEvent) => {
+    setShowOverlay(true);
+    const firstOverlayFocusableElement = document.getElementById('overlay-element')?.querySelector(
+      'button, [href], input, select, textarea'
+    ) as HTMLElement;
+
+    if (
+      (firstOverlayFocusableElement !== previousFocusedElement) && 
+      (event.target === overlayRef.current)
+    ) {
+      setPreviousFocusedElement(firstOverlayFocusableElement);
+      firstOverlayFocusableElement.focus();
+    }
+  }, [overlayRef, previousFocusedElement]);
+
+  const hideFocusableElements = useCallback(() => {
+    const focusableElements = Array.from(document.getElementById("step-card")?.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    ) || []);
+
+    focusableElements.forEach((el) => {
+      (el as HTMLElement).setAttribute('tabindex', '-1');
+    });
+  }, []);
+
+  useEffect(() => {
+    const currentOverlayRef = overlayRef.current;
+    if (currentOverlayRef && overlayChildren) {
+      currentOverlayRef.addEventListener('focus', handleOverlayFocus);
+      hideFocusableElements();
+    }
+    return () => {
+      currentOverlayRef?.removeEventListener('focus', handleOverlayFocus);
+    };
+  }, [overlayChildren, overlayRef, handleOverlayFocus, hideFocusableElements]);
+
   return (
     <OuterStepCard {...otherProps}>
       {multipartBadge}
@@ -273,7 +310,6 @@ const StepCard = ({
             ? {
               onMouseOver: () => setShowOverlay(true),
               onMouseLeave: () => setShowOverlay(false),
-              onFocus: () => setShowOverlay(true),
               onBlur: handleOverlayBlur,
               tabIndex: 0,
             }
@@ -281,28 +317,31 @@ const StepCard = ({
           }
         >
           {(overlayChildren && showOverlay) &&
-            <StyledOverlay>
+            <StyledOverlay id="overlay-element">
               {overlayChildren}
-            </StyledOverlay>}
-          {questionNumber && isHomework && stepType === 'exercise' &&
-            <StepCardHeader className="step-card-header">
-              <div>
-                {leftHeaderChildren}
-                <h2 className="question-info">
-                  {headerTitleChildren}
-                  <span>{formattedQuestionNumber}</span>
-                  {showTotalQuestions ? <span className="num-questions">&nbsp;/ {numberOfQuestions}</span> : null}
-                  <span className="separator">|</span>
-                  <span className="question-id">ID: {questionId}</span>
-                </h2>
-              </div>
-              {availablePoints || rightHeaderChildren ? <div>
-                {availablePoints && <div className="points">{availablePoints} Points</div>}
-                {rightHeaderChildren}
-              </div> : null}
-            </StepCardHeader>
+            </StyledOverlay>
           }
-          <StepCardQuestion unpadded={unpadded}>{children}</StepCardQuestion>
+          <div id="step-card">
+            {questionNumber && isHomework && stepType === 'exercise' &&
+              <StepCardHeader className="step-card-header">
+                <div>
+                  {leftHeaderChildren}
+                  <h2 className="question-info">
+                    {headerTitleChildren}
+                    <span>{formattedQuestionNumber}</span>
+                    {showTotalQuestions ? <span className="num-questions">&nbsp;/ {numberOfQuestions}</span> : null}
+                    <span className="separator">|</span>
+                    <span className="question-id">ID: {questionId}</span>
+                  </h2>
+                </div>
+                {availablePoints || rightHeaderChildren ? <div>
+                  {availablePoints && <div className="points">{availablePoints} Points</div>}
+                  {rightHeaderChildren}
+                </div> : null}
+              </StepCardHeader>
+            }
+            <StepCardQuestion unpadded={unpadded}>{children}</StepCardQuestion>
+          </div>
         </div>
       </InnerStepCard>
     </OuterStepCard>
diff --git a/src/components/Exercise.stories.tsx b/src/components/Exercise.stories.tsx
index ac9f7c5e..fd0592dc 100644
--- a/src/components/Exercise.stories.tsx
+++ b/src/components/Exercise.stories.tsx
@@ -951,7 +951,7 @@ export const OverlayCard = () => {
   return (
     <TextResizerProvider>
       <Exercise {...props1} className='preview-card' />
-      <Exercise {...props2} />
+      <Exercise {...props2} className='preview-card' />
     </TextResizerProvider>
   );
 };
diff --git a/src/components/IncludeRemoveQuestion/index.tsx b/src/components/IncludeRemoveQuestion/index.tsx
index ff2acbc3..3a7b104b 100644
--- a/src/components/IncludeRemoveQuestion/index.tsx
+++ b/src/components/IncludeRemoveQuestion/index.tsx
@@ -33,11 +33,11 @@ export const IncludeRemoveQuestion = ({buttonVariant, onIncludeHandler, onRemove
     
     return (
         <StyledContainer>
-            <StyledButton className={buttonVariant} onClick={() => onClickHandler(buttonVariant)} aria-label="details">
+            <StyledButton className={buttonVariant} onClick={() => onClickHandler(buttonVariant)} aria-label={buttonVariant}>
                 <StyledIcon className={buttonVariant} icon={buttonIcon} aria-label={buttonVariant + ' question'} border size="lg" />
                 <span>{generateButtonText(buttonVariant)}</span>
             </StyledButton>
-            <StyledButton className="details" aria-label="details button">
+            <StyledButton className="details" aria-label="details">
                 <StyledIcon className="details" icon={faEllipsisH} border size="lg"/>
                 <span>Details</span>
             </StyledButton>
diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
index f7e6616c..1882d238 100644
--- a/src/components/__snapshots__/Card.spec.tsx.snap
+++ b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -9,40 +9,44 @@ exports[`StepCard matches snapshot 1`] = `
   >
     <div>
       <div
-        className="sc-dkzDqf kooVfX step-card-header"
+        id="step-card"
       >
-        <div>
-          <h2
-            className="question-info"
-          >
-            <span>
-              Question 1
-            </span>
-            <span
-              className="separator"
+        <div
+          className="sc-dkzDqf kooVfX step-card-header"
+        >
+          <div>
+            <h2
+              className="question-info"
             >
-              |
-            </span>
-            <span
-              className="question-id"
+              <span>
+                Question 1
+              </span>
+              <span
+                className="separator"
+              >
+                |
+              </span>
+              <span
+                className="question-id"
+              >
+                ID: 
+              </span>
+            </h2>
+          </div>
+          <div>
+            <div
+              className="points"
             >
-              ID: 
-            </span>
-          </h2>
-        </div>
-        <div>
-          <div
-            className="points"
-          >
-            1.0
-             Points
+              1.0
+               Points
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-hKMtZM bwRTaS"
-      >
-        Question content
+        <div
+          className="sc-hKMtZM bwRTaS"
+        >
+          Question content
+        </div>
       </div>
     </div>
   </div>
@@ -58,46 +62,50 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
   >
     <div>
       <div
-        className="sc-dkzDqf kooVfX step-card-header"
+        id="step-card"
       >
-        <div>
-          <h2
-            className="question-info"
-          >
-            <span>
-              Questions 1 - 3
-            </span>
-            <span
-              className="num-questions"
+        <div
+          className="sc-dkzDqf kooVfX step-card-header"
+        >
+          <div>
+            <h2
+              className="question-info"
             >
-               / 
-              3
-            </span>
-            <span
-              className="separator"
-            >
-              |
-            </span>
-            <span
-              className="question-id"
+              <span>
+                Questions 1 - 3
+              </span>
+              <span
+                className="num-questions"
+              >
+                 / 
+                3
+              </span>
+              <span
+                className="separator"
+              >
+                |
+              </span>
+              <span
+                className="question-id"
+              >
+                ID: 
+              </span>
+            </h2>
+          </div>
+          <div>
+            <div
+              className="points"
             >
-              ID: 
-            </span>
-          </h2>
-        </div>
-        <div>
-          <div
-            className="points"
-          >
-            1.0
-             Points
+              1.0
+               Points
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-hKMtZM bwRTaS"
-      >
-        Question content
+        <div
+          className="sc-hKMtZM bwRTaS"
+        >
+          Question content
+        </div>
       </div>
     </div>
   </div>
@@ -114,32 +122,36 @@ exports[`TaskStepCard can optionally provide task 1`] = `
   >
     <div>
       <div
-        className="sc-dkzDqf kooVfX step-card-header"
+        id="step-card"
       >
-        <div>
-          <h2
-            className="question-info"
-          >
-            <span>
-              Question 1
-            </span>
-            <span
-              className="separator"
-            >
-              |
-            </span>
-            <span
-              className="question-id"
+        <div
+          className="sc-dkzDqf kooVfX step-card-header"
+        >
+          <div>
+            <h2
+              className="question-info"
             >
-              ID: 
-              1234@1
-            </span>
-          </h2>
+              <span>
+                Question 1
+              </span>
+              <span
+                className="separator"
+              >
+                |
+              </span>
+              <span
+                className="question-id"
+              >
+                ID: 
+                1234@1
+              </span>
+            </h2>
+          </div>
         </div>
+        <div
+          className="sc-hKMtZM bwRTaS"
+        />
       </div>
-      <div
-        className="sc-hKMtZM bwRTaS"
-      />
     </div>
   </div>
 </div>
@@ -155,32 +167,36 @@ exports[`TaskStepCard can optionally provide type 1`] = `
   >
     <div>
       <div
-        className="sc-dkzDqf kooVfX step-card-header"
+        id="step-card"
       >
-        <div>
-          <h2
-            className="question-info"
-          >
-            <span>
-              Question 1
-            </span>
-            <span
-              className="separator"
-            >
-              |
-            </span>
-            <span
-              className="question-id"
+        <div
+          className="sc-dkzDqf kooVfX step-card-header"
+        >
+          <div>
+            <h2
+              className="question-info"
             >
-              ID: 
-              1234@1
-            </span>
-          </h2>
+              <span>
+                Question 1
+              </span>
+              <span
+                className="separator"
+              >
+                |
+              </span>
+              <span
+                className="question-id"
+              >
+                ID: 
+                1234@1
+              </span>
+            </h2>
+          </div>
         </div>
+        <div
+          className="sc-hKMtZM bwRTaS"
+        />
       </div>
-      <div
-        className="sc-hKMtZM bwRTaS"
-      />
     </div>
   </div>
 </div>
@@ -196,32 +212,36 @@ exports[`TaskStepCard matches snapshot 1`] = `
   >
     <div>
       <div
-        className="sc-dkzDqf kooVfX step-card-header"
+        id="step-card"
       >
-        <div>
-          <h2
-            className="question-info"
-          >
-            <span>
-              Question 1
-            </span>
-            <span
-              className="separator"
-            >
-              |
-            </span>
-            <span
-              className="question-id"
+        <div
+          className="sc-dkzDqf kooVfX step-card-header"
+        >
+          <div>
+            <h2
+              className="question-info"
             >
-              ID: 
-              1234@1
-            </span>
-          </h2>
+              <span>
+                Question 1
+              </span>
+              <span
+                className="separator"
+              >
+                |
+              </span>
+              <span
+                className="question-id"
+              >
+                ID: 
+                1234@1
+              </span>
+            </h2>
+          </div>
         </div>
+        <div
+          className="sc-hKMtZM bwRTaS"
+        />
       </div>
-      <div
-        className="sc-hKMtZM bwRTaS"
-      />
     </div>
   </div>
 </div>
diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
index 9c4547d9..6214b6af 100644
--- a/src/components/__snapshots__/Exercise.spec.tsx.snap
+++ b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -13,174 +13,178 @@ exports[`Exercise using step data matches snapshot 1`] = `
     >
       <div>
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          id="step-card"
         >
-          <div>
-            <h2
-              className="question-info"
-            >
-              <span>
-                Question 1
-              </span>
-              <span
-                className="num-questions"
+          <div
+            className="sc-dkzDqf kooVfX step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
               >
-                 / 
-                1
-              </span>
-              <span
-                className="separator"
-              >
-                |
-              </span>
-              <span
-                className="question-id"
-              >
-                ID: 
-                1234@4
-              </span>
-            </h2>
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="num-questions"
+                >
+                   / 
+                  1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1234@4
+                </span>
+              </h2>
+            </div>
           </div>
-        </div>
-        <div
-          className="sc-hKMtZM bwRTaS"
-        >
-          <div>
-            <div
-              className="step-card-body exercise-context"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Context",
+          <div
+            className="sc-hKMtZM bwRTaS"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
                 }
-              }
-            />
-            <div
-              className="step-card-body exercise-stimulus"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "<b>Stimulus HTML</b>",
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
                 }
-              }
-            />
-            <div
-              data-test-id="student-exercise-question"
-            >
+              />
               <div
-                className="sc-iBkjds bohpoA openstax-question step-card-body"
-                data-question-number={1}
-                data-test-id="question"
+                data-test-id="student-exercise-question"
               >
                 <div
-                  aria-label="Answer choices"
-                  className="answers-table"
-                  role="radiogroup"
+                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
                 >
                   <div
-                    className="openstax-answer"
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
                   >
-                    <section
-                      className="answers-answer disabled answer-selected"
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={true}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1234@5-option-0"
-                        name="1234@5-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1234@5-option-0"
+                      <section
+                        className="answers-answer disabled answer-selected"
                       >
-                        <span
-                          aria-label="Selected Choice A:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="A"
-                          data-test-id="answer-choice-A"
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-0"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-0"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "True",
-                              }
-                            }
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
                           />
-                        </div>
-                      </label>
-                    </section>
-                  </div>
-                  <div
-                    className="openstax-answer"
-                  >
-                    <section
-                      className="answers-answer disabled"
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={false}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1234@5-option-1"
-                        name="1234@5-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1234@5-option-1"
+                      <section
+                        className="answers-answer disabled"
                       >
-                        <span
-                          aria-label="Choice B:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="B"
-                          data-test-id="answer-choice-B"
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-1"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-1"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "False",
-                              }
-                            }
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
                           />
-                        </div>
-                      </label>
-                    </section>
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="sc-ftvSup icqnDT step-card-footer"
-              >
                 <div
-                  className="step-card-footer-inner"
+                  className="sc-ftvSup icqnDT step-card-footer"
                 >
                   <div
-                    className="points"
-                    role="status"
-                  >
-                    <span
-                      className="attempts-left"
-                    />
-                  </div>
-                  <div
-                    className="controls"
+                    className="step-card-footer-inner"
                   >
-                    <button
-                      className="sc-jSMfEi hsxEPT"
-                      data-test-id="continue-btn"
-                      onClick={[Function]}
+                    <div
+                      className="points"
+                      role="status"
+                    >
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
                     >
-                      Next
-                    </button>
+                      <button
+                        className="sc-jSMfEi hsxEPT"
+                        data-test-id="continue-btn"
+                        onClick={[Function]}
+                      >
+                        Next
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -206,180 +210,183 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
     >
       <div
         onBlur={[Function]}
-        onFocus={[Function]}
         onMouseLeave={[Function]}
         onMouseOver={[Function]}
         tabIndex={0}
       >
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          id="step-card"
         >
-          <div>
-            <h2
-              className="question-info"
-            >
-              <span>
-                Question 1
-              </span>
-              <span
-                className="num-questions"
-              >
-                 / 
-                1
-              </span>
-              <span
-                className="separator"
+          <div
+            className="sc-dkzDqf kooVfX step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
               >
-                |
-              </span>
-              <span
-                className="question-id"
-              >
-                ID: 
-                1234@4
-              </span>
-            </h2>
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="num-questions"
+                >
+                   / 
+                  1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1234@4
+                </span>
+              </h2>
+            </div>
           </div>
-        </div>
-        <div
-          className="sc-hKMtZM bwRTaS"
-        >
-          <div>
-            <div
-              className="step-card-body exercise-context"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Context",
+          <div
+            className="sc-hKMtZM bwRTaS"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
                 }
-              }
-            />
-            <div
-              className="step-card-body exercise-stimulus"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "<b>Stimulus HTML</b>",
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
                 }
-              }
-            />
-            <div
-              data-test-id="student-exercise-question"
-            >
+              />
               <div
-                className="sc-iBkjds bohpoA openstax-question step-card-body"
-                data-question-number={1}
-                data-test-id="question"
+                data-test-id="student-exercise-question"
               >
                 <div
-                  aria-label="Answer choices"
-                  className="answers-table"
-                  role="radiogroup"
+                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
                 >
                   <div
-                    className="openstax-answer"
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
                   >
-                    <section
-                      className="answers-answer disabled answer-selected"
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={true}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1234@5-option-0"
-                        name="1234@5-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1234@5-option-0"
+                      <section
+                        className="answers-answer disabled answer-selected"
                       >
-                        <span
-                          aria-label="Selected Choice A:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="A"
-                          data-test-id="answer-choice-A"
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-0"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-0"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "True",
-                              }
-                            }
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
                           />
-                        </div>
-                      </label>
-                    </section>
-                  </div>
-                  <div
-                    className="openstax-answer"
-                  >
-                    <section
-                      className="answers-answer disabled"
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={false}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1234@5-option-1"
-                        name="1234@5-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1234@5-option-1"
+                      <section
+                        className="answers-answer disabled"
                       >
-                        <span
-                          aria-label="Choice B:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="B"
-                          data-test-id="answer-choice-B"
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-1"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-1"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "False",
-                              }
-                            }
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
                           />
-                        </div>
-                      </label>
-                    </section>
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="sc-ftvSup icqnDT step-card-footer"
-              >
                 <div
-                  className="step-card-footer-inner"
+                  className="sc-ftvSup icqnDT step-card-footer"
                 >
                   <div
-                    className="points"
-                    role="status"
-                  >
-                    <span
-                      className="attempts-left"
-                    />
-                  </div>
-                  <div
-                    className="controls"
+                    className="step-card-footer-inner"
                   >
-                    <button
-                      className="sc-jSMfEi hsxEPT"
-                      data-test-id="continue-btn"
-                      onClick={[Function]}
+                    <div
+                      className="points"
+                      role="status"
+                    >
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
                     >
-                      Next
-                    </button>
+                      <button
+                        className="sc-jSMfEi hsxEPT"
+                        data-test-id="continue-btn"
+                        onClick={[Function]}
+                      >
+                        Next
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -405,168 +412,172 @@ exports[`Exercise with question state data matches snapshot 1`] = `
     >
       <div>
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          id="step-card"
         >
-          <div>
-            <h2
-              className="question-info"
-            >
-              <span>
-                Question 1
-              </span>
-              <span
-                className="separator"
+          <div
+            className="sc-dkzDqf kooVfX step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
               >
-                |
-              </span>
-              <span
-                className="question-id"
-              >
-                ID: 
-                1234@5
-              </span>
-            </h2>
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1234@5
+                </span>
+              </h2>
+            </div>
           </div>
-        </div>
-        <div
-          className="sc-hKMtZM bwRTaS"
-        >
-          <div>
-            <div
-              className="step-card-body exercise-context"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Context",
+          <div
+            className="sc-hKMtZM bwRTaS"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
                 }
-              }
-            />
-            <div
-              className="step-card-body exercise-stimulus"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "<b>Stimulus HTML</b>",
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
                 }
-              }
-            />
-            <div
-              data-test-id="student-exercise-question"
-            >
+              />
               <div
-                className="sc-iBkjds bohpoA openstax-question step-card-body"
-                data-question-number={1}
-                data-test-id="question"
+                data-test-id="student-exercise-question"
               >
                 <div
-                  aria-label="Answer choices"
-                  className="answers-table"
-                  role="radiogroup"
+                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
                 >
                   <div
-                    className="openstax-answer"
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
                   >
-                    <section
-                      className="answers-answer disabled answer-selected"
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={true}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-0"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-0"
+                      <section
+                        className="answers-answer disabled answer-selected"
                       >
-                        <span
-                          aria-label="Selected Choice A:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="A"
-                          data-test-id="answer-choice-A"
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-0"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-0"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "True",
-                              }
-                            }
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
                           />
-                        </div>
-                      </label>
-                    </section>
-                  </div>
-                  <div
-                    className="openstax-answer"
-                  >
-                    <section
-                      className="answers-answer disabled"
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={false}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-1"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-1"
+                      <section
+                        className="answers-answer disabled"
                       >
-                        <span
-                          aria-label="Choice B:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="B"
-                          data-test-id="answer-choice-B"
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-1"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-1"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "False",
-                              }
-                            }
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
                           />
-                        </div>
-                      </label>
-                    </section>
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="sc-ftvSup icqnDT step-card-footer"
-              >
                 <div
-                  className="step-card-footer-inner"
+                  className="sc-ftvSup icqnDT step-card-footer"
                 >
                   <div
-                    className="points"
-                    role="status"
-                  >
-                    <span
-                      className="attempts-left"
-                    />
-                  </div>
-                  <div
-                    className="controls"
+                    className="step-card-footer-inner"
                   >
-                    <button
-                      className="sc-jSMfEi hsxEPT"
-                      data-test-id="continue-btn"
-                      onClick={[Function]}
+                    <div
+                      className="points"
+                      role="status"
+                    >
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
                     >
-                      Next
-                    </button>
+                      <button
+                        className="sc-jSMfEi hsxEPT"
+                        data-test-id="continue-btn"
+                        onClick={[Function]}
+                      >
+                        Next
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -646,254 +657,258 @@ exports[`Exercise with question state data renders header icons with multiple ch
     >
       <div>
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          id="step-card"
         >
-          <div>
-            <h2
-              className="question-info"
-            >
-              <span>
-                Question 1
-              </span>
-              <span
-                className="separator"
+          <div
+            className="sc-dkzDqf kooVfX step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
               >
-                |
-              </span>
-              <span
-                className="question-id"
-              >
-                ID: 
-                1234@5
-              </span>
-            </h2>
-          </div>
-          <div>
-            <div
-              className="sc-crXcEl gsQfpC"
-            >
-              <a
-                aria-label="View topic in textbook"
-                className="sc-jqUVSM cQWbNZ"
-                href="https://openstax.org"
-                target="_blank"
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1234@5
+                </span>
+              </h2>
+            </div>
+            <div>
+              <div
+                className="sc-crXcEl gsQfpC"
               >
-                <div
-                  className="sc-kDDrLX eqjZTi"
+                <a
+                  aria-label="View topic in textbook"
+                  className="sc-jqUVSM cQWbNZ"
+                  href="https://openstax.org"
+                  target="_blank"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-book-open sc-evZas jGkxCt"
-                    data-icon="book-open"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C87.5 32 35.1 48.6 9 59.9c-5.6 2.4-9 8-9 14V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V73.9c0-6.1-3.4-11.6-9-14C540.9 48.6 488.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
                   <div
-                    className="sc-iqcoie hOwvcD popover right"
+                    className="sc-kDDrLX eqjZTi"
                   >
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-book-open sc-evZas jGkxCt"
+                      data-icon="book-open"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      style={Object {}}
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C87.5 32 35.1 48.6 9 59.9c-5.6 2.4-9 8-9 14V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V73.9c0-6.1-3.4-11.6-9-14C540.9 48.6 488.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
                     <div
-                      className="arrow"
-                    />
-                    <div
-                      className="content"
+                      className="sc-iqcoie hOwvcD popover right"
                     >
-                      View topic in textbook
+                      <div
+                        className="arrow"
+                      />
+                      <div
+                        className="content"
+                      >
+                        View topic in textbook
+                      </div>
                     </div>
                   </div>
-                </div>
-              </a>
-              <a
-                aria-label="Suggest a correction"
-                className="sc-jqUVSM cQWbNZ"
-                href="https://openstax.org"
-                target="_blank"
-              >
-                <div
-                  className="sc-kDDrLX eqjZTi"
+                </a>
+                <a
+                  aria-label="Suggest a correction"
+                  className="sc-jqUVSM cQWbNZ"
+                  href="https://openstax.org"
+                  target="_blank"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-triangle-exclamation sc-evZas jGkxCt"
-                    data-icon="triangle-exclamation"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
                   <div
-                    className="sc-iqcoie hOwvcD popover right"
+                    className="sc-kDDrLX eqjZTi"
                   >
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-triangle-exclamation sc-evZas jGkxCt"
+                      data-icon="triangle-exclamation"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      style={Object {}}
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
                     <div
-                      className="arrow"
-                    />
-                    <div
-                      className="content"
+                      className="sc-iqcoie hOwvcD popover right"
                     >
-                      Suggest a correction
+                      <div
+                        className="arrow"
+                      />
+                      <div
+                        className="content"
+                      >
+                        Suggest a correction
+                      </div>
                     </div>
                   </div>
-                </div>
-              </a>
+                </a>
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          className="sc-hKMtZM bwRTaS"
-        >
-          <div>
-            <div
-              className="step-card-body exercise-context"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Context",
+          <div
+            className="sc-hKMtZM bwRTaS"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
                 }
-              }
-            />
-            <div
-              className="step-card-body exercise-stimulus"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "<b>Stimulus HTML</b>",
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
                 }
-              }
-            />
-            <div
-              data-test-id="student-exercise-question"
-            >
+              />
               <div
-                className="sc-iBkjds bohpoA openstax-question step-card-body"
-                data-question-number={1}
-                data-test-id="question"
+                data-test-id="student-exercise-question"
               >
                 <div
-                  aria-label="Answer choices"
-                  className="answers-table"
-                  role="radiogroup"
+                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
                 >
                   <div
-                    className="openstax-answer"
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
                   >
-                    <section
-                      className="answers-answer disabled answer-selected"
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={true}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-0"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-0"
+                      <section
+                        className="answers-answer disabled answer-selected"
                       >
-                        <span
-                          aria-label="Selected Choice A:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="A"
-                          data-test-id="answer-choice-A"
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-0"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-0"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "True",
-                              }
-                            }
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
                           />
-                        </div>
-                      </label>
-                    </section>
-                  </div>
-                  <div
-                    className="openstax-answer"
-                  >
-                    <section
-                      className="answers-answer disabled"
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={false}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-1"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-1"
+                      <section
+                        className="answers-answer disabled"
                       >
-                        <span
-                          aria-label="Choice B:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="B"
-                          data-test-id="answer-choice-B"
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-1"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-1"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "False",
-                              }
-                            }
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
                           />
-                        </div>
-                      </label>
-                    </section>
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="sc-ftvSup icqnDT step-card-footer"
-              >
                 <div
-                  className="step-card-footer-inner"
+                  className="sc-ftvSup icqnDT step-card-footer"
                 >
                   <div
-                    className="points"
-                    role="status"
+                    className="step-card-footer-inner"
                   >
-                    <span
-                      className="attempts-left"
-                    />
-                  </div>
-                  <div
-                    className="controls"
-                  >
-                    <button
-                      className="sc-jSMfEi hsxEPT"
-                      data-test-id="continue-btn"
-                      onClick={[Function]}
+                    <div
+                      className="points"
+                      role="status"
                     >
-                      Next
-                    </button>
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
+                    >
+                      <button
+                        className="sc-jSMfEi hsxEPT"
+                        data-test-id="continue-btn"
+                        onClick={[Function]}
+                      >
+                        Next
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -973,294 +988,298 @@ exports[`Exercise with question state data renders header icons with two-step ex
     >
       <div>
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          id="step-card"
         >
-          <div>
-            <h2
-              className="question-info"
-            >
-              <span>
-                Question 1
-              </span>
-              <span
-                className="separator"
+          <div
+            className="sc-dkzDqf kooVfX step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
               >
-                |
-              </span>
-              <span
-                className="question-id"
-              >
-                ID: 
-                1234@5
-              </span>
-            </h2>
-          </div>
-          <div>
-            <div
-              className="sc-crXcEl gsQfpC"
-            >
-              <a
-                aria-label="View topic in textbook"
-                className="sc-jqUVSM cQWbNZ"
-                href="https://openstax.org"
-                target="_blank"
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1234@5
+                </span>
+              </h2>
+            </div>
+            <div>
+              <div
+                className="sc-crXcEl gsQfpC"
               >
-                <div
-                  className="sc-kDDrLX eqjZTi"
+                <a
+                  aria-label="View topic in textbook"
+                  className="sc-jqUVSM cQWbNZ"
+                  href="https://openstax.org"
+                  target="_blank"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-book-open sc-evZas jGkxCt"
-                    data-icon="book-open"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C87.5 32 35.1 48.6 9 59.9c-5.6 2.4-9 8-9 14V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V73.9c0-6.1-3.4-11.6-9-14C540.9 48.6 488.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
                   <div
-                    className="sc-iqcoie hOwvcD popover right"
+                    className="sc-kDDrLX eqjZTi"
                   >
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-book-open sc-evZas jGkxCt"
+                      data-icon="book-open"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      style={Object {}}
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C87.5 32 35.1 48.6 9 59.9c-5.6 2.4-9 8-9 14V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V73.9c0-6.1-3.4-11.6-9-14C540.9 48.6 488.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
                     <div
-                      className="arrow"
-                    />
-                    <div
-                      className="content"
+                      className="sc-iqcoie hOwvcD popover right"
                     >
-                      View topic in textbook
+                      <div
+                        className="arrow"
+                      />
+                      <div
+                        className="content"
+                      >
+                        View topic in textbook
+                      </div>
                     </div>
                   </div>
-                </div>
-              </a>
-              <a
-                aria-label="Suggest a correction"
-                className="sc-jqUVSM cQWbNZ"
-                href="https://openstax.org"
-                target="_blank"
-              >
-                <div
-                  className="sc-kDDrLX eqjZTi"
+                </a>
+                <a
+                  aria-label="Suggest a correction"
+                  className="sc-jqUVSM cQWbNZ"
+                  href="https://openstax.org"
+                  target="_blank"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-triangle-exclamation sc-evZas jGkxCt"
-                    data-icon="triangle-exclamation"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
                   <div
-                    className="sc-iqcoie hOwvcD popover right"
+                    className="sc-kDDrLX eqjZTi"
                   >
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-triangle-exclamation sc-evZas jGkxCt"
+                      data-icon="triangle-exclamation"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      style={Object {}}
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
                     <div
-                      className="arrow"
-                    />
-                    <div
-                      className="content"
+                      className="sc-iqcoie hOwvcD popover right"
                     >
-                      Suggest a correction
+                      <div
+                        className="arrow"
+                      />
+                      <div
+                        className="content"
+                      >
+                        Suggest a correction
+                      </div>
                     </div>
                   </div>
-                </div>
-              </a>
-              <div
-                aria-label="In a two-step question, OpenStax asks for your own answer first, then gives multiple-choice options to help you assess your learnings. Recalling the answer to a question from memory helps you to retain things longer."
-                className="sc-jqUVSM cQWbNZ"
-              >
+                </a>
                 <div
-                  className="sc-kDDrLX eqjZTi"
+                  aria-label="In a two-step question, OpenStax asks for your own answer first, then gives multiple-choice options to help you assess your learnings. Recalling the answer to a question from memory helps you to retain things longer."
+                  className="sc-jqUVSM cQWbNZ"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-circle-info sc-evZas jGkxCt"
-                    data-icon="circle-info"
-                    data-prefix="fas"
-                    focusable="false"
-                    height="16px"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    width="16px"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
                   <div
-                    className="sc-iqcoie hOwvcD popover right"
+                    className="sc-kDDrLX eqjZTi"
                   >
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-circle-info sc-evZas jGkxCt"
+                      data-icon="circle-info"
+                      data-prefix="fas"
+                      focusable="false"
+                      height="16px"
+                      role="img"
+                      style={Object {}}
+                      viewBox="0 0 512 512"
+                      width="16px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
                     <div
-                      className="arrow"
-                    />
-                    <div
-                      className="content"
+                      className="sc-iqcoie hOwvcD popover right"
                     >
-                      In a two-step question, OpenStax asks for your own answer first, then gives multiple-choice options to help you assess your learnings. Recalling the answer to a question from memory helps you to retain things longer.
+                      <div
+                        className="arrow"
+                      />
+                      <div
+                        className="content"
+                      >
+                        In a two-step question, OpenStax asks for your own answer first, then gives multiple-choice options to help you assess your learnings. Recalling the answer to a question from memory helps you to retain things longer.
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="sc-hKMtZM bwRTaS"
-        >
-          <div>
-            <div
-              className="step-card-body exercise-context"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Context",
+          <div
+            className="sc-hKMtZM bwRTaS"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
                 }
-              }
-            />
-            <div
-              className="step-card-body exercise-stimulus"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "<b>Stimulus HTML</b>",
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
                 }
-              }
-            />
-            <div
-              data-test-id="student-exercise-question"
-            >
+              />
               <div
-                className="sc-iBkjds bohpoA openstax-question step-card-body"
-                data-question-number={1}
-                data-test-id="question"
+                data-test-id="student-exercise-question"
               >
                 <div
-                  aria-label="Answer choices"
-                  className="answers-table"
-                  role="radiogroup"
+                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
                 >
                   <div
-                    className="openstax-answer"
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
                   >
-                    <section
-                      className="answers-answer disabled answer-selected"
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={true}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-0"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-0"
+                      <section
+                        className="answers-answer disabled answer-selected"
                       >
-                        <span
-                          aria-label="Selected Choice A:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="A"
-                          data-test-id="answer-choice-A"
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-0"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-0"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "True",
-                              }
-                            }
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
                           />
-                        </div>
-                      </label>
-                    </section>
-                  </div>
-                  <div
-                    className="openstax-answer"
-                  >
-                    <section
-                      className="answers-answer disabled"
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={false}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-1"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-1"
+                      <section
+                        className="answers-answer disabled"
                       >
-                        <span
-                          aria-label="Choice B:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="B"
-                          data-test-id="answer-choice-B"
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-1"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-1"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "False",
-                              }
-                            }
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
                           />
-                        </div>
-                      </label>
-                    </section>
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="sc-ftvSup icqnDT step-card-footer"
-              >
                 <div
-                  className="step-card-footer-inner"
+                  className="sc-ftvSup icqnDT step-card-footer"
                 >
                   <div
-                    className="points"
-                    role="status"
-                  >
-                    <span
-                      className="attempts-left"
-                    />
-                  </div>
-                  <div
-                    className="controls"
+                    className="step-card-footer-inner"
                   >
-                    <button
-                      className="sc-jSMfEi hsxEPT"
-                      data-test-id="continue-btn"
-                      onClick={[Function]}
+                    <div
+                      className="points"
+                      role="status"
                     >
-                      Next
-                    </button>
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
+                    >
+                      <button
+                        className="sc-jSMfEi hsxEPT"
+                        data-test-id="continue-btn"
+                        onClick={[Function]}
+                      >
+                        Next
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1286,181 +1305,185 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
     >
       <div>
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          id="step-card"
         >
-          <div>
-            <h2
-              className="question-info"
-            >
-              <span>
-                Question 1
-              </span>
-              <span
-                className="separator"
-              >
-                |
-              </span>
-              <span
-                className="question-id"
+          <div
+            className="sc-dkzDqf kooVfX step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
               >
-                ID: 
-                1234@5
-              </span>
-            </h2>
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1234@5
+                </span>
+              </h2>
+            </div>
           </div>
-        </div>
-        <div
-          className="sc-hKMtZM bwRTaS"
-        >
-          <div>
-            <div
-              className="step-card-body exercise-context"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Context",
+          <div
+            className="sc-hKMtZM bwRTaS"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
                 }
-              }
-            />
-            <div
-              className="step-card-body exercise-stimulus"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "<b>Stimulus HTML</b>",
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
                 }
-              }
-            />
-            <div
-              data-test-id="student-exercise-question"
-            >
+              />
               <div
-                className="sc-iBkjds bohpoA openstax-question step-card-body"
-                data-question-number={1}
-                data-test-id="question"
+                data-test-id="student-exercise-question"
               >
                 <div
-                  aria-label="Answer choices"
-                  className="answers-table"
-                  role="radiogroup"
+                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
                 >
                   <div
-                    className="openstax-answer"
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
                   >
-                    <section
-                      className="answers-answer disabled answer-selected"
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={true}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-0"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-0"
+                      <section
+                        className="answers-answer disabled answer-selected"
                       >
-                        <span
-                          aria-label="Selected Choice A:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="A"
-                          data-test-id="answer-choice-A"
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-0"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-0"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "True",
-                              }
-                            }
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
                           />
-                        </div>
-                      </label>
-                    </section>
-                  </div>
-                  <div
-                    className="openstax-answer"
-                  >
-                    <section
-                      className="answers-answer disabled"
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
                     >
-                      <input
-                        checked={false}
-                        className="answer-input-box"
-                        disabled={true}
-                        id="1-option-1"
-                        name="1-options"
-                        onChange={[Function]}
-                        type="radio"
-                      />
-                      <label
-                        className="answer-label"
-                        htmlFor="1-option-1"
+                      <section
+                        className="answers-answer disabled"
                       >
-                        <span
-                          aria-label="Choice B:"
-                          className="answer-letter-wrapper"
-                          data-answer-choice="B"
-                          data-test-id="answer-choice-B"
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1-option-1"
+                          name="1-options"
+                          onChange={[Function]}
+                          type="radio"
                         />
-                        <div
-                          className="answer-answer"
+                        <label
+                          className="answer-label"
+                          htmlFor="1-option-1"
                         >
                           <span
-                            className="answer-content"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "False",
-                              }
-                            }
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
                           />
-                        </div>
-                      </label>
-                    </section>
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="sc-ftvSup icqnDT step-card-footer"
-              >
                 <div
-                  className="step-card-footer-inner"
+                  className="sc-ftvSup icqnDT step-card-footer"
                 >
                   <div
-                    className="points"
-                    role="status"
+                    className="step-card-footer-inner"
                   >
-                    <span
-                      className="attempts-left"
-                    />
-                    <div>
-                      <strong>
-                        Detailed solution:
-                      </strong>
-                       
+                    <div
+                      className="points"
+                      role="status"
+                    >
                       <span
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Detailed solution",
-                          }
-                        }
+                        className="attempts-left"
                       />
+                      <div>
+                        <strong>
+                          Detailed solution:
+                        </strong>
+                         
+                        <span
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Detailed solution",
+                            }
+                          }
+                        />
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="controls"
-                  >
-                    <button
-                      className="sc-jSMfEi hsxEPT"
-                      data-test-id="continue-btn"
-                      onClick={[Function]}
+                    <div
+                      className="controls"
                     >
-                      Next
-                    </button>
+                      <button
+                        className="sc-jSMfEi hsxEPT"
+                        data-test-id="continue-btn"
+                        onClick={[Function]}
+                      >
+                        Next
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap b/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap
index 96cb6f64..e1d396ac 100644
--- a/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap
+++ b/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`IncludeRemoveQuestion matches snapshot 1`] = `
   className="sc-bczRLJ fXHYVE"
 >
   <button
-    aria-label="details"
+    aria-label="include"
     className="sc-gsnTZi gmAXwu include"
     onClick={[Function]}
   >
@@ -32,7 +32,7 @@ exports[`IncludeRemoveQuestion matches snapshot 1`] = `
     </span>
   </button>
   <button
-    aria-label="details button"
+    aria-label="details"
     className="sc-gsnTZi gmAXwu details"
   >
     <svg
@@ -64,7 +64,7 @@ exports[`IncludeRemoveQuestion matches snapshot 2`] = `
   className="sc-bczRLJ fXHYVE"
 >
   <button
-    aria-label="details"
+    aria-label="remove"
     className="sc-gsnTZi gmAXwu remove"
     onClick={[Function]}
   >
@@ -91,7 +91,7 @@ exports[`IncludeRemoveQuestion matches snapshot 2`] = `
     </span>
   </button>
   <button
-    aria-label="details button"
+    aria-label="details"
     className="sc-gsnTZi gmAXwu details"
   >
     <svg