[A11Y] "Description" form has no visible label

[softvision-oana-arbuzov]

Browser / Version: Firefox Nightly 81.0a1 (2020-08-18) Operating System: Windows 10 Pro

Steps to Reproduce:

1. Navigate to https://webcompat.com/issues/new
2. Fill in all required info until reaching "Description" section.
3. Observe "Description" text area.

Expected Behavior: Description form has visible label.

Actual Behavior: Description form has no visible label.

Notes:

1. Screenshot attached.
2. Read more about it here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names

Affected area:

<div class="form-text form-element js-Form-group problem-description progress-textarea bordered-container">
	<textarea class="form-field text-field js-autogrow-field" id="steps_reproduce" name="steps_reproduce" placeholder="Describe what happened" rows="3" data-min-rows="3"></textarea>
	<div class="progress is-hidden">
		<img class="tick" src="/img/svg/icons/svg-check-issue.svg" title="Valid message" alt="Valid message">
			<div class="bar"></div>
	</div>
</div>

Watchers: @softvision-oana-arbuzov @cipriansv

[miketaylr]

Yeah, good call. We should be using a <label> instead of a placeholder for "Describe what happened." I guess we could position it with CSS and hide it when the textarea has focus to replicate the current design.