Fixed aria-descriptions on input textboxes (#1920)

DTS-STN · Jul 10, 2024 · 9a8106a · 9a8106a
1 parent 830b638
commit 9a8106a
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 16 deletions.
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -71,6 +71,8 @@ module.exports = {
         '@typescript-eslint/consistent-type-exports': 'error',
         '@typescript-eslint/consistent-type-imports': 'error',
         'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+        // Note: aria-props for aria-description is only supported in the upcoming WAI-ARIA 1.3 spec
+        'jsx-a11y/aria-props': 'warn',
       },
     },
     {

diff --git a/frontend/app/routes/$lang/_public/apply/$id/adult-child/applicant-information.tsx b/frontend/app/routes/$lang/_public/apply/$id/adult-child/applicant-information.tsx
@@ -223,7 +223,7 @@ export default function ApplyFlowApplicationInformation() {
                 label={t('applicant-information.first-name')}
                 className="w-full"
                 maxLength={100}
-                aria-describedby="name-instructions"
+                aria-description={t('applicant-information.name-instructions')}
                 autoComplete="given-name"
                 errorMessage={errorMessages['first-name']}
                 defaultValue={defaultState?.firstName ?? ''}
@@ -238,7 +238,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={errorMessages['last-name']}
-                aria-describedby="name-instructions"
+                aria-description={t('applicant-information.name-instructions')}
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/adult-child/children/$childId/information.tsx b/frontend/app/routes/$lang/_public/apply/$id/adult-child/children/$childId/information.tsx
@@ -321,7 +321,7 @@ export default function ApplyFlowChildInformation() {
                 label={t('apply-adult-child:children.information.first-name')}
                 className="w-full"
                 maxLength={100}
-                aria-describedby="name-instructions"
+                aria-description={t('apply-adult-child:children.information.name-instructions')}
                 autoComplete="given-name"
                 errorMessage={fetcher.data?.errors.firstName?._errors[0]}
                 defaultValue={defaultState?.firstName ?? ''}
@@ -336,7 +336,7 @@ export default function ApplyFlowChildInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={fetcher.data?.errors.lastName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('apply-adult-child:children.information.name-instructions')}
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/adult-child/partner-information.tsx b/frontend/app/routes/$lang/_public/apply/$id/adult-child/partner-information.tsx
@@ -245,7 +245,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="given-name"
                 defaultValue={defaultState?.firstName ?? ''}
                 errorMessage={fetcher.data?.errors.firstName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('partner-information.name-instructions')}
                 required
               />
               <InputSanitizeField
@@ -257,7 +257,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={fetcher.data?.errors.lastName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('partner-information.name-instructions')}
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/adult/applicant-information.tsx b/frontend/app/routes/$lang/_public/apply/$id/adult/applicant-information.tsx
@@ -217,7 +217,7 @@ export default function ApplyFlowApplicationInformation() {
                 label={t('applicant-information.first-name')}
                 className="w-full"
                 maxLength={100}
-                aria-describedby="name-instructions"
+                aria-description={t('applicant-information.name-instructions')}
                 autoComplete="given-name"
                 errorMessage={errorMessages['first-name']}
                 defaultValue={defaultState?.firstName ?? ''}
@@ -229,10 +229,10 @@ export default function ApplyFlowApplicationInformation() {
                 label={t('applicant-information.last-name')}
                 className="w-full"
                 maxLength={100}
+                aria-description={t('applicant-information.name-instructions')}
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={errorMessages['last-name']}
-                aria-describedby="name-instructions"
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/adult/partner-information.tsx b/frontend/app/routes/$lang/_public/apply/$id/adult/partner-information.tsx
@@ -239,7 +239,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="given-name"
                 defaultValue={defaultState?.firstName ?? ''}
                 errorMessage={fetcher.data?.errors.firstName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('partner-information.name-instructions')}
                 required
               />
               <InputSanitizeField
@@ -251,7 +251,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={fetcher.data?.errors.lastName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('partner-information.name-instructions')}
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/child/applicant-information.tsx b/frontend/app/routes/$lang/_public/apply/$id/child/applicant-information.tsx
@@ -314,7 +314,7 @@ export default function ApplyFlowApplicationInformation() {
                 label={t('applicant-information.first-name')}
                 className="w-full"
                 maxLength={100}
-                aria-describedby="name-instructions"
+                aria-description={t('applicant-information.name-instructions')}
                 autoComplete="given-name"
                 errorMessage={errors?.firstName?._errors[0]}
                 defaultValue={defaultState?.firstName ?? ''}
@@ -329,7 +329,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={errors?.lastName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('applicant-information.name-instructions')}
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/child/children/$childId/information.tsx b/frontend/app/routes/$lang/_public/apply/$id/child/children/$childId/information.tsx
@@ -321,7 +321,7 @@ export default function ApplyFlowChildInformation() {
                 label={t('apply-child:children.information.first-name')}
                 className="w-full"
                 maxLength={100}
-                aria-describedby="name-instructions"
+                aria-description={t('apply-child:children.information.name-instructions')}
                 autoComplete="given-name"
                 errorMessage={fetcher.data?.errors.firstName?._errors[0]}
                 defaultValue={defaultState?.firstName ?? ''}
@@ -336,7 +336,7 @@ export default function ApplyFlowChildInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={fetcher.data?.errors.lastName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('apply-child:children.information.name-instructions')}
                 required
               />
             </div>

diff --git a/frontend/app/routes/$lang/_public/apply/$id/child/partner-information.tsx b/frontend/app/routes/$lang/_public/apply/$id/child/partner-information.tsx
@@ -244,7 +244,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="given-name"
                 defaultValue={defaultState?.firstName ?? ''}
                 errorMessage={fetcher.data?.errors.firstName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('partner-information.name-instructions')}
                 required
               />
               <InputSanitizeField
@@ -256,7 +256,7 @@ export default function ApplyFlowApplicationInformation() {
                 autoComplete="family-name"
                 defaultValue={defaultState?.lastName ?? ''}
                 errorMessage={fetcher.data?.errors.lastName?._errors[0]}
-                aria-describedby="name-instructions"
+                aria-description={t('partner-information.name-instructions')}
                 required
               />
             </div>