diff --git a/shared-helpers/package.json b/shared-helpers/package.json index 59e93c018a..4d93741b85 100644 --- a/shared-helpers/package.json +++ b/shared-helpers/package.json @@ -17,7 +17,7 @@ "prettier": "prettier --write \"**/*.ts\"" }, "dependencies": { - "@bloom-housing/ui-components": "13.0.3", + "@bloom-housing/ui-components": "13.0.6", "@bloom-housing/ui-seeds": "3.3.1", "@heroicons/react": "^2.1.1", "axios-cookiejar-support": "^5.0.5", diff --git a/sites/partners/package.json b/sites/partners/package.json index 7fd3237278..b0bfe4594a 100644 --- a/sites/partners/package.json +++ b/sites/partners/package.json @@ -30,7 +30,7 @@ }, "dependencies": { "@bloom-housing/shared-helpers": "^7.7.1", - "@bloom-housing/ui-components": "13.0.3", + "@bloom-housing/ui-components": "13.0.6", "@bloom-housing/ui-seeds": "3.3.1", "@heroicons/react": "^2.2.0", "@mapbox/mapbox-sdk": "^0.13.0", diff --git a/sites/public/package.json b/sites/public/package.json index d7d8f96619..2bd4d2bf79 100644 --- a/sites/public/package.json +++ b/sites/public/package.json @@ -30,7 +30,7 @@ }, "dependencies": { "@bloom-housing/shared-helpers": "^7.7.1", - "@bloom-housing/ui-components": "13.0.3", + "@bloom-housing/ui-components": "13.0.6", "@bloom-housing/ui-seeds": "3.3.1", "@heroicons/react": "^2.1.1", "@mapbox/mapbox-sdk": "^0.13.0", diff --git a/sites/public/src/pages/applications/contact/address.tsx b/sites/public/src/pages/applications/contact/address.tsx index 242e8e4c47..48fc485a86 100644 --- a/sites/public/src/pages/applications/contact/address.tsx +++ b/sites/public/src/pages/applications/contact/address.tsx @@ -177,7 +177,7 @@ const ApplicationAddress = () => { {t("errors.errorsToResolve")} )} -
+
@@ -253,41 +253,45 @@ const ApplicationAddress = () => { setValue("additionalPhoneNumberType", "") } }, + "aria-expanded": additionalPhone, + "aria-controls": "additional-phone-fields", }} dataTestId={"app-primary-additional-phone"} + className={"mb-0"} /> - - {additionalPhone && ( - <> - - +
+ )} +
@@ -389,106 +393,111 @@ const ApplicationAddress = () => { register={register} inputProps={{ defaultChecked: application.sendMailToMailingAddress, + "aria-controls": "additional-mailing-address-fields", + "aria-expanded": sendMailToMailingAddress, }} dataTestId={"app-primary-send-to-mailing"} /> - {clientLoaded && (sendMailToMailingAddress || application.sendMailToMailingAddress) && ( - -
- - {t("application.contact.mailingAddress")} - +
+ {clientLoaded && + (sendMailToMailingAddress || application.sendMailToMailingAddress) && ( + +
+ + {t("application.contact.mailingAddress")} + -

- {t("application.contact.provideAMailingAddress")} -

+

+ {t("application.contact.provideAMailingAddress")} +

- + - + -
- - - +
+ + +
+
+ )} +
@@ -543,6 +552,7 @@ const ApplicationAddress = () => { inputProps={{ value: "yes", defaultChecked: application.applicant.workInRegion == "yes", + "aria-controls": "work-in-region", }} dataTestId={"app-primary-work-in-region-yes"} /> @@ -559,6 +569,7 @@ const ApplicationAddress = () => { inputProps={{ value: "no", defaultChecked: application.applicant.workInRegion == "no", + "aria-controls": "work-in-region", }} dataTestId={"app-primary-work-in-region-no"} /> @@ -569,97 +580,103 @@ const ApplicationAddress = () => { )}
- {(workInRegion == "yes" || - (!workInRegion && application.applicant.workInRegion == "yes")) && ( -
-
- - {t("application.contact.workAddress")} - - - - - +
+ {(workInRegion == "yes" || + (!workInRegion && application.applicant.workInRegion == "yes")) && ( +
+
+ + {t("application.contact.workAddress")} + -
- +
+ + +
+
+ )} +
)} {enableFullTimeStudentQuestion && ( diff --git a/sites/public/src/pages/applications/contact/alternate-contact-type.tsx b/sites/public/src/pages/applications/contact/alternate-contact-type.tsx index 3a32641003..df24be9a0a 100644 --- a/sites/public/src/pages/applications/contact/alternate-contact-type.tsx +++ b/sites/public/src/pages/applications/contact/alternate-contact-type.tsx @@ -116,28 +116,32 @@ const ApplicationAlternateContactType = () => { inputProps={{ value: option, defaultChecked: application.alternateContact.type === option, + "aria-controls": option === "other" ? "other-type" : undefined, }} dataTestId={"app-alternate-type"} /> - - {option === "other" && type === "other" && ( - - )} +
+ {option === "other" && type === "other" && ( + + )} +
{i === altContactRelationshipKeys.length - 1 && ( <> {errors.type && ( diff --git a/sites/public/src/pages/applications/contact/name.tsx b/sites/public/src/pages/applications/contact/name.tsx index b0fed3fccf..2085389b83 100644 --- a/sites/public/src/pages/applications/contact/name.tsx +++ b/sites/public/src/pages/applications/contact/name.tsx @@ -173,8 +173,11 @@ const ApplicationName = () => { {t("application.name.yourDateOfBirth")} } + ariaDescribedBy="dob-helper" /> -

{t("application.name.dobHelper")}

+

+ {t("application.name.dobHelper")} +

{ label: t("t.yes"), value: YesNoEnum.yes, defaultChecked: member?.sameAddress === "yes", + inputProps: { + "aria-controls": "householdMemberAddress", + }, }, { id: "sameAddressNo", label: t("t.no"), value: YesNoEnum.no, defaultChecked: member?.sameAddress === "no", + inputProps: { + "aria-controls": "householdMemberAddress", + }, }, ] @@ -161,12 +167,18 @@ const ApplicationMember = () => { label: t("t.yes"), value: YesNoEnum.yes, defaultChecked: member?.workInRegion === "yes", + inputProps: { + "aria-controls": "householdMemberWorkAddress", + }, }, { id: "workInRegionNo", label: t("t.no"), value: YesNoEnum.no, defaultChecked: member?.workInRegion === "no", + inputProps: { + "aria-controls": "householdMemberWorkAddress", + }, }, ] @@ -310,176 +322,65 @@ const ApplicationMember = () => { />
- {(sameAddress == "no" || (!sameAddress && member.sameAddress == "no")) && ( -
- {t("application.contact.address")} - - - - - -
- - - { controlClassName="control" options={stateKeys} keyPrefix="states" - dataTestId={"app-household-member-work-address-state"} + dataTestId={"app-household-member-address-state"} />
)} +
+
+ + {!disableWorkInRegion && ( + +
+ + {t("application.household.member.workInRegion", { + county: + listing?.listingsBuildingAddress?.county || listing?.jurisdictions?.name, + })} + + +
+ +
+ {(workInRegion == "yes" || (!workInRegion && member.workInRegion == "yes")) && ( +
+ + {t("application.contact.address")} + + + + + + +
+ + +