Feature/improve accessibility (#14)

* Add ids to inputs, labels & texts * Add id values into form elements
City-of-Turku · Apr 17, 2024 · 87f0806 · 87f0806
1 parent 1e45c8a
commit 87f0806
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git a/src/components/Forms/EmailForm/EmailForm.tsx b/src/components/Forms/EmailForm/EmailForm.tsx
@@ -57,6 +57,7 @@ const EmailForm = () => {
             </label>
             <input
               type="email"
+              id="email"
               placeholder={intl.formatMessage({ id: 'app.form.email.label' })}
               {...register('email', {
                 required: true,

diff --git a/src/components/Forms/UserForm/UserForm.tsx b/src/components/Forms/UserForm/UserForm.tsx
@@ -181,13 +181,14 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
             <div className="container flex-center">
               <div className="mb-2 form-group container-sm center-text">
                 <div>
-                  <label htmlFor="year_of_birth" className="text-label mb-1">
+                  <label htmlFor="gender" className="text-label mb-1">
                     {intl.formatMessage({ id: 'app.form.gender.label' })}
                   </label>
                 </div>
                 <div>
                   <select
                     {...register('gender', { required: true })}
+                    id="gender"
                     role="listbox"
                     aria-required="true"
                     aria-invalid={errors.gender ? true : false}
@@ -214,6 +215,7 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                 <div>
                   <select
                     {...register('year_of_birth', { required: true })}
+                    id="year_of_birth"
                     role="listbox"
                     aria-required="true"
                     aria-invalid={errors.year_of_birth ? true : false}
@@ -241,6 +243,7 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                   <div>
                     <select
                       {...register('postal_code', { required: false })}
+                      id="postal_code"
                       role="listbox"
                       onChange={(event) => handlePostalCodeStates(event, setIsPostalCode)}
                       disabled={isPostalCodeOther}
@@ -270,6 +273,7 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                 <div className="flex-input">
                   <input
                     {...register('postal_code_other', { required: false, maxLength: 10 })}
+                    id="postal_code_other"
                     type="text"
                     maxLength={10}
                     onChange={(event) => handlePostalCodeStates(event, setIsPostalCodeOther)}
@@ -303,6 +307,7 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                         required: false,
                       })}
                       role="listbox"
+                      id="optional_postal_code"
                       onChange={(event) => handlePostalCodeStates(event, setIsOptionalPostalCode)}
                       disabled={isOptionalPostalCodeOther}
                       aria-required="false"
@@ -331,6 +336,7 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                 <div className="flex-input">
                   <input
                     {...register('optional_postal_code_other', { required: false, maxLength: 10 })}
+                    id="optional_postal_code_other"
                     type="text"
                     maxLength={10}
                     onChange={(event) =>
@@ -362,18 +368,20 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                 <input
                   type="checkbox"
                   {...register('is_interested_in_mobility', { required: false })}
+                  id="is_interested_in_mobility"
                   aria-required="false"
                   aria-invalid={errors.is_interested_in_mobility ? true : false}
                   className="form-check-input"
                 />
-                <label htmlFor="is_filled_for_fun" className="text-label">
+                <label htmlFor="is_interested_in_mobility" className="text-label">
                   {intl.formatMessage({ id: 'app.form.interestedInMobility.label' })}
                 </label>
               </div>
               <div className="mb-3 form-check container-sm center-text">
                 <input
                   type="checkbox"
                   {...register('result_can_be_used', { required: false })}
+                  id="result_can_be_used"
                   aria-required="false"
                   aria-invalid={errors.result_can_be_used ? true : false}
                   className="form-check-input"

diff --git a/src/components/Tables/TableCommon/TableCommon.tsx b/src/components/Tables/TableCommon/TableCommon.tsx
@@ -141,16 +141,12 @@ const TableCommon: React.FC<TableCommonProps> = ({ question }) => {
             <tr key={option.id}>
               <td className="center-input input-w50">
                 <input
+                  id={`option_${option.id}`}
                   name={'id'}
                   type={numberOfOptions === '1' ? 'radio' : 'checkbox'}
                   value={option.id}
                   checked={mainOptions.some((mainOption) => mainOption.option === option.id)}
                   onChange={(event) => createAnswerEvent(event, option)}
-                  aria-disabled={
-                    limitSelections &&
-                    mainOptions.length >= 3 &&
-                    disabledOptions.includes(option.id)
-                  }
                   disabled={
                     limitSelections &&
                     mainOptions.length >= 3 &&
@@ -161,26 +157,30 @@ const TableCommon: React.FC<TableCommonProps> = ({ question }) => {
               {option.is_other ? (
                 <td>
                   <input
+                    id={`other_${option.id}`}
                     name={'id'}
                     type="text"
                     value={otherValue}
                     className="input-text"
                     maxLength={maxCount}
                     onChange={(event) => setOtherValue(event.target.value)}
+                    aria-describedby={`charCount_${option.id}`}
                     placeholder={renderLocaleValue(
                       getLocaleText,
                       option.value_fi,
                       option.value_en,
                       option.value_sv,
                     )}
                   />
-                  <small>{`${otherCount}/${maxCount} ${intl.formatMessage({
+                  <small
+                    id={`charCount_${option.id}`}
+                  >{`${otherCount}/${maxCount} ${intl.formatMessage({
                     id: 'app.form.helperText.characters',
                   })}`}</small>
                 </td>
               ) : (
                 <td>
-                  <label>
+                  <label htmlFor={`option_${option.id}`}>
                     {renderLocaleValue(
                       getLocaleText,
                       option.value_fi,

diff --git a/src/components/Tables/TableExtended/TableExtended.tsx b/src/components/Tables/TableExtended/TableExtended.tsx
@@ -161,9 +161,7 @@ const TableExtended: React.FC<TableExtendedProps> = ({ questionData }) => {
           <th style={commonCellStyle}>{intl.formatMessage({ id: 'app.text.options' })}</th>
           {optionsArray?.map((item) => (
             <th key={item.value_fi} style={commonCellStyle}>
-              <label>
-                {renderLocaleValue(getLocaleText, item.value_fi, item.value_en, item.value_sv)}
-              </label>
+              <p>{renderLocaleValue(getLocaleText, item.value_fi, item.value_en, item.value_sv)}</p>
             </th>
           ))}
         </tr>
@@ -172,7 +170,7 @@ const TableExtended: React.FC<TableExtendedProps> = ({ questionData }) => {
         {subQuestionsArray?.map((item) => (
           <tr key={item.id}>
             <td style={commonCellStyle}>
-              <label>
+              <label htmlFor={`row-${item.id}`}>
                 {renderLocaleValue(
                   getLocaleText,
                   item.description_fi,
@@ -186,6 +184,7 @@ const TableExtended: React.FC<TableExtendedProps> = ({ questionData }) => {
               .map((option) => (
                 <td key={option.id} className="center-input">
                   <input
+                    id={`row-${item.id}`}
                     name={`row-${item.id}`}
                     type="radio"
                     value={option.id}
@@ -213,6 +212,7 @@ const TableExtended: React.FC<TableExtendedProps> = ({ questionData }) => {
               <tr key={option.id}>
                 <td className="center-input input-w50">
                   <input
+                    id={`row-${item.id}`}
                     name={`row-${item.id}`}
                     type="radio"
                     value={option.id}
@@ -222,26 +222,30 @@ const TableExtended: React.FC<TableExtendedProps> = ({ questionData }) => {
                 {option.is_other ? (
                   <td>
                     <input
+                      id={`row-${item.id}`}
                       name={`row-${item.id}`}
                       type="text"
                       value={otherValue}
                       className="input-text"
                       maxLength={maxCount}
                       onChange={(event) => setOtherValue(event.target.value)}
+                      aria-describedby={`charCount_${option.id}`}
                       placeholder={renderLocaleValue(
                         getLocaleText,
                         option.value_fi,
                         option.value_en,
                         option.value_sv,
                       )}
                     />
-                    <small>{`${otherCount}/${maxCount} ${intl.formatMessage({
+                    <small
+                      id={`charCount_${option.id}`}
+                    >{`${otherCount}/${maxCount} ${intl.formatMessage({
                       id: 'app.form.helperText.characters',
                     })}`}</small>
                   </td>
                 ) : (
                   <td>
-                    <label>
+                    <label htmlFor={`row-${item.id}`}>
                       {renderLocaleValue(
                         getLocaleText,
                         option.value_fi,

diff --git a/src/components/Tables/TableExtended/__tests__/TableExtended.test.tsx b/src/components/Tables/TableExtended/__tests__/TableExtended.test.tsx
@@ -59,9 +59,10 @@ describe('<TableExtended />', () => {
       <TableExtended questionData={mockProps.questionData} />,
     );
 
+    const p = container.querySelectorAll('p');
     const label = container.querySelectorAll('label');
-    expect(label[0].textContent).toContain(mockProps.questionData.options[0].value_fi);
-    expect(label[1].textContent).toContain(mockProps.questionData.sub_questions[0].description_fi);
+    expect(p[0].textContent).toContain(mockProps.questionData.options[0].value_fi);
+    expect(label[0].textContent).toContain(mockProps.questionData.sub_questions[0].description_fi);
   });
 
   it('does contain input', () => {