Detroit - Front End Scaffold Listings Finder

[kathyccheng]

As an engineer,
I might want to see how all of the components come together
So that I can start building out the questions from here

Acceptance Criteria

• When I click on Find Listings for you on the Homepage, then I will see a screen that incorporates the Progress Bar, Form Card, Options, Skip and Next

Notes

• Just front end scaffolding where possible
• Mobile support
• Detroit specific styling

Designs
https://www.figma.com/file/pIlN9vqLwUgOZYq6I5oM9l/bloom-public-eligibility-wizard?node-id=726%3A5778

Product Brief
https://docs.google.com/document/d/1KIECKEDJljxPq3l0PYRe-XerWdEDjqkf1KEm8e9-KeE/edit#heading=h.z2we68wtdnff

[slowbot]

@ColinBuyck

• Next button retains focus as user moves between pages.
• Focus should reset as user moves from page to page. Ideally this would bring the user to the start of the form content area

[slowbot]

A couple of things I found so far

• The “Find Listings for You” element should be an h1
• The step header should be a header of some level based on its placement in the reader order rather than just a div - in this case an h2
• In the cases where the step header is used in conjunction with the progress nav I think you can lose the progress nav screen reader only header
• The question inside the card should also have a heading level in this case I think we can use an h1 again if you switch the from card from an article to a section otherwise you can use an h3.
• Can we update the containers for each set of form elements to use a fieldset with legend rather than a div?

[eajensenwa]

@ColinBuyck

Mobile updates

Card

Card left/right margins - 1rem/16px
Card header - 1.25rem/20px
Skip link - left align
Header

Progress bar - does not need to display on mobile
Page header vertical margins - 1.5rem/24px (let me know if this change is outside scope of these issues)

[eajensenwa]

@ColinBuyck LGTM You can go ahead and close out, thx!