IDEA GATHERING: Form elements missing labels

[mariathecitizen]

What is the problem?
Scanned our test environment using axe-core (https://github.com/dequelabs/axe-core) and Playwright (https://github.com/microsoft/playwright)

The following pages related to Idea Gathering were scanned

test.app.citizenos.com/en/topics
test.app.citizenos.com/en/topics/ideation/create
test.app.citizenos.com/en/topics/ideation/edit/
test.app.citizenos.com/en/topics/[topic-id]#ideation
test.app.citizenos.com/en/topics/[topic-id]/ideas/[idea-id]

Form elements missing labels

1. #topicLink
2. textarea[autocorrect="off"]
3. input[step="1"]
4. input[max="59"]
5. form > .EasyMDEContainer[role="application"] > .CodeMirror.cm-s-easymde.CodeMirror-wrap > div:nth-child(1) > textarea[autocorrect="off"][autocapitalize="off"][spellcheck="true"]
6. .ng-tns-c2986382374-3[_ngcontent-ng-c2986382374=""]:nth-child(3) > .EasyMDEContainer[role="application"] > .CodeMirror.cm-s-easymde.CodeMirror-wrap > div:nth-child(1) > textarea[autocorrect="off"][autocapitalize="off"][spellcheck="true"]

Why is this a problem?

1. Screen readers cannot identify input purpose
2. Confusing for keyboard users

Possible solution.

As per axe-core (https://github.com/dequelabs/axe-core) suggestions, any of the following should be fixed

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"