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]

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 https://github.com/uswds/uswds-sandbox/issues/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?