London | 26-Jan | Gloria Mankrado | Sprint 2 | form control updated

[gloriamanks]

Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

• My form is semantic html.
• All inputs have associated labels.
• My Lighthouse Accessibility score is 100.
• I require a valid name. I have defined a valid name as a text string of two characters or more.
• I require a valid email.
• I require one colour from a defined set of 3 colours.
• I require one size from a defined set of 6 sizes.

##FEEDBACK UPDATES

I’ve wrapped the colour radio inputs inside their labels to improve accessibility and increased the clickable area. I’ve also added a pattern attribute to the name field to prevent space-only input.

Regarding the remaining Lighthouse warning, without using CSS it isn’t possible to increase the physical size of form controls, so I’ve applied the best possible HTML-only solution.

Questions

I have none at the moment.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	c82502e
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6985b256190b9f0008cbeccb
😎 Deploy Preview	https://deploy-preview-1090--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: 86 (no change 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]

Lighthouse score is 93. Reason given was, "Touch targets do not have sufficient size or spacing." (Suggestion: Ask AI how you can overcome this accessibility issue without using CSS)

[cjyuan]

Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?

[cjyuan]

Can consider wrapping the input element inside the label tags:

            <label>
              Red
              <input type="radio" name="colour" value="red" required />
            </label>

This way, we don't need to use the id and for attributes.

[gloriamanks]

Hi @cjyuan ,

Below are the changes i have made according to the feedback given:

• I’ve wrapped the colour inputs inside their labels
• I’ve also added additional requirements to the name field to prevent the issue " " referred.

Regarding the remaining Lighthouse warning, without using CSS it isn’t possible to increase the physical size of form controls, so I’ve applied the best possible HTML-only solution. According to the bot, however, this scores 100 on Accessibility

[cjyuan]

Netlify may be using a different version of Lighthouse or different settings when calculating the accessibility score. I think the browser's score is more reliable.

The no-CSS requirement is unusual in practice, but the fix is not difficult (and a bit silly). Just think of it as a puzzle.
Can you try any of the following options to reach a browser's Lighthouse accessibility score of 100?

1. Use CSS (I will accept the use of CSS), or
2. Ask ChatGPT "How to overcome the 'Touch targets do not have sufficient size or spacing' problem without using CSS".

[gloriamanks]

Hi @cjyuan ,
Thanks for your aid , i have resolved the accesibility issue.
What i did:

• The code now uses
  inside labels so line breaks
• Additional spaces/ Indents

[cjyuan]

You forgot to change label.

[cjyuan]

All good