London | May-2025 | Samuel Tarawally | Form Controls

[Tarawally]

Learners, PR Template

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

Changelist

This PR updates index.html to align with README.md requirements.

Key Changes:

• Pure HTML Structure: All styling has been removed, making the form entirely HTML driven.
• Input Validation: Ensures all required fields (name, email, colour, size) are correctly validated.
• User Accessibility: All form inputs are properly labelled, improving usability for all users.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	e89d5e0
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/68407bfdfd6dbd00084a424b
😎 Deploy Preview	https://deploy-preview-689--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (🟢 up 5 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cjyuan]

The code is clean, error-free, and properly formatted. The implementation is robust. The pull request description is clear, concise. Excellent job!

The Lighthouse Accessibility score is not yet 100. Can you improve the score to 100?

[Tarawally]

I appreciate the quick review and feedback, @cjyuan. I'll revisit the Lighthouse Accessibility score to see what's going on and make adjustments are possible.

[Tarawally]

I've made the following adjustments to achieve a 100% Lighthouse accessibility score. This involved:

• Improved form structure by replacing <div> with <p> for better semantic grouping and spacing.

[cjyuan]

The content within <p> is not really a paragraph. Semantically <div> is better (<div> has no semantic).
Without using CSS, we can create vertical gap using <br> (line break). (Sort of a hack).
This is a simple change which I am sure you can make.

I will go ahead and mark this PR as "Complete".

The key takeaway is that we should check everything thoroughly — especially those checks that can be performed using automated tools — before submitting our work for review.