Add support for label and help text to color picker

[haikyuu]

Describe the bug

Docs state label will be displayed if in a slot. But it's not

Demo

https://codepen.io/haikyuu/pen/zYyKBzR?editors=1000

[KonnorRogers]

Hmmm...it seems to work for me.

I think the problem is that your codepen has malformed html. (no closing sl-color-picker)

<sl-color-picker value="#4a90e2">
  <label slot="label"> Color </label>  
- </span>
+ </sl-color-picker>

Let me know if that works!

[claviska]

From the docs:

The color picker’s label. This will not be displayed, but it will be announced by assistive devices. If you need to display HTML, you can use the label slot` instead.

This was a poor decision I made early on to not show the label. I would almost classify it as a bug. Color pickers should be able to be displayed both with and without a visual label.

We can leave this open as a TODO for this feature.

[KonnorRogers]

@claviska I'm thinking label hidden by default for a patch release, and label shown by default in a 3.0 release? Sound reasonable?

[claviska]

Makes sense. Let's open an issue for this using the 3.0 milestone so we don't forget to update the default :)

[semiaddict]

I think the problem is that your codepen has malformed html. (no closing sl-color-picker)

<sl-color-picker value="#4a90e2">
  <label slot="label"> Color </label>  
- </span>
+ </sl-color-picker>

I am facing the same issue, and properly closing all html tags doesn't fix it.
The label is correctly added to the slot, but inside an sl-visually-hidden element.
Here's the dom as seen in FireFox's inspector panel:

[claviska]

@semiaddict This is the correct behavior. The label doesn't currently show as a visible label like form controls. This issue is now a TODO to fix that in 3.0.

[semiaddict]

@semiaddict This is the correct behavior. The label doesn't currently show as a visible label like form controls. This issue is now a TODO to fix that in 3.0.

Thank you @claviska.

Then maybe the docs deserve a slight modification as it seems to indicate that using a slot instead of the attribute will show the label:

The color picker’s label. This will not be displayed, but it will be announced by assistive devices. If you need to display HTML, you can use the label slot` instead.