Add fieldset and legend to radio inputs in the shows components

[Sboonny]

The odin, python and the new math curriculum has radio inputs, and they don't have fieldset and legend elements, that give some context for the screenReaders.

here is an example

freeCodeCamp/client/src/templates/Challenges/video/show.tsx

Lines 249 to 274 in 28cbf6a

	<div className='video-quiz-options'>
	{answers.map((option, index) => (
	// answers are static and have no natural id property, so
	// index should be fine as a key:
	<label className='video-quiz-option-label' key={index}>
	<input
	aria-label={ariaLabel}
	checked={this.state.selectedOption === index}
	className='video-quiz-input-hidden'
	name='quiz'
	onChange={this.handleOptionChange}
	type='radio'
	value={index}
	/>{' '}
	<span className='video-quiz-input-visible'>
	{this.state.selectedOption === index ? (
	<span className='video-quiz-selected-input' />
	) : null}
	</span>
	<PrismFormatted
	className={'video-quiz-option'}
	text={option}
	/>
	</label>
	))}
	</div>

We can add fieldset and legend to work as context for screen readers and add className sr-only so they won't change the visual looks in the page.

I don't know what context should be added tho.

[VaibhavKambar7]

Hey, I believe I have successfully addressed this issue. Would you like me to create a pull request for your review?

[Sboonny]

There is no hurry to close this, what context did you use in your PR, and is it translatable?

[bbsmooth]

I've actually been working on this for the past few days. I think it might be slightly more complicated than just adding a fieldset/legend. For example, take the following challenge:

https://www.freecodecamp.org/learn/scientific-computing-with-python/python-for-everybody/object-lifecycle

The question stem consists of a lot of code. Some screen readers may read that code every time the user navigates to an answer option. That means they will hear all of that code at least three times. But even if the screen reader only reads the code once when the user first starts navigating the answer options, if the user needs to keep referencing the code then they will navigate out of the answers to read the code and then when they navigate back in they will hear all of the code again. Basically, having a lot of text/code like this in the legend is not ideal for screen reader users.

My suggestion would be to rework the exercise on this page to something like this:

<h2>Exercise</h2>

<p>Consider the following program:</p>

[ The code block]

<fieldset>
<legend>What would the preceding program print?</legend>

[Each label/input]

<fieldset>

There is actually a challenge that sort of follows this format:

https://www.freecodecamp.org/learn/scientific-computing-with-python/python-for-everybody/more-conditional-structures

It's just not marked up correctly.

[Sboonny]

This format makes sense to me 👍🤔.

[bbsmooth]

I'm going to create a PR later today with a proof of concept on how this might work. I've already got most of it in place since I've been working on it this past week.

Update: This is taking just a little longer than I expected. I hope to have the PR in the next day or two. There are a lot of little issues concerning accessibility that need to be addressed.