Add helper text API and slot

[niiyeboah]

• Added helper-text part below text field
• Added observer to add has-helper attribute when helperText property is set
• Added slotchange event handler to add has-helper attribute when content placed in helper slot
• Added helper text to aria-describedby
• Added observer for error message to add has-error-message attribute (used to hide helper in material theme when error message is set)

[yuriy-fix]

Good job! 👍

Some nits:
Should we consider updating the indents when label is used together with helper text?

Due to the order usage in styles, error-message is also changing the position with theme helper-above-field. Is it intended?

Should the helper text be mentioned on the screen readers (not mentioned currently on Voice over).

[yuriy-fix]

I guess we can avoid timeouts by using similar approach as in text-field with dispatching slot-change:

vaadin-text-field/test/custom-input.html

Line 79 in 2c9c8aa

function dispatchSlotChange() {

[niiyeboah]

Done, except it didn't work with this test:

vaadin-text-field/test/text-field.html

Lines 379 to 388 in 7cae1f2

	it('removing slotted helper removes has-helper attribute', function(done) {
	const textFieldSlottedHelper = fixture('default-with-slotted-helper');
	const helper = textFieldSlottedHelper.querySelector('[slot="helper"]');
	textFieldSlottedHelper.removeChild(helper);
	// dispatchHelperSlotChange does not work with this test
	setTimeout(() => {
	expect(textFieldSlottedHelper.hasAttribute('has-helper')).to.be.false;
	done();
	}, 1);
	});

[tomivirkki]

Hmm...for me the same approach works in that test also

[niiyeboah]

Thanks Yuriy :)

I fixed the error message position and also the label padding when the helper text is above (I agree it looks better):

When I test the voice over, the helper text is read after the label, and then if there is an error message it will be read after that. There is however some weird behaviour which happens on my system. When the helper is a slot it seems to cause the page to reload sometimes if you have voice over enabled and focus on the element.