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"> / {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"> / {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