[Quiz] Correct count is not displayed properly on Storybook demo

[huyenltnguyen]

Description

This isn't a bug in the component, but in this Storybook demo: https://opensource.freecodecamp.org/ui/?path=/story/components-quiz--with-validation.

In the demo, we only want to display the correct answer count on submit, but the number shows up on the screen on load:

Screenshot


Code:

https://github.com/freeCodeCamp/ui/blob/f23cd2833eecd2248b84f6d3be93267f27c62989/src/quiz/quiz.stories.tsx#L106

While we're at it, we should improve the accessibility of the correct count message as well. In order for screen readers to pick up the message, it should be placed inside a live region:

<div aria-live="polite">
  <p>Correct answers: {correctAnswerCount}</p>
</div>

Changes needed

Update the rendering logic to:

• Not display the correct answer count before submission
• Display the correct answer count on submit
• Display the correct answer count within a live region

[a2937]

I am getting these weird errors and can't contribute.

Edit: This happens on WSL 2. Looks like Windows standalone may be fine.