[Outreachy Task Submission] Form Inputs Are Disconnected From Their Labels

[Aquilaafuadajo]

Description
Currently, most of all the form inputs fields on the Ushahidi platform are disconnected from their labels and this makes it difficult for screen readers to understand the purpose of the input field, so when the input is focused the screen reader just announces the html element and in some cases it relies on the input placeholder.
Given the Ushahidi's platform data-driven nature and heavy reliance on forms, it is of high priority to ensure that forms are fully accessible in order to create a more inclusive environment, facilitating seamless interaction for all users, regardless of their accessibility needs.

How to reproduce?

1. Go to any form on the Ushahidi platform e.g http://localhost:4200/settings/surveys/create
2. Inspect any input label element
3. Notice the mat-label is disconnected from the input?
4. Inspect the input element
5. Notice no semantic label is linked to the input?

See image below 👇🏽

Why does this happen?
After digging very deep into this, I realized that the mat-labels are currently placed outside of the mat-form-field to prevent the default material form input animation that happens when the mat-label is placed inside the mat-form-field. This works fine aesthetically but the caveat is that it disconnects the labels from their input fields making it difficult for screen readers to understand.

How to fix this
There are two ways to fix this:

1. Move the mat-label back inside the mat-form-field element and use the method described here in the angular material docs along some extra styling to keep the label fixed at the top of the input.
2. Use semantic html label to replace mat-label

I have chosen to go with option 2 to fix this issue because of the following reasons

1. less refactor on the post-edit component for rendering dynamic forms
2. No need for css overwrite on the default mat-label component.. in other words less use of !important :)