Skip to content

Commit

Permalink
Remove aria attributes in order to read card body content (#90)
Browse files Browse the repository at this point in the history
* remove aria attributes in order to read card body content

* conditional aria attributes for cardbody

* previewMode in storybook

* missing previewMode prop
  • Loading branch information
jomcarvajal authored Feb 26, 2025
1 parent 17a7f9b commit a2d2d97
Show file tree
Hide file tree
Showing 10 changed files with 258 additions and 118 deletions.
25 changes: 18 additions & 7 deletions src/components/AnswersTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,15 @@ export interface AnswersTableProps {
onKeyPress?: () => void;
contentRenderer?: JSX.Element;
instructions?: JSX.Element;
previewMode?: boolean;
}

export const AnswersTable = (props: AnswersTableProps) => {
let idCounter = 0;

const {
question, hideAnswers, type = defaultAnswerType, answered_count, choicesEnabled, correct_answer_id,
incorrectAnswerId, answer_id, feedback_html, correct_answer_feedback_html,
incorrectAnswerId, answer_id, feedback_html, correct_answer_feedback_html, previewMode,
show_all_feedback = false, tableFeedbackEnabled, hasCorrectAnswer, onChangeAnswer, onKeyPress, answerIdOrder, instructions
} = props;
if (hideAnswers) { return null; }
Expand All @@ -53,7 +54,7 @@ export const AnswersTable = (props: AnswersTableProps) => {
onChangeAnswer: onChangeAnswer,
type,
answered_count,
disabled: !choicesEnabled,
disabled: previewMode || !choicesEnabled,
show_all_feedback,
tableFeedbackEnabled,
onKeyPress
Expand All @@ -64,10 +65,10 @@ export const AnswersTable = (props: AnswersTableProps) => {
const answersHtml = answers.map((answer, i) => {
const additionalProps: { answer: AnswerType, iter: number, key: string }
= {
answer: {
...answer,
question_id: typeof question.id === 'string' ? parseInt(question.id, 10) : question.id
},
answer: {
...answer,
question_id: typeof question.id === 'string' ? parseInt(question.id, 10) : question.id
},
iter: i,
key: `${questionAnswerProps.qid}-option-${i}`,
};
Expand Down Expand Up @@ -103,7 +104,17 @@ export const AnswersTable = (props: AnswersTableProps) => {
});

return (
<div role="radiogroup" aria-label="Answer choices" className="answers-table">
<div
{
...(!previewMode
? {
role: "radiogroup",
'aria-label': "Answer choices"
}
: {})
}
className="answers-table"
>
{instructions}
{answersHtml}
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/components/Exercise.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -376,5 +376,12 @@ describe('Exercise', () => {
).toJSON();
expect(tree).toMatchSnapshot();
});

it('matches snapshot with previewMode', () => {
const tree = renderer.create(
<Exercise {...props} show_all_feedback previewMode />
).toJSON();
expect(tree).toMatchSnapshot();
});
});
});
26 changes: 23 additions & 3 deletions src/components/Exercise.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,26 @@ export const Default = () => {
);
};

export const AnswerInteractionDisable = () => {
const [selectedAnswerId, setSelectedAnswerId] = useState<number>(0);
const [apiIsPending, setApiIsPending] = useState(false);
const props = exerciseWithQuestionStatesProps();
props.questionStates['1'].answer_id = selectedAnswerId;
props.questionStates['1'].apiIsPending = apiIsPending;
return (
<Exercise
{...props}
onAnswerChange={(
a: Omit<Answer, 'id'> & { id: number; question_id: number },
) => {
setSelectedAnswerId(a.id);
}}
onAnswerSave={() => setApiIsPending(true)}
previewMode
/>
);
};

export const DefaultWithoutFeedback = () => {
const [selectedAnswerId, setSelectedAnswerId] = useState<number>(0);
const [apiIsPending, setApiIsPending] = useState(false)
Expand Down Expand Up @@ -810,7 +830,7 @@ export const PreviewCard = () => {

return (
<TextResizerProvider>
<Exercise {...props1} className='preview-card' />
<Exercise {...props1} className='preview-card' previewMode />
</TextResizerProvider>
);
};
Expand Down Expand Up @@ -959,8 +979,8 @@ export const OverlayCard = () => {
return (
<TextResizerProvider>
<h2>Exercise cards</h2>
<Exercise {...props1} className='preview-card' />
<Exercise {...props2} className='preview-card' />
<Exercise {...props1} className='preview-card' previewMode />
<Exercise {...props2} className='preview-card' previewMode />
<h2>Exercise Preview cards</h2>
{showDetails1 && <h2>Details 1!</h2>}
<ExercisePreview
Expand Down
4 changes: 3 additions & 1 deletion src/components/Exercise/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,9 @@ export const Exercise = styled(({
scrollToQuestion,
exerciseIcons,
overlayChildren,
previewMode = false,
...props
}: { className?: string } & (ExerciseWithStepDataProps | ExerciseWithQuestionStatesProps) & OverlayProps) => {
}: { className?: string, previewMode?: boolean } & (ExerciseWithStepDataProps | ExerciseWithQuestionStatesProps) & OverlayProps) => {
const legacyStepRender = 'feedback_html' in step;
const questionsRef = React.useRef<Array<HTMLDivElement>>([]);
const container = React.useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -236,6 +237,7 @@ export const Exercise = styled(({
'canUpdateCurrentStep' in props ?
props.canUpdateCurrentStep : !(i + 1 === exercise.questions.length)
}
previewMode={previewMode}
/>
)
}
Expand Down
1 change: 1 addition & 0 deletions src/components/ExercisePreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export const ExercisePreview = (
<Exercise
exercise={exercise}
className={selected ? 'preview-card is-selected' : 'preview-card'}
previewMode
{
...(enableOverlay
? {
Expand Down
4 changes: 3 additions & 1 deletion src/components/ExerciseQuestion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export interface ExerciseQuestionProps {
show_all_feedback?: boolean;
tableFeedbackEnabled?: boolean;
hasFeedback?: ExerciseBaseProps['hasFeedback'];
previewMode?: boolean;
}

const AttemptsRemaining = ({ count }: { count: number }) => {
Expand Down Expand Up @@ -97,7 +98,7 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
answer_id, hasMultipleAttempts, attempts_remaining, published_comments, detailedSolution,
canAnswer, needsSaved, attempt_number, apiIsPending, onAnswerSave, onNextStep, canUpdateCurrentStep,
displaySolution, available_points, free_response, show_all_feedback, tableFeedbackEnabled,
hasFeedback
hasFeedback, previewMode
} = props;

const [shouldContinue, setShouldContinue] = React.useState(false)
Expand Down Expand Up @@ -129,6 +130,7 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
displaySolution={displaySolution}
show_all_feedback={show_all_feedback}
tableFeedbackEnabled={tableFeedbackEnabled}
previewMode={previewMode}
>
<FreeResponseReview free_response={free_response} />
</Question>
Expand Down
99 changes: 0 additions & 99 deletions src/components/Print.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,99 +0,0 @@
import { ExerciseData, ExerciseQueryData, ExerciseQuestionData, StepBase } from '../../src/types';
import data from '../../exercises.json';
import styled from 'styled-components';
import { Exercise } from './Exercise';

const ExerciseWrapper = styled.div`
break-inside: avoid;
.step-card-body {
padding: 24px 48px !important;
}
.step-card-footer {
display: none;
}
.exercise-id {
height: auto;
}
.exercise-step {
min-height: auto;
}
.question-feedback {
box-shadow: none !important;
}
.openstax-answer {
break-inside: avoid;
.answer-letter-wrapper::after {
content: '' !important;
}
}
`;

const exercises = (data as ExerciseQueryData).exercises as ExerciseData[];

const firstQuestionNumByExercise = exercises.reduce((acc, ex) => ({
...acc,
[ex.uuid]: acc.questionCounter + 1,
questionCounter: acc.questionCounter + ex.questions.length
}), {questionCounter: 0});

// placeholder until exercise data contains correct answer IDs
const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => (
{id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '')}));

const questionStateFields = {
available_points: '1.0',
is_completed: true,
answer_id: '1',
free_response: '',
feedback_html: '',
correct_answer_feedback_html: '',
attempts_remaining: 0,
attempt_number: 1,
incorrectAnswerId: 0
}

export const Default = () => (
<>
{data.title && <h2>Exercises for {data.title}</h2>}
{exercises.map(((exercise) => {

const step: StepBase = {
id: 1,
uid: exercise.uid,
available_points: '1.0',
};

const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => {
const {id, correct_answer_id} = answer;
return {...acc, [id]: {...questionStateFields, correct_answer_id}};
}, {});

return (
<ExerciseWrapper key={exercise.uid}>
<Exercise
key={exercise.uid}
canAnswer={true}
needsSaved={true}
hasMultipleAttempts={false}
onAnswerChange={() => undefined}
onAnswerSave={() => undefined}
onNextStep={() => undefined}
apiIsPending={false}
canUpdateCurrentStep={false}
exercise={exercise}
step={step}
questionNumber={firstQuestionNumByExercise[exercise.uuid]}
numberOfQuestions={exercises.length}
questionStates={questionStates}
show_all_feedback={true} />
</ExerciseWrapper>
)
}))}
</>);
4 changes: 3 additions & 1 deletion src/components/Question.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ export interface QuestionProps {
children?: ReactNode;
answerIdOrder?: ID[];
choicesEnabled?: boolean;
previewMode?: boolean;
}

export const Question = React.forwardRef((props: QuestionProps, ref: React.ForwardedRef<HTMLDivElement>) => {
Expand Down Expand Up @@ -296,7 +297,8 @@ export const Question = React.forwardRef((props: QuestionProps, ref: React.Forwa
<AnswersTable
{...props}
onChangeAnswer={props.onChange}
hasCorrectAnswer={hasCorrectAnswer} />
hasCorrectAnswer={hasCorrectAnswer}
/>

{solution}
{props.displayFormats ? <FormatsListing formats={formats} /> : undefined}
Expand Down
Loading

0 comments on commit a2d2d97

Please sign in to comment.