Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

USWDS-Sandbox: Zebra prototype #126

Open
wants to merge 46 commits into
base: main
Choose a base branch
from
Open

USWDS-Sandbox: Zebra prototype #126

wants to merge 46 commits into from

Conversation

amyleadem
Copy link
Contributor

@amyleadem amyleadem commented Feb 26, 2024 •
edited

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 amyleadem changed the title First draft of zebra prototype USWDS-Sandbox: Zebra prototype Feb 26, 2024
@amyleadem
Copy link
Contributor Author

@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
mahoneycm reviewed Mar 6, 2024
View reviewed changes
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/_includes/zebra/header.html Outdated Show resolved Hide resolved
src/_includes/zebra/memorable-date--text.html Outdated Show resolved Hide resolved
src/_includes/zebra/radio--activities.html Outdated Show resolved Hide resolved
src/_includes/zebra/radio--conduct.html
<fieldset class="usa-fieldset">
<legend class="usa-legend">
I certify that I read, understand, and agree to the Purplestone National Park's <a
href="http://designsystem.digital.gov">rules of conduct and environmental stewardship</a>.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(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>.

Copy link
Contributor Author

@amyleadem amyleadem Mar 18, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

src/_layouts/zebra.html Outdated Show resolved Hide resolved
@mahoneycm
Copy link
Contributor

mahoneycm commented Mar 11, 2024 •
edited

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 amyleadem marked this pull request as ready for review March 18, 2024 15:58
amyleadem and others added 4 commits March 18, 2024 09:44
@amyleadem @mahoneycm
Remove type="text" from memorable date input
0323bb3 
Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>
@amyleadem @mahoneycm
Replace height/width icon utilities with square
541e3e5 
Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>
@amyleadem @mahoneycm
Remove pointer events style rule
6c895b7 
Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>
@amyleadem @mahoneycm
Format code
dace753 
Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>
@amyleadem amyleadem mentioned this pull request Mar 18, 2024
Open
@amyleadem
Copy link
Contributor Author

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.

@amyleadem amyleadem requested a review from jaclinec March 18, 2024 18:01
@thisisdano
Copy link
Member

Is this work meant to be merged?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mahoneycm mahoneycm Awaiting requested review from mahoneycm

@jaclinec jaclinec Awaiting requested review from jaclinec

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

USWDS-Sandbox - Operationalize Usability Research: Build prototype for Zebra batch testing
3 participants
@amyleadem @mahoneycm @thisisdano