search

BrightspaceUI / text-input

Polymer-based web component for D2L text inputs
http://ui.developers.brightspace.com
Apache License 2.0
0 stars 5 forks source link

Find some way to label the component #9

Open dlockhart opened 7 years ago

dlockhart commented 7 years ago

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.

  1. 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 commented 7 years ago

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.