USWDS-Sandbox: Zebra prototype

[amyleadem]

Summary

Created a prototype for "Zebra" batch user testing.

The prototype includes the components outlined on this Mural board.

Related issue

Closes #125

Preview link

• Form 1 (Status alert below banner, default memorable date component)
• Form 2 (Emergency alert below banner, memorable date with only text input)
• Form 3 (Emergency alert above banner, memorable date with only select dropdowns)

[amyleadem]

@jaclinec I've made the following updates to the prototype:

• Added icons to the header
• Grouped the “You must be at least 18…” text closer to the memorable date component
• Added a 2-character minimum length to the “day” input in the memorable date components
• Added more “year” select options on the 3rd memorable date component
• Constrained the times available in the time picker component to only offer 9am-7pm
• Added static hint text to the “activity” and “code of conduct” radio components
  • Note: I added some functionality that turns the “You must select ‘I agree’” text to a red color if the user selects the “I DO NOT agree” option. Let me know if that makes sense to you. If it does, we can investigate adding aria-live="assertive" to make that more obvious to screen reader users as well.

Please let me know if you need any more changes! Happy to jump on a call if that is easier.

[mahoneycm]

Code is looking great! A couple very minor changes I thought we might be able to implement but functionally it's looking solid 👍

[mahoneycm]

(OPTIONAL) Remove design system href

Should we swap design systemhref to hash symbol or javascript:void{0}; in case tester click?

The hash will reload the same page while the javascript:void(0) will simply prevent the click from doing anything. Both should maintain the users selections.

Suggested change

	href="http://designsystem.digital.gov">rules of conduct and environmental stewardship</a>.
	href="#">rules of conduct and environmental stewardship</a>.

[amyleadem]

I think there was confusion when the href was empty because it looked like it was broken. I put a dummy link in there to at least give the expected behavior. @jaclinec is there a better url to use here?

[mahoneycm]

Update 03/11/24

Updated the 2nd prototype to specify that the Month input should have a numerical pattern to match the other inputs. I also updated the memorable date hint to read:

Please enter 2 digits for the month and day and 4 digits for the year

[amyleadem]

Follow up work

Note

I have opened #130 to evaluate how we can make these partials re-usable for future prototyping. I've added the "Needs: Discussion" label so that we can talk through possible approaches.

[thisisdano]

Is this work meant to be merged?