fix: a11y improvements for finder #5221

KrissDrawing · 2025-08-06T13:38:27Z

This PR addresses #4913

Addresses the issue in full
Addresses only certain aspects of the issue

Description

Adds finder a11y improvements from detroit page. It will be:

focus on card title on step change.
focus on section "title" on section change
adds aria label for rent fields

How Can This Be Tested/Reviewed?

turn on screen reader and walk through /finder.

Author Checklist:

Added QA notes to the issue with applicable URLs
Reviewed in a desktop view
Reviewed in a mobile view
Reviewed considering accessibility
Added tests covering the changes
Made corresponding changes to the documentation
Ran yarn generate:client and/or created a migration when required

Review Process:

Read and understand the issue
Ensure the author has added QA notes
Review the code itself from a style point of view
Pull the changes down locally and test that the acceptance criteria is met
Either (1) explicitly ask a clarifying question, (2) request changes, or (3) approve the PR, even if there are very small remaining changes, if you don't need to re-review after the updates

ColinBuyck

I'm noticing that the focus stays on the next button when the user changes from one page to another (within the same section). My guess is that we'll have to use the ref approach for both rather than the getElementById. You can see in the recording that the focus reset works with the section change but not the step change. Lmk if you have any questions

Screen.Recording.2025-08-13.at.7.56.28.AM.mov

ColinBuyck · 2025-08-13T14:59:30Z

Oof just saw the wip label! Sorry for the premature comment 🦤 ping me when this is ready!

netlify · 2025-09-02T09:07:22Z

✅ Deploy Preview for bloom-flagly ready!

Name	Link
🔨 Latest commit	`8472193`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-flagly/deploys/695bde48d3d1e2000887aefb
😎 Deploy Preview	https://deploy-preview-5221--bloom-flagly.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-22T05:32:30Z

✅ Deploy Preview for partners-bloom-dev ready!

Name	Link
🔨 Latest commit	`92a8707`
🔍 Latest deploy log	https://app.netlify.com/projects/partners-bloom-dev/deploys/69442e913d798900087ea5d7
😎 Deploy Preview	https://deploy-preview-5221--partners-bloom-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-22T05:32:34Z

✅ Deploy Preview for bloom-exygy-dev ready!

Name	Link
🔨 Latest commit	`1f595ee`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-exygy-dev/deploys/6942d6e28549c400086060cb
😎 Deploy Preview	https://deploy-preview-5221--bloom-exygy-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-22T05:33:07Z

✅ Deploy Preview for bloom-public-seeds ready!

Name	Link
🔨 Latest commit	`1f595ee`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-public-seeds/deploys/6942d6e27f5495000876e610
😎 Deploy Preview	https://deploy-preview-5221--bloom-public-seeds.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-22T05:35:35Z

✅ Deploy Preview for bloom-lakeview ready!

Name	Link
🔨 Latest commit	`2dca682`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-lakeview/deploys/6942d78aa116ba000829b5eb
😎 Deploy Preview	https://deploy-preview-5221--bloom-lakeview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-12-17T16:19:04Z

✅ Deploy Preview for bloom-angelopolis canceled.

Name	Link
🔨 Latest commit	`92a8707`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-angelopolis/deploys/69442e91de5b13000844f218

netlify · 2026-01-05T15:54:34Z

✅ Deploy Preview for partners-bloom-dev ready!

Name	Link
🔨 Latest commit	`8472193`
🔍 Latest deploy log	https://app.netlify.com/projects/partners-bloom-dev/deploys/695bde4855abca0008a12807
😎 Deploy Preview	https://deploy-preview-5221--partners-bloom-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-05T15:55:24Z

✅ Deploy Preview for bloom-public-seeds ready!

Name	Link
🔨 Latest commit	`8472193`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-public-seeds/deploys/695bde4849c2260008708460
😎 Deploy Preview	https://deploy-preview-5221--bloom-public-seeds.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-05T15:55:26Z

✅ Deploy Preview for bloom-angelopolis ready!

Name	Link
🔨 Latest commit	`8472193`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-angelopolis/deploys/695bde488ffa9700082233d0
😎 Deploy Preview	https://deploy-preview-5221--bloom-angelopolis.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-05T15:56:36Z

✅ Deploy Preview for bloom-exygy-dev ready!

Name	Link
🔨 Latest commit	`8472193`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-exygy-dev/deploys/695bde4830a5590007e604eb
😎 Deploy Preview	https://deploy-preview-5221--bloom-exygy-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-05T15:59:29Z

✅ Deploy Preview for bloom-lakeview ready!

Name	Link
🔨 Latest commit	`8472193`
🔍 Latest deploy log	https://app.netlify.com/projects/bloom-lakeview/deploys/695bde48abcf1500089a039e
😎 Deploy Preview	https://deploy-preview-5221--bloom-lakeview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

emilyjablonski · 2026-01-06T18:55:50Z

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

              validateRentValues(getValues, clearErrors, setError)
            },
          }}
+          ariaLabel={t(`finder.rent.minRentReader`)}


issue: This label and the one below are unnecessary here and they should generally be reserved for when there is no visible label - we have a label element and assign it to the input with for, so we should be good to go

This makes sense, but i remember adding that in below issue, as a11y improvement
CityOfDetroit#1544
Just double check if i should remove it

oh this is my bad! i thought this string was identical to the t("finder.rent.minRent") label, if it's different can def stay!

emilyjablonski

Thank you so much for these updates! Just need to remove the aria label and then good to merge

fix: a11y improvements for finder

ff232a7

KrissDrawing added wip This PR is not ready for review, do not review it's a “Work In Progress” 1 review needed Requires 1 more review before ready to merge labels Aug 6, 2025

KrissDrawing mentioned this pull request Aug 6, 2025

fix: add heading id and tab index for HeadingGroup bloom-housing/ui-seeds#128

Merged

9 tasks

ColinBuyck suggested changes Aug 13, 2025

View reviewed changes

ColinBuyck removed the 1 review needed Requires 1 more review before ready to merge label Aug 13, 2025

KrissDrawing added 2 commits September 2, 2025 10:59

fix: use headingProps for HeadingGroup

d8a5b65

Merge branch 'main' into 4913/Rental-Finder-A11y

b08bbe8

Merge branch 'main' into 4913/Rental-Finder-A11y

beb9587

KrissDrawing added 1 review needed Requires 1 more review before ready to merge and removed wip This PR is not ready for review, do not review it's a “Work In Progress” labels Oct 22, 2025

KrissDrawing force-pushed the 4913/Rental-Finder-A11y branch from bedd3d2 to 1f595ee Compare December 17, 2025 16:14

Merge branch 'main' into 4913/Rental-Finder-A11y

2dca682

KrissDrawing force-pushed the 4913/Rental-Finder-A11y branch from 1f595ee to 2dca682 Compare December 17, 2025 16:17

KrissDrawing added 3 commits December 17, 2025 17:38

fix: add translations

58fb04e

Merge branch 'main' into 4913/Rental-Finder-A11y

92a8707

Merge branch 'main' into 4913/Rental-Finder-A11y

8472193

emilyjablonski reviewed Jan 6, 2026

View reviewed changes

emilyjablonski approved these changes Jan 6, 2026

View reviewed changes

emilyjablonski removed the 1 review needed Requires 1 more review before ready to merge label Jan 6, 2026

fix: a11y improvements for finder #5221

Are you sure you want to change the base?

fix: a11y improvements for finder #5221

Uh oh!

Conversation

KrissDrawing commented Aug 6, 2025

Description

How Can This Be Tested/Reviewed?

Author Checklist:

Review Process:

Uh oh!

ColinBuyck left a comment

Choose a reason for hiding this comment

Uh oh!

ColinBuyck commented Aug 13, 2025

Uh oh!

netlify bot commented Sep 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bloom-flagly ready!

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for partners-bloom-dev ready!

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bloom-exygy-dev ready!

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bloom-public-seeds ready!

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bloom-lakeview ready!

Uh oh!

netlify bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bloom-angelopolis canceled.

Uh oh!

netlify bot commented Jan 5, 2026

✅ Deploy Preview for partners-bloom-dev ready!

Uh oh!

netlify bot commented Jan 5, 2026

✅ Deploy Preview for bloom-public-seeds ready!

Uh oh!

netlify bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bloom-angelopolis ready!

Uh oh!

netlify bot commented Jan 5, 2026

✅ Deploy Preview for bloom-exygy-dev ready!

Uh oh!

netlify bot commented Jan 5, 2026

✅ Deploy Preview for bloom-lakeview ready!

Uh oh!

emilyjablonski Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

KrissDrawing Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emilyjablonski Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

emilyjablonski left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Sep 2, 2025 •

edited

Loading

netlify bot commented Oct 22, 2025 •

edited

Loading

netlify bot commented Oct 22, 2025 •

edited

Loading

netlify bot commented Oct 22, 2025 •

edited

Loading

netlify bot commented Oct 22, 2025 •

edited

Loading

netlify bot commented Dec 17, 2025 •

edited

Loading

netlify bot commented Jan 5, 2026 •

edited

Loading

KrissDrawing Jan 8, 2026 •

edited

Loading