docs(toggle): move migration guide to general v11 documentation
MODIFY
docs/migration/v11.md
docs/migration/v11.md
@@ -946,7 +946,7 @@ below.
| `TimePicker` | Updated from a class to functional component |
| `TimePickerSelect` | Updated from a class to functional component |
| `ToastNotification` | View changes [here](#notifications) |
-| `Toggle` | Updated from a class to functional component |
+| `Toggle` | View changes [here](#toggle) |
| `ToggleSkeleton` | Removed |
| `ToggleSmall` | Removed |
| `ToggleSmallSkeleton` | Removed |
@@ -1056,6 +1056,26 @@ ToastNotification` updates:
- The `closeOnEscape` prop toggles the closing of notifications via the `escape`
key.
+### Toggle
+
+The toggle component has been updated to improve its accessibility, rtl
+compatibility and flexibility to layout.
+
+- The underlying element has been changed from a checkbox
+ (`<input type="checkbox">`) to a switch button (`<button role="switch">`).
+ - `props.onChange` has been removed since it's not available on `<button>`
+ elements.
+ - `props.onClick` has been added to substitute the previous `onChange` event.
+- `props['aria-label']` is no longer required.
+ - `props.labelText` will always be available to screen readers without the use
+ of `aria-label`.
+ - If `props['aria-label']` is still passed, it will be emitted on the
+ `<button>` element.
+- `props.hideLabel` has been added. This hides `labelA` and `labelB` while
+ moving `labelText` to the side for height-restricted layouts.
+- `props.labelA` and `props.labelB` have been made optional and default to "Off"
+ and "On" respectively.
+
### Tabs
### Tooltips

DELETE
packages/react/src/components/Toggle/migrate-to-11.x.md
-# Toggle
-
-## Markup
-
-| Change | Rationale |
-| :--------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| The underlying element was changed from a checkbox (`<input type="checkbox">`) to a switch button (`<button role="switch">`) | <ul> <li>The switch button better resembles the toggle component from an accessibility standpoint: _"A type of checkbox that represents on/off values, as opposed to checked/unchecked values" (https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#switch)_</li> <li>A toggle cannot present a mixed state which a checkbox can</li> <li>A switch button natively supports being toggled on <kbd>Enter</kbd></li> </ul> |
-| `props['aria-label']` is no longer required | The new markup ensures `props.labelText` will always be available to screen readers without the use of `aria-label` |
-
-### New markup
-
-```html
-<div class="bx--toggle">
- <button
- id="toggle-id"
- class="bx--toggle__button"
- role="switch"
- type="button"
- aria-checked="true"
- ></button>
- <label class="bx--toggle__label" for="toggle-id">
- <span class="bx--toggle__label-text bx--visually-hidden">Toggle label</span>
- <div class="bx--toggle__appearance">
- <span class="bx--toggle__text" aria-hidden="true">On</span>
- </div>
- </label>
-</div>
-```
-
-### Old markup
-
-```html
-<div class="bx--form-item">
- <input type="checkbox" id="toggle-id" class="bx--toggle-input" checked />
- <label class="bx--toggle-input__label" for="toggle-id">
- Toggle label
- <span class="bx--toggle__switch">
- <span class="bx--toggle__text--off" aria-hidden="true">Off</span>
- <span class="bx--toggle__text--on" aria-hidden="true">On</span>
- </span>
- </label>
-</div>
-```
-
-## Props
-
-| v7 | v11 | Note |
-| :----------- | :---------- | :------------------------------------------------------------------------------------------- |
-| `aria-label` | - | Removed. No longer required. If still passed, it will be emitted on the `<button>` element. |
-| - | `hideLabel` | New. Visually hides the label above the toggle while keeping it available to screen readers. |
-| `onChange` | - | Removed. Not available on `<button>` elements. |
-| - | `onClick` | New. To substitute previous `props.onChange`. |
-| `labelA` | `labelA` | Made optional. Default: "Off". |
-| `labelB` | `labelB` | Made optional. Default: "On". |

docs(toggle): move migration guide to general v11 documentation (#10827)

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Alessandra Davila <aledavila@ibm.com>