[#2245] Registration notifications redesign

[jiromaykin]

Design: https://www.figma.com/file/iKGhWhstaLIlFSaND2q7cE/OIP---Designs-(new)?type=design&node-id=2217%3A9149&mode=design&t=ObhqwB8PWC3lvpzO-1

Note: instead of the Accent color, we decided to use the secondary color for all radio/checkbox inputs.

userstory : https://taiga.maykinmedia.nl/project/open-inwoner/us/2210
new issue number: https://taiga.maykinmedia.nl/project/open-inwoner/task/2245

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.05%. Comparing base (7c4066f) to head (6dc74fd).

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1065      +/-   ##
===========================================
- Coverage    95.06%   95.05%   -0.01%     
===========================================
  Files          940      940              
  Lines        33155    33155              
===========================================
- Hits         31518    31516       -2     
- Misses        1637     1639       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pi-sigma]

When I deselect one of the options, the text becomes underlined. It stays that way when I re-select the option and only disappears when clicking outside the card.

Is this intended?

Also, wouldn't it make sense to use the same design for changing notification prefs in the profile?

[jiromaykin]

...When I deselect one of the options, the text becomes underlined. It stays that way when I re-select the option and only disappears when clicking outside the card.

This is very intentional → currently this is the only Focus accessibility styling that we have for tabbing on Labels. Clicking on (or tabbing to) the input-label sets the focus - which is not supposed to disappear unless you click/focus on something else.
The sadness here is that the focus style just looks a lot more intrusive visually here, because we now have a large surrounding label that needs to be focusable completely.
Changing accessibility styles may happen in the next sprint.

➕ I did now implement this styling in the other page as well in the new commit.

[jiromaykin]

Attentie @alextreme : This one has been approved, but... here i assumed that checkboxes have to wrap both the Label and the info text - and we may not want that (?) because of the future checkbox designs.

[alextreme]

Attentie @alextreme : This one has been approved, but... here i assumed that checkboxes have to wrap both the Label and the info text - and we may not want that (?) because of the future checkbox designs.

If you want to revisit this feel free to do so, I've removed Paul's approval

[jiromaykin]

@Bartvaderkin @pi-sigma
I've removed the ...p {{ help_extra_cls }} class from the Checkbox template
since I think it's superfluous.
➕ not sure if we need {% if form.invite %}..... in the src/open_inwoner/templates/pages/profile/notifications.html template.

Needs re-checking just in case

[jiromaykin]

@pi-sigma This one is now fully ready for review.

[pi-sigma]

Why is the siteimprove commit part of this PR? Otherwise looking good.

[jiromaykin]

Why is the siteimprove commit part of this PR? Otherwise looking good.

Just a little explanation for future questions: The Siteimprove tracker has to track extremely specific elements in the site. Like, for example, the second checkbox inside a list of 3. So if the structure/class of the tracked element changes, I will also have to update the tracker code... It's going to be a 'challenge' to not forget to do this with future changes.