Improve form styling and usability

[jensren]

All software products want to be nice-looking and usable, but this is particularly important for our project since we are writing software for volunteer organizations. These organizations may be serving people with low computer literacy (e.g. seniors) or people with disabilities (e.g. blind people using a screen reader).

Current State

• Figma designs are not being updated and original designers are no longer with the project. Designs still apply overall, but there are some parts we wish to change
• Styling is done on an as-needed basis roughly following Figma designs. CSS is written in modules for each component. This makes styling a component fast and easy, but as the project evolves it becomes hard to manage, reuse, and standardize on our styles
• Many styles from the design have not been implemented, even though developers have added some styling. The form designed in Figma looks much nicer than the forms we have today
• All styles are vanilla CSS
• There has not been any accessibility testing or any particular accessibility considerations

Goals for this Epic

• This epic focuses on forms, but systems developed within this epic will be used for future work
• Figma updated to become the source of truth for product designs. Individual developers can give feedback on the designs, but individual developers do not have the freedom to do whatever they like (to keep designs consistent)
• Preferably, a UX person should review the Figma designs, provide feedback, and be available to answer questions from developers
• Styling is standardized and centralized
• More styles from the design are implemented, with a focus on enabling new features to be added
• Styling uses some UI package, such as Material UI or Bootstrap, so developers are not spending time writing simple UI's that already exist
• Existing components are tested for accessibility and usability
• Guidelines for developing accessible apps are available (this may be linked articles, some example code, some FAQs)
• New PRs need to be tested for accessibility and usability, and rejected until any major accessibility or usability issues are fixed