Find some way to label the component

[dlockhart]

Both aria-labelledby and aria-describedby won't work with web components and shadow DOM, because the IDs of those elements are out of scope.

2 potential solutions:

1. Wrap the custom element in a label:

<d2l-label text="label for input">
    <d2l-text-input></d2l-text-input>
</d2l-label>

Not sure that'll work, but if inside <d2l-label> it renders an actual <label> element, it might.

2. Make the label part of this component

Like this: <d2l-text-input label="label for input">. We'd then need to handle various different kinds of labels eventually -- above, beside, etc. Probably needs more thought around how this can be shared across many different kinds of inputs.

@dbatiste @pbrown-d2l

[dbatiste]

Option #1 may work due to the browser doing some magic for labels. I'm not sure if this sort of approach would buy us anything for description though. Option #2 could work also for description by taking a description attribute and rendering an offscreen element inside the shadow-DOM, and doing the wire-up for aria-describedby.