Description

Ref: freeCodeCamp/freeCodeCamp#60498.

There are two subcomponents should be added:

• QuestionLabel
• OptionLabel

QuestionLabel

• Simply a wrapper around PrismFormatted. This is to avoid confusion, as we will have an OptionLabel component in the mix. This approach also passes the a11y responsibility to the library, so client will have less to worry about.

  // question-label
  const QuestionLabel = () => (
    <PrismFormatted
       text={question}
      getCodeBlockAriaLabel={() => {}}
    />
  );

• The component is named QuestionLabel, but is exported as a subcomponent of QuizQuestion and Quiz (QuizQuestion.QuestionLabel and Quiz.QuestionLabel)

  // quiz.tsx
  Quiz.QuestionLabel = QuestionLabel;
  export Quiz;
  
  // quiz-question.tsx
  QuizQuestion.QuestionLabel = QuestionLabel;
  export QuizQuestion;

• The examples on Quiz and QuizQuestion storybook pages should be updated to use the .OptionLabel component

OptionLabel

• This component will be a wrapper around PrismFormatted, as follows:

  // option-label.tsx
  const OptionLabel = () => (
    <PrismFormatted
      text={removeParagraphTags(questionText)}
      useSpan
      noAria
    />
  ));

• The component is named QuizLabel, but is exported as a subcomponent of QuizQuestion and Quiz (QuizQuestion.OptionLabel and Quiz.OptionLabel):

  // quiz.tsx
  Quiz.OptionLabel = OptionLabel;
  export Quiz;
  
  // quiz-question.tsx
  QuizQuestion.OptionLabel = OptionLabel;
  export QuizQuestion;

• The examples on Quiz and QuizQuestion storybook pages should be updated to use the .OptionLabel component