refactor(material-experimental/mdc-form-field): align label setup with non-MDC version

[crisbeto]

Aligns the floating label setup of the MDC-based form field with the non-MDC version for better accessibility and to allow for easier customization. Includes:

• Moving the required asterisk into its own element.
• Reducing the specificity of the label typography.

[devversion]

Is there any specific reason to switch away from how MDC renders the asterisk? If so, would it make sense landing such a change upstream as well/instead?

[crisbeto]

I submitted the PR, because we had an internal report that the targeting the asterisk is difficult, because of some lint rules that don't allow users to target MDC classes. It's also a potential accessibility issue, because there's no way to set aria-hidden on a pseudo element.

[devversion]

Yeah that makes sense. I read that some screen readers will read the rendered pseudo-element content. Although what I'm trying to check is whether it would make sense to land such change upstream first before we just diverge even more (the form-field obviously diverges a lot anyway from the basic MDC textfield)

[devversion]

LGTM overall, if we want to go with that before MDC adjusts its docs/whatever else is involved.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}