Switch doesn't allow setting aria-describedby

[clintcs]

Switch doesn't allow setting aria-describedby

I have a switch that calls for a description below that is meant to add context. I'm able to add the description to Switch by wrapping it. But I'm unable to associate the description in the accessibility tree with Switch's underlying <input>. If Switch accepted ariaDescribedby as a property, I could associate the two.

I'm open to a workaround as well! The wrinkle, in my case, is that I'm wrapping Switch instead of extending it for reasons that are a little complicated. Otherwise, I could select the <input> and set aria-describedby programatically. Any other ideas?

[claviska]

Neither checkbox nor switch support help text. I'd be open to a PR to add these using the same convention as <sl-input> and <sl-textarea>.

In the meantime, the best I can recommend is adding it directly into the label.

<sl-switch>
  Switch
  <span class="help-text">This is some more info</span>
</sl-switch>

<style>
  .help-text {
    display: block;
    margin-top: .125em;
    font-size: smaller;
    color: var(--sl-color-neutral-500);
  }
</style>

[clintcs]

Happy to open a PR!

Though Switch is a slightly tricker case than Input because Switch is wrapped in a <label>. If we add a helpText slot, it would go inside the <label> and so would be read to screenreader users as label.

How would you feel if I separated Switch's <input> from its <label> to match Input? I'd open a PR that. Then I'd follow up with a PR adding help text support to Switch.

[claviska]

I would entertain a PR as long as it remains backwards compatible. We'll need to make the same changes to Checkbox. In addition, we probably need to get help text into Radio Group at some point as well.

[clintcs]

I have this PR'd. I managed to avoid a breaking change but with a wrinkle.