fix: a11y improvements for finder

shared-helpers/src/locales/ar.json

@@ -604,7 +604,9 @@
   "finder.region.question": "ما هي المناطق التي ترغب بالعيش فيها؟",
   "finder.region.subtitle": "سوف نستخدم اختياراتك للعثور على العقارات التي قد تتوافق مع احتياجاتك السكنية.",
   "finder.rent.maxRent": "الحد الأقصى للإيجار",
+  "finder.rent.maxRentReader": "أدخل المبلغ بالدولار للحد الأقصى للإيجار الخاص بك",
   "finder.rent.minRent": "الحد الأدنى للإيجار",
+  "finder.rent.minRentReader": "أدخل المبلغ بالدولار للحد الأدنى للإيجار الخاص بك",
   "finder.rent.noMaxRent": "لا يوجد حد أقصى للإيجار",
   "finder.rent.noMinRent": "لا يوجد حد أدنى للإيجار",
   "finder.rent.question": "ما هو مقدار الإيجار الذي يمكنك تحمله؟",

shared-helpers/src/locales/bn.json

@@ -604,7 +604,9 @@
   "finder.region.question": "আপনি কোন এলাকায় থাকতে চান?",
   "finder.region.subtitle": "আপনার আবাসনের চাহিদার সাথে মেলে এমন ভাড়া খুঁজে পেতে আমরা আপনার নির্বাচনগুলি ব্যবহার করব।",
   "finder.rent.maxRent": "সর্বোচ্চ ভাড়া",
+  "finder.rent.maxRentReader": "আপনার সর্বোচ্চ ভাড়ার ডলারের পরিমাণ লিখুন",
   "finder.rent.minRent": "সর্বনিম্ন ভাড়া",
+  "finder.rent.minRentReader": "আপনার সর্বনিম্ন ভাড়ার ডলারের পরিমাণ লিখুন",
   "finder.rent.noMaxRent": "সর্বোচ্চ ভাড়া নেই",
   "finder.rent.noMinRent": "ন্যূনতম ভাড়া নেই",
   "finder.rent.question": "আপনি কত ভাড়া দিতে পারবেন?",

shared-helpers/src/locales/es.json

@@ -604,7 +604,9 @@
   "finder.region.question": "¿En qué zonas te gustaría vivir?",
   "finder.region.subtitle": "Utilizaremos sus selecciones para encontrar alquileres que puedan coincidir con sus necesidades de vivienda.",
   "finder.rent.maxRent": "Alquiler máximo",
+  "finder.rent.maxRentReader": "Ingrese el monto en dólares de su alquiler máximo",
   "finder.rent.minRent": "Alquiler mínimo",
+  "finder.rent.minRentReader": "Ingrese el monto en dólares de su alquiler mínimo",
   "finder.rent.noMaxRent": "Sin alquiler máximo",
   "finder.rent.noMinRent": "Sin alquiler mínimo",
   "finder.rent.question": "¿Cuánto alquiler puedes pagar?",

shared-helpers/src/locales/general.json

@@ -601,7 +601,9 @@
   "finder.region.question": "What areas would you like to live in?",
   "finder.region.subtitle": "We will use your selections to find you rentals that may match your housing needs.",
   "finder.rent.maxRent": "Maximum rent",
+  "finder.rent.maxRentReader": "Enter the dollar amount of your maximum rent",
   "finder.rent.minRent": "Minimum rent",
+  "finder.rent.minRentReader": "Enter the dollar amount of your minimum rent",
   "finder.rent.noMaxRent": "No maximum rent",
   "finder.rent.noMinRent": "No minimum rent",
   "finder.rent.question": "How much rent can you afford to pay?",

shared-helpers/src/locales/tl.json

@@ -604,7 +604,9 @@
   "finder.region.question": "Anong mga lugar ang gusto mong tumira?",
   "finder.region.subtitle": "Gagamitin namin ang iyong mga pinili upang mahanap ka ng mga paupahan na maaaring tumugma sa iyong mga pangangailangan sa pabahay.",
   "finder.rent.maxRent": "Pinakamataas na upa",
+  "finder.rent.maxRentReader": "Ilagay ang halaga ng iyong pinakamataas na upa sa dolyar",
   "finder.rent.minRent": "Minimum na upa",
+  "finder.rent.minRentReader": "Ilagay ang halaga ng iyong minimum na upa sa dolyar",
   "finder.rent.noMaxRent": "Walang maximum na upa",
   "finder.rent.noMinRent": "Walang minimum na upa",
   "finder.rent.question": "Magkano ang renta na kaya mong bayaran?",

shared-helpers/src/locales/vi.json

@@ -604,7 +604,9 @@
   "finder.region.question": "Bạn muốn sống ở khu vực nào?",
   "finder.region.subtitle": "Chúng tôi sẽ sử dụng lựa chọn của bạn để tìm cho bạn những căn hộ cho thuê phù hợp với nhu cầu nhà ở của bạn.",
   "finder.rent.maxRent": "Tiền thuê tối đa",
+  "finder.rent.maxRentReader": "Nhập số tiền thuê tối đa của bạn bằng đô la",
   "finder.rent.minRent": "Tiền thuê tối thiểu",
+  "finder.rent.minRentReader": "Nhập số tiền thuê tối thiểu của bạn bằng đô la",
   "finder.rent.noMaxRent": "Không có giá thuê tối đa",
   "finder.rent.noMinRent": "Không có tiền thuê tối thiểu",
   "finder.rent.question": "Bạn có khả năng chi trả bao nhiêu tiền thuê nhà?",

shared-helpers/src/locales/zh.json

@@ -604,7 +604,9 @@
   "finder.region.question": "您想居住在哪些地区？",
   "finder.region.subtitle": "我们将根据您的选择来寻找可能符合您住房需求的出租房。",
   "finder.rent.maxRent": "最高租金",
+  "finder.rent.maxRentReader": "請輸入您的最高租金金額（美元）",
   "finder.rent.minRent": "最低租金",
+  "finder.rent.minRentReader": "請輸入您的最低租金金額（美元）",
   "finder.rent.noMaxRent": "无最高租金",
   "finder.rent.noMinRent": "无最低租金",
   "finder.rent.question": "您能负担得起多少租金？",

shared-helpers/src/views/components/BloomCard.tsx

@@ -17,6 +17,8 @@ interface BloomCardProps {
   id?: string
   subtitle?: string | React.ReactNode
   title?: string
+  titleTabIndex?: number
+  titleId?: string
   altHeading?: boolean
   variant?: "form" | "block"
 }
@@ -32,7 +34,12 @@ const BloomCard = (props: BloomCardProps) => {
       if (props.subtitle) {
         return (
           <HeadingGroup
-            headingProps={{ size: "2xl", priority: props.headingPriority || 1 }}
+            headingProps={{
+              id: props.titleId,
+              priority: props.headingPriority || 1,
+              size: "2xl",
+              tabIndex: props.titleTabIndex,
+            }}
             heading={props.title}
             subheading={props.subtitle}
             className={styles["card-heading-group"]}
@@ -44,6 +51,8 @@ const BloomCard = (props: BloomCardProps) => {
           size="2xl"
           priority={props.headingPriority || 1}
           className={props.altHeading ? styles["card-alt-heading-font"] : undefined}
+          id={props.titleId}
+          tabIndex={props.titleTabIndex}
         >
           {props.title}
         </Heading>

sites/public/src/components/finder/FinderRentQuestion.tsx

@@ -32,6 +32,7 @@ export default function FinderRentQuestion() {
               validateRentValues(getValues, clearErrors, setError)
             },
           }}
+          ariaLabel={t(`finder.rent.minRentReader`)}
         />
         <Field
           id={`${ListingFilterKeys.monthlyRent}.maxRent`}
@@ -48,6 +49,7 @@ export default function FinderRentQuestion() {
           inputProps={{
             onBlur: () => validateRentValues(getValues, clearErrors, setError),
           }}
+          ariaLabel={t(`finder.rent.maxRentReader`)}
         />
       </div>
       <Field

sites/public/src/components/finder/RentalsFinder.tsx

@@ -1,6 +1,6 @@
 import { FormProvider, useForm } from "react-hook-form"
 import { useRouter } from "next/router"
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useMemo, useRef, useState } from "react"
 import { BloomCard, CustomIconMap, listingFeatures } from "@bloom-housing/shared-helpers"
 import {
   FeatureFlagEnum,
@@ -42,12 +42,18 @@ export type RentalsFinderProps = {
   multiselectData: MultiselectQuestion[]
 }
 
+const setFocusToTitle = () => {
+  document.getElementById("finder-card-title")?.focus()
+  return
+}
+
 export default function RentalsFinder({ activeFeatureFlags, multiselectData }: RentalsFinderProps) {
   const router = useRouter()
   const [stepIndex, setStepIndex] = useState<number>(0)
   const [sectionIndex, setSectionIndex] = useState<number>(0)
   const [formData, setFormData] = useState<FilterData>({})
   const formMethods = useForm<FilterData>()
+  const stepHeaderRef = useRef<HTMLDivElement>(null)
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { reset, handleSubmit, getValues, errors } = formMethods
@@ -195,8 +201,10 @@ export default function RentalsFinder({ activeFeatureFlags, multiselectData }: R
     if (isLastStep) {
       setSectionIndex((prev) => prev + 1)
       setStepIndex(0)
+      stepHeaderRef.current?.focus()
     } else {
       setStepIndex((prev) => prev + 1)
+      document.getElementById("finder-card-title")?.focus()
     }
     window.scrollTo({ top: 0 })
   }, [errors, isLastStep, getValues])
@@ -215,8 +223,10 @@ export default function RentalsFinder({ activeFeatureFlags, multiselectData }: R
       const numberOfSteps = rentalFinderSections[prevSectionIndex]?.sectionSteps.length
       setStepIndex(numberOfSteps - 1)
       setSectionIndex(prevSectionIndex)
+      stepHeaderRef.current?.focus()
     } else {
       setStepIndex((prev) => prev - 1)
+      setFocusToTitle()
     }
   }, [formData, stepIndex, sectionIndex, getValues, rentalFinderSections, reset])
 
@@ -246,13 +256,15 @@ export default function RentalsFinder({ activeFeatureFlags, multiselectData }: R
             mounted={true}
           />
           {sectionIndex <= sectionLabels.length - 1 && (
-            <StepHeader
-              currentStep={sectionIndex + 1}
-              totalSteps={sectionLabels.length}
-              stepPreposition={t("finder.progress.stepPreposition")}
-              stepLabeling={sectionLabels}
-              priority={2}
-            />
+            <div tabIndex={-1} ref={stepHeaderRef}>
+              <StepHeader
+                currentStep={sectionIndex + 1}
+                totalSteps={sectionLabels.length}
+                stepPreposition={t("finder.progress.stepPreposition")}
+                stepLabeling={sectionLabels}
+                priority={2}
+              />
+            </div>
           )}
         </div>
         <BloomCard
@@ -272,6 +284,8 @@ export default function RentalsFinder({ activeFeatureFlags, multiselectData }: R
             </>
           }
           title={activeQuestion.question}
+          titleTabIndex={-1}
+          titleId="finder-card-title"
           subtitle={activeQuestion.subtitle}
           headingPriority={2}
         >