From 6f72e8e5b6f42e33bfcb899d656fc43a2600213f Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Wed, 28 Aug 2024 14:07:17 +0000
Subject: [PATCH] fix(a11y): Checkboxes must be accessible
---
src/components/Connection/EPGLConnect/EpglForm.tsx | 2 --
src/components/Connection/GRDFConnect/StepConsent.tsx | 10 ++++------
src/components/Connection/GRDFConnect/StepIdentity.tsx | 5 -----
src/components/Connection/SGEConnect/StepAddress.tsx | 3 ---
src/components/Connection/SGEConnect/StepConsent.tsx | 8 +++-----
.../Connection/SGEConnect/StepIdentityAndPdl.tsx | 3 ---
.../__snapshots__/SgeConnectView.spec.tsx.snap | 3 ---
.../SGEConnect/__snapshots__/StepAddress.spec.tsx.snap | 3 ---
.../SGEConnect/__snapshots__/StepConsent.spec.tsx.snap | 6 +++---
.../__snapshots__/StepIdentityAndPdl.spec.tsx.snap | 3 ---
.../EcogestureFormSingleChoice.tsx | 5 +++--
.../EcogestureFormSingleChoice.spec.tsx.snap | 6 ++++--
.../__snapshots__/EcogestureFormView.spec.tsx.snap | 6 ++++--
src/components/Options/ExportData/ExportData.tsx | 4 ++--
.../ProfileTypeFormMultiChoice.tsx | 3 ++-
.../ProfileTypeFormNumberSelection.tsx | 1 -
.../ProfileTypeFormSingleChoice.tsx | 3 ++-
src/components/Terms/TermsView.tsx | 7 +++----
.../Terms/__snapshots__/TermsView.spec.tsx.snap | 5 +++--
19 files changed, 33 insertions(+), 53 deletions(-)
diff --git a/src/components/Connection/EPGLConnect/EpglForm.tsx b/src/components/Connection/EPGLConnect/EpglForm.tsx
index 14ba3dd2c..7191e9631 100644
--- a/src/components/Connection/EPGLConnect/EpglForm.tsx
+++ b/src/components/Connection/EPGLConnect/EpglForm.tsx
@@ -100,7 +100,6 @@ const EpglForm = ({ hasCreatedAccount }: { hasCreatedAccount: boolean }) => {
type="number"
className={classNames('inputText', { error: error !== '' })}
label={t(`auth.eglgrandlyon.connect_form.login`)}
- name="login"
onChange={e => changeLogin(e.target.value)}
value={login}
inputMode="numeric"
@@ -110,7 +109,6 @@ const EpglForm = ({ hasCreatedAccount }: { hasCreatedAccount: boolean }) => {
<TextField
variant="outlined"
id={'idFieldPassword' + fluidName}
- name="password"
type={showPassword ? 'text' : 'password'}
className={classNames('inputText', { error: error !== '' })}
label={t(`auth.eglgrandlyon.connect_form.password`)}
diff --git a/src/components/Connection/GRDFConnect/StepConsent.tsx b/src/components/Connection/GRDFConnect/StepConsent.tsx
index ac9c00dea..b6e982ad8 100644
--- a/src/components/Connection/GRDFConnect/StepConsent.tsx
+++ b/src/components/Connection/GRDFConnect/StepConsent.tsx
@@ -28,11 +28,10 @@ const StepConsent = ({
<li>{t('auth.grdfgrandlyon.consentLi1')}</li>
<li>{t('auth.grdfgrandlyon.consentLi2')}</li>
</ul>
- <label className="inline">
+ <label htmlFor="dataConsentGrdf" className="inline">
<input
- id="dataConsent"
+ id="dataConsentGrdf"
type="checkbox"
- name="Data-consent-validation"
className="inputCheckbox"
checked={formConsent.dataConsent}
onChange={e =>
@@ -45,11 +44,10 @@ const StepConsent = ({
}}
/>
</label>
- <label className="inline">
+ <label htmlFor="pceConfirm" className="inline">
<input
- id="pdlConfirm"
+ id="pceConfirm"
type="checkbox"
- name="Data-consent-validation"
className="inputCheckbox"
checked={formConsent.pceConfirm}
onChange={e =>
diff --git a/src/components/Connection/GRDFConnect/StepIdentity.tsx b/src/components/Connection/GRDFConnect/StepIdentity.tsx
index ff7db3b27..53ca42370 100644
--- a/src/components/Connection/GRDFConnect/StepIdentity.tsx
+++ b/src/components/Connection/GRDFConnect/StepIdentity.tsx
@@ -23,7 +23,6 @@ export const StepIdentity = ({
variant="outlined"
type="text"
id="firstName"
- name="firstName"
value={formData.firstname}
onChange={e =>
setFormData(prev => ({ ...prev, firstname: e.target.value }))
@@ -36,7 +35,6 @@ export const StepIdentity = ({
variant="outlined"
type="text"
id="lastName"
- name="lastName"
required
value={formData.lastname}
onChange={e =>
@@ -49,7 +47,6 @@ export const StepIdentity = ({
variant="outlined"
type="email"
id="email"
- name="email"
required
value={formData.email}
onChange={e =>
@@ -62,7 +59,6 @@ export const StepIdentity = ({
variant="outlined"
type="number"
id="zipCode"
- name="zipCode"
required
value={formData.postalCode}
onChange={e =>
@@ -76,7 +72,6 @@ export const StepIdentity = ({
label={t('auth.grdfgrandlyon.pceLabel')}
variant="outlined"
id="pce"
- name="pce"
type="number"
inputMode="numeric"
required
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index dfbcc2d51..b2971c47f 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -21,7 +21,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
variant="outlined"
type="text"
id="address"
- name="address"
value={sgeState.address}
onChange={e => onChange('address', e.target.value)}
required
@@ -31,7 +30,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
variant="outlined"
type="number"
id="zipCode"
- name="zipCode"
value={sgeState.zipCode ?? undefined}
onChange={e => onChange('zipCode', e.target.value, 5)}
required
@@ -41,7 +39,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
variant="outlined"
type="text"
id="city"
- name="city"
value={sgeState.city}
onChange={e => onChange('city', e.target.value)}
required
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index 33988363d..d411ee838 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -24,11 +24,10 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
<li>{t('auth.enedissgegrandlyon.consentLi3')}</li>
<li>{t('auth.enedissgegrandlyon.consentLi4')}</li>
</ul>
- <label className="inline">
+ <label htmlFor="dataConsentSge" className="inline">
<input
- id="dataConsent"
+ id="dataConsentSge"
type="checkbox"
- name="Data-consent-validation"
className="inputCheckbox"
onChange={e => onChange('dataConsent', e.target.checked)}
checked={sgeState.dataConsent}
@@ -39,11 +38,10 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
}}
/>
</label>
- <label className="inline">
+ <label htmlFor="pdlConfirm" className="inline">
<input
id="pdlConfirm"
type="checkbox"
- name="Data-consent-validation"
className="inputCheckbox"
onChange={e => onChange('pdlConfirm', e.target.checked)}
checked={sgeState.pdlConfirm}
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index 6a7915032..c55c0ec60 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -31,7 +31,6 @@ const StepIdentityAndPdl = ({
variant="outlined"
type="text"
id="firstName"
- name="firstName"
value={sgeState.firstName}
onChange={e => onChange('firstName', e.target.value)}
required
@@ -41,7 +40,6 @@ const StepIdentityAndPdl = ({
variant="outlined"
type="text"
id="lastName"
- name="lastName"
value={sgeState.lastName}
onChange={e => onChange('lastName', e.target.value)}
required
@@ -51,7 +49,6 @@ const StepIdentityAndPdl = ({
label={t('auth.enedissgegrandlyon.pdlLabel')}
variant="outlined"
id="pdl"
- name="pdl"
type="number"
value={sgeState.pdl ? sgeState.pdl : undefined}
onChange={e => onChange('pdl', e.target.value, 14)}
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 9f0d7974e..94a59e9e8 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -118,7 +118,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="firstName"
- name="firstName"
required=""
type="text"
value=""
@@ -163,7 +162,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="lastName"
- name="lastName"
required=""
type="text"
value=""
@@ -214,7 +212,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="pdl"
- name="pdl"
required=""
type="number"
value=""
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
index 9333648f7..1e960609d 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
@@ -35,7 +35,6 @@ exports[`StepAddress component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="address"
- name="address"
required=""
type="text"
value=""
@@ -80,7 +79,6 @@ exports[`StepAddress component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="zipCode"
- name="zipCode"
required=""
type="number"
value=""
@@ -125,7 +123,6 @@ exports[`StepAddress component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="city"
- name="city"
required=""
type="text"
value=""
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
index 12291fade..3b013e643 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
@@ -33,11 +33,11 @@ exports[`StepConsent component should be rendered correctly 1`] = `
</ul>
<label
class="inline"
+ for="dataConsentSge"
>
<input
class="inputCheckbox"
- id="dataConsent"
- name="Data-consent-validation"
+ id="dataConsentSge"
type="checkbox"
/>
<span>
@@ -46,11 +46,11 @@ exports[`StepConsent component should be rendered correctly 1`] = `
</label>
<label
class="inline"
+ for="pdlConfirm"
>
<input
class="inputCheckbox"
id="pdlConfirm"
- name="Data-consent-validation"
type="checkbox"
/>
<span>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
index 2eaf41d73..f03a152d9 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
@@ -35,7 +35,6 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="firstName"
- name="firstName"
required=""
type="text"
value=""
@@ -80,7 +79,6 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="lastName"
- name="lastName"
required=""
type="text"
value=""
@@ -131,7 +129,6 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="pdl"
- name="pdl"
required=""
type="number"
value=""
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
index 5bafacadc..2e94a1abf 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
@@ -50,10 +50,11 @@ const EcogestureFormSingleChoice = ({
`ecogesture_form.${EcogestureStepForm[step].toLowerCase()}.question`
)}
</div>
- {answerType.choices.map(value => {
+ {answerType.choices.map((value, index) => {
if (value === null) return null
return (
<label
+ htmlFor={`answer-${index}`}
key={value.toString()}
className={classNames({
['radio_short']: answerType.choices.length < 5,
@@ -62,9 +63,9 @@ const EcogestureFormSingleChoice = ({
})}
>
<input
+ id={`answer-${index}`}
type="radio"
value={value}
- name={value.toString()}
onChange={() => setAnswer(value)}
checked={answer === value}
className={answer === value ? 'checked-input' : ''}
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index cc1a10027..ec3bc7d2a 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -15,11 +15,12 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
</div>
<label
class="radio_short answer-checked"
+ for="answer-0"
>
<input
checked=""
class="checked-input"
- name="individual"
+ id="answer-0"
type="radio"
value="individual"
/>
@@ -27,10 +28,11 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
</label>
<label
class="radio_short"
+ for="answer-1"
>
<input
class=""
- name="collective"
+ id="answer-1"
type="radio"
value="collective"
/>
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index cc7a4efcf..6cdf7d888 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -22,10 +22,11 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
</div>
<label
class="radio_short"
+ for="answer-0"
>
<input
class=""
- name="individual"
+ id="answer-0"
type="radio"
value="individual"
/>
@@ -33,10 +34,11 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
</label>
<label
class="radio_short"
+ for="answer-1"
>
<input
class=""
- name="collective"
+ id="answer-1"
type="radio"
value="collective"
/>
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index c8fc07003..488dc64b9 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -66,12 +66,12 @@ const ExportData = () => {
const fluidCheckbox = () =>
exportableFluids.map(fluidType => (
- <label key={fluidType}>
+ <label htmlFor={`export-${fluidType}`} key={fluidType}>
<input
+ id={`export-${fluidType}`}
type="checkbox"
className="inputCheckbox"
value={fluidType}
- name={t(`FLUID.${FluidType[fluidType]}.LABEL`)}
onChange={() => handleChange(fluidType)}
checked={answer.includes(fluidType)}
/>
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
index 07f1895e9..80f0876d1 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
@@ -82,15 +82,16 @@ const ProfileTypeFormMultiChoice = ({
const stringValue = value.toString()
return (
<label
+ htmlFor={`answer${index}`}
key={index}
className={classNames('checkbox', {
['answer-checked']: answer.includes(stringValue),
})}
>
<input
+ id={`answer${index}`}
type="checkbox"
value={stringValue}
- name={stringValue}
onChange={() => handleChange(stringValue)}
checked={isChecked(stringValue)}
/>
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index 06b84201e..25fddf044 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -83,7 +83,6 @@ const ProfileTypeFormNumberSelection = ({
type="tel"
className="inputNumberIncrements"
value={answer.toString()}
- name={answerType.attribute}
size="small"
/>
<Button
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
index 0f5216e8f..08755a286 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
@@ -76,6 +76,7 @@ const ProfileTypeFormSingleChoice = ({
return (
<label
+ htmlFor={`answer-${index}`}
key={index}
className={classNames({
['radio_short']: answerType.choices.length < 5,
@@ -84,9 +85,9 @@ const ProfileTypeFormSingleChoice = ({
})}
>
<input
+ id={`answer-${index}`}
type="radio"
value={value.toString()}
- name={value.toString()}
onChange={() => setAnswer(value)}
checked={answer === value ? true : false}
/>
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index d7262d8fc..1ee54c079 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -44,21 +44,20 @@ const TermsView = () => {
<>
<div className="terms-content">
<DataShareConsentContent />
- <label className="inline">
+ <label htmlFor="dataConsent" className="inline">
<input
+ id="dataConsent"
type="checkbox"
- name="Data-consent-validation"
className="inputCheckbox"
onChange={e => setDataConsentValidation(e.target.checked)}
checked={dataConsentValidation}
/>
{t('dataShare.validDataConsent')}
</label>
- <label className="inline">
+ <label htmlFor="gcu" className="inline">
<input
id="gcu"
type="checkbox"
- name="GCU-validation"
className="inputCheckbox"
onChange={e => setGCUValidation(e.target.checked)}
checked={GCUValidation}
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index 0783bbe8b..dca3c7f1d 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -102,21 +102,22 @@ exports[`TermsView component should be rendered correctly 1`] = `
</div>
<label
class="inline"
+ for="dataConsent"
>
<input
class="inputCheckbox"
- name="Data-consent-validation"
+ id="dataConsent"
type="checkbox"
/>
dataShare.validDataConsent
</label>
<label
class="inline"
+ for="gcu"
>
<input
class="inputCheckbox"
id="gcu"
- name="GCU-validation"
type="checkbox"
/>
<div>
--
GitLab