feat: mark fields as required

[anialesniak]

Description

Required fields are marked:

• with required property on the element (done before this PR)
• visual representation of the *

The asterisk is explained on the top of the form, as suggested by the design and accessibility team. In the beginning we were considering having the explanation on the first of the required fields but that approach turned out to be too complicated and/or confusing considering the conditional fields, change of order, etc.

I tested this using a Voice Over and the required attribute on the input informs that the field is required. Screen readers won’t read the * symbol.

We will need a translation for the explanation string.

Questions

I am not sure if this will behave correctly for RTL languages. I tried to test it on the existing form but I think there is more things missing, for example the labels are not moved to right, etc. But still, I am open to suggestions here!

Screenshots

Checklist

• 📗 all commit messages follow the conventional commits standard
• ⬅️ changes are compatible with RTL direction
• ♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
• 📝 changes are tested in Chrome, Firefox, Safari and Edge
• 📱 changes are responsive and tested in mobile
• 👍 PR is approved by @zendesk/vikings