Remove the empty label for Screen reader when it's empty

[jcgueriaud1]

What is the problem?

For the vaadin-select, we have an empty label for screen reader with the slot sr-label.
I don’t think it’s a big issue since it’s not linked to the input and it’s empty.

But the label is unnecessary and some accessibility checkers are complaining about empty <label>

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[web-padawan]

The reason why <label> element is created even without property being set is that LabelController is used:

web-components/packages/field-base/src/label-controller.js

Lines 11 to 14 in 25bb261

	export class LabelController extends SlotChildObserveController {
	constructor(host) {
	super(host, 'label', 'label');
	}

See for example HelperController that is similar, but creates helper node lazily once helperText property is set:

web-components/packages/field-base/src/helper-controller.js

Lines 11 to 15 in 25bb261

	export class HelperController extends SlotChildObserveController {
	constructor(host) {
	// Do not provide tag name, as we create helper lazily.
	super(host, 'helper', null);
	}