Investigate best practices for labeling field custom element

[nikkimk]

Description

We discovered accessibility issues with making rh-range a form-associated custom element, so we are reviewing other design systems' web components to determine which methods are accessible.

Field custom elements need to be able to do the following:

• have a simple text label
• have a visually hidden label
• have a label that includes HTML

In order to be accessible they must also:

• have a machine-readable label associated with them
• prevent screen readers from reading the label text twice

The accessibility will be tested at a minimum via:

• axe DevTools
• VoiceOver + Safari
• VoiceOver + Chrome
• VoiceOver + Firefox
• NVDA + Firefox
• JAWS + Chrome

[bennypowers]

we should totally steal from examine material design components' implementation of this. I'd really love to set up a call/and/or/techtalk with @asyncliz to dive deep into the technical issues with FACE and labels

[nikkimk]

@bennypowers That would be a good idea. In the meantime, I shared with you the testing @hellogreg and I have been doing on fields in other design systems.