fix(curriculum): add a lesson to registration form practice project for requiring radio buttons

[NiharPhansalkar]

trafficstars

Checklist:

• [x] I have read freeCodeCamp's contribution guidelines.
• [x] My pull request has a descriptive title (not a vague title like Update index.md)
• [x] My pull request targets the main branch of freeCodeCamp.
• [x] I have tested these changes either locally on my machine, or GitPod.

Closes #47456

User can make it mandatory to select a radio button using the required attribute.

[gitpod-io[bot]]

[ghost]

:eyes: Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[NiharPhansalkar]

The request was to add a checked attribute to the buttons and create a legend. However, I personally feel that a required attribute is the best and the cleanest way to address this issue. This leaves both radio buttons unchecked initially, however, does not allow any user to submit the form without choosing one. And since all radio buttons are grouped together with the name attribute, the required attribute is applied on the entire group of radio's, so adding new radio's will maintain the required attribute provided they have the same name attribute to them.

[majestic-owl448]

About that screenshot... The correct test to run is npm run test:curriculum --block='Learn HTML Forms by Building a Registration Form'

Your changes will fail. You have removed code added in some of the later stepts

[NiharPhansalkar]

I am extremely sorry for the mistakes. Thank you for being patient with me.

[bbsmooth]

@NiharPhansalkar

The request was to add a checked attribute to the buttons and create a legend. However, I personally feel that a required attribute is the best and the cleanest way to address this issue.

And you have checked your implementation with a screen reader to make sure it functions appropriately? Also, what visual indicator is there to indicate that this radio button grouping is required? There is a reason we settled on that particular solution in the issue. If you feel that your solution is better and can justify it then please make the argument in the issue. But until the consensus on the solution has changed in the issue then I don't think you should be able to make the decision by yourself that it should be implemented differently.

I'm afraid I have to recommend that this PR not be approved because it does not follow accessibility best practices for implementing a required radio button grouping.

[NiharPhansalkar]

@bbsmooth I have made the required changes. I changed all required into checked and also added in the legend. Please re-review the PR.

[raisedadead]

@bbsmooth @ieahleen

Please review, but we will try and land this later than usual because it adds files which is a logistical problem - for deployments.

We will try and fit this into the queue next week. But that should not stop you from reviewing it.

Thanks.

[majestic-owl448]

I had the chance to go through all the project, I think the creation of the legend element is slighlt out of order, I would add creating the legend element in step 23, and then filling it up in step 26. This project has the flow of first creating all the elements as barebones, and then adding text and attributes in a second moment.

Also I think that the styling doesn't keep in mind the legend element

I think we could add a padding-top to the legend of 3em. Maybe in step 46 or so.

After this, I think it's ready.

[NiharPhansalkar]

Sure, I will look into it over the weekend and make the required changes. 👍

[Sboonny]

@NiharPhansalkar, how is this going so far?