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.

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

Add first Activity Report fields #120

Merged
merged 9 commits into from
Oct 28, 2020
Merged

Add first Activity Report fields #120

merged 9 commits into from
Oct 28, 2020

Conversation

jasalisbury
Copy link
Contributor

@jasalisbury jasalisbury commented Oct 27, 2020

Description of change

  • Add first fields to activity report
  • Remove stepper and stepper related code

Kept the form split into separate files even though they all show on the same page to help with readability.

Limitations

  • Multiselect dropdowns currently only allow a single selection, I'm working on getting multiselect component added to the frontend.
  • Validations are not present for the most part. Those will be added once we know how messages should be shown.
  • Local saving of the form state. Any reload or page navigation will clear out the form when it is reloaded.

How to test

  1. Browse to https://tta-smarthub-sandbox.app.cloud.gov
  2. Login and go to the activity reports tab

Issue(s)

Checklist

  • Meets issue criteria
  • Code tested
  • Meets accessibility standards (WCAG 2.1 Levels A, AA)
  • Documentation updated

Copy link
Contributor

@rahearn rahearn left a comment

Choose a reason for hiding this comment

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

Good work. The questions about accessibility of the date picker and using the legend tag can be dealt with when working on #90

frontend/src/App.js Show resolved Hide resolved
cucumber/features/activityReport.feature Show resolved Hide resolved
<div className="usa-hint" id={hintId}>mm/dd/yyyy</div>
<Controller
render={({ onChange, value }) => (
<ReactDatePicker
Copy link
Contributor

Choose a reason for hiding this comment

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

I was having a little bit of trouble with keyboard navigation of this component. I was able to get dates input, but it definitely wasn't clean.

Are there any known issues with it or known ways to improve the keyboard behavior?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

After playing around with it a bit it seems like there are ways to make the keyboard navigation nicer. Specifically the <Controller /> wrapper seems to mess with the navigation. If I use the straight <ReactDatePicker /> component I'm able to select dates easier with the keyboard.

@rahearn rahearn merged commit c53bdeb into HHS:main Oct 28, 2020
rahearn pushed a commit that referenced this pull request Jan 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants