docs: SwitchDemo accessibility text

[brian-cirieco]

Documentation

The documentation on the Switch component shows a demo that does not comply with the accessibility guidelines detailed on the switch role requirements. I assumed that the htmlFor would associate the label's accessible text, but according to the guidelines:

The switch has an accessible label provided by one of the following:

• Visible text content contained within the element with role switch.
• A visible label referenced by the value of aria-labelledby set on the element with role switch.
• aria-label set on the element with role switch.

Following the demo's example, my team used SwitchDemo as an example for our Storybook. The story flagged an accessibility violation involving the Switch not having accessible text.

Relevant Radix Component(s)

SwitchDemo example on the docs. I'd suggest we add the aria-labelledby to the switch, and the corresponding ID to the label:

const SwitchDemo = () => (
  <form>
    <div className="flex items-center">
      <label id="airplane-mode-label" className="text-white text-[15px] leading-none pr-[15px]" htmlFor="airplane-mode">
        Airplane mode
      </label>
      <Switch.Root
        aria-labelledby="airplane-mode-label"
        className="w-[42px] h-[25px] bg-blackA6 rounded-full relative shadow-[0_2px_10px] shadow-blackA4 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-black outline-none cursor-default"
        id="airplane-mode"
        style={{ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)' }}
      >
        <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-blackA4 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
      </Switch.Root>
    </div>
  </form>
);