Toggle component does not support right-to-left (RTL) directionality

[rstencel]

Detailed description

Describe in detail the issue you're having.

When setting document directionality to right-to-left to support e.g. Arabic language then Toggle is displayed incorrectly.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Toggle

What did you expect to happen? What happened instead? What would you like to see changed?

When document's directionality is set to right-to-left then layout of a toggled Toggle is broken.

For left-to-right directionality:

For right-to-left directionality:

What browser are you working in?

Chrome 117.0.5938.149

What version of the WFP UI (Carbon Design System) are you using?

1.22.4

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Partner Connect

Steps to reproduce the issue

1. Open https://uikit.wfp.org/docs/index.html?path=/docs/components-ui-elements-toggle--regular
2. Toggle any demo Toggle
3. Open dev tools -> terminal
4. Type document.dir = 'rtl' and click Enter