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

[Aquilaafuadajo]

Should resolve #4904

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 and matches the design but the disadvantage is that it disconnects the labels from their inputs, leaving these fields without labels and even aria-labels attributes thereby 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 that's used for rendering dynamic forms
2. No need for css overwrite on the default mat-label component.. in other words less use of !important :)

The one caveat that comes with this approach is, semantic labels won't work on other material components like mat-select, mat-selection-list but for this I have chosen to rely on aria-label attribute which works perfectly and is also recommended in the angular material ui v14 doc

@Angamanga This is another promising and very important pr as it'll involve making changes to all the forms on the Ushahidi web codebase and I'll need your feedback/approval to continue with this. 🙏🏽