search

freedomofpress / pressfreedomtracker.us

Code for the U.S. Press Freedom Tracker project website
https://pressfreedomtracker.us
GNU Affero General Public License v3.0
18 stars 7 forks source link

Contact form/Submit an incident form #1240

Open harrislapiroff opened 2 years ago

harrislapiroff commented 2 years ago

Figma

Update the FormPage model, templates, and styles to match the Figma design.

urlsangel commented 2 years ago

Hi @harrislapiroff

I've made a start on this page model and templates today - and I have a few questions/comments as always 😀

Firstly, the Figma designs are missing labels from the text field and date field types - I'm planning to just visually hide these but keep them available for screen readers for accessibility (I personally think they should be visible to all users).

Secondly, the form fields are grouped into sections with headers and descriptions, so I've implemented this with nested form field groups (nested inline fields are now supported in Wagtail 2.15 I believe!). Another way to implement this would have been with fake form field instances such as section header/description, but that feels very hacky to me. If you have a preference or a different preferred implementation, please let me know and I'll refactor in that case.

Thirdly, there are no error or success states for the form in Figma - maybe these are somewhere else?

I'll continue on with this tomorrow, please let me know if I'm missing anything 👍

SaptakS commented 2 years ago

Firstly, the Figma designs are missing labels from the text field and date field types - I'm planning to just visually hide these but keep them available for screen readers for accessibility (I personally think they should be visible to all users).

Definitely agree to this.

harrislapiroff commented 2 years ago

Let's match the design for now, but I leave it up to @SaptakS and @urlsangel the best way to implement this. (I could imagine the "placeholder" text actually being an overlaid label element, that disappears when the field has a value, but don't feel strongly about using this approach or not. Definitely in favor of labels for screenreaders.)