Remove aria attributes in order to read card body content (#90)

* remove aria attributes in order to read card body content

* conditional aria attributes for cardbody

* previewMode in storybook

* missing previewMode prop

Author: jomcarvajal

src/components/AnswersTable.tsx

@@ -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; }
@@ -53,7 +54,7 @@ export const AnswersTable = (props: AnswersTableProps) => {
     onChangeAnswer: onChangeAnswer,
     type,
     answered_count,
-    disabled: !choicesEnabled,
+    disabled: previewMode || !choicesEnabled,
     show_all_feedback,
     tableFeedbackEnabled,
     onKeyPress
@@ -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}`,
     };
@@ -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>

src/components/Exercise.spec.tsx

@@ -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();
+    });
   });
 });

src/components/Exercise.stories.tsx

@@ -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)
@@ -810,7 +830,7 @@ export const PreviewCard = () => {
 
   return (
     <TextResizerProvider>
-      <Exercise {...props1} className='preview-card' />
+      <Exercise {...props1} className='preview-card' previewMode />
     </TextResizerProvider>
   );
 };
@@ -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 

src/components/Exercise/index.tsx

@@ -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);
@@ -236,6 +237,7 @@ export const Exercise = styled(({
                 'canUpdateCurrentStep' in props ?
                   props.canUpdateCurrentStep : !(i + 1 === exercise.questions.length)
               }
+              previewMode={previewMode}
             />
           )
         }

src/components/ExercisePreview.tsx

@@ -82,6 +82,7 @@ export const ExercisePreview = (
     <Exercise
       exercise={exercise}
       className={selected ? 'preview-card is-selected' : 'preview-card'}
+      previewMode
       {
       ...(enableOverlay
         ? {

src/components/ExerciseQuestion.tsx

@@ -38,6 +38,7 @@ export interface ExerciseQuestionProps {
   show_all_feedback?: boolean;
   tableFeedbackEnabled?: boolean;
   hasFeedback?: ExerciseBaseProps['hasFeedback'];
+  previewMode?: boolean;
 }
 
 const AttemptsRemaining = ({ count }: { count: number }) => {
@@ -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)
@@ -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>

src/components/Print.stories.tsx

@@ -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>
-      )
-  }))}
-  </>);

src/components/Question.tsx

@@ -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>) => {
@@ -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}