fix(core/toggle): link label and input field to be clickable

.changeset/config.json

@@ -21,6 +21,7 @@
     "html-test-app",
     "ionic-test-app",
     "figma-plugin",
-    "documentation"
+    "documentation",
+    "storybook-docs"
   ]
 }

.changeset/thin-frogs-relax.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+**ix-toggle** make toggle clickable if disable property is present (Fixes #1585)

packages/core/src/components/toggle/toggle.tsx

@@ -23,6 +23,8 @@ import {
 import { a11yBoolean } from '../utils/a11y';
 import { IxFormComponent } from '../utils/input';
 
+let localId = 0;
+
 /**
  * @form-ready 2.6.0
  * */
@@ -97,6 +99,8 @@ export class Toggle implements IxFormComponent<string> {
   /** @internal */
   @Event() valueChange!: EventEmitter<string>;
 
+  private readonly localId = `ix-toggle-${localId++}`;
+
   onCheckedChange(newChecked: boolean) {
     if (this.indeterminate) {
       this.indeterminate = false;
@@ -140,9 +144,9 @@ export class Toggle implements IxFormComponent<string> {
         class={{
           disabled: this.disabled,
         }}
-        onClick={() => this.onCheckedChange(!this.checked)}
       >
         <input
+          id={this.localId}
           disabled={this.disabled}
           indeterminate={this.indeterminate}
           checked={this.checked}
@@ -154,7 +158,7 @@ export class Toggle implements IxFormComponent<string> {
             this.onCheckedChange((event.target as HTMLInputElement).checked)
           }
         ></input>
-        <label class="switch" tabIndex={-1}>
+        <label class="switch" tabIndex={-1} htmlFor={this.localId}>
           <span class="slider"></span>
         </label>
         {!this.hideText ? (

packages/storybook-docs/package.json

@@ -18,6 +18,7 @@
     "@siemens/ix": "workspace:*",
     "@siemens/ix-icons": "^2.2.0",
     "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-actions": "^8.4.2",
     "@storybook/addon-designs": "^8.0.4",
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.4.2",

packages/storybook-docs/src/stories/toggle.stories.ts

@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Components } from '@siemens/ix/components';
+import { genericRender, makeArgTypes } from './utils/generic-render';
+import { action } from '@storybook/addon-actions';
+
+type Element = Components.IxToggle & {
+  defaultSlot: string;
+  ['checked-change']: any;
+};
+
+const meta = {
+  title: 'Example/Toggle',
+  tags: [],
+  render: (args) => {
+    const container = genericRender('ix-toggle', args);
+    const ixToggle = container.querySelector(
+      'ix-toggle'
+    ) as HTMLIxToggleElement;
+    ixToggle.addEventListener('checkedChange', action('checkedChange'));
+    return container;
+  },
+  argTypes: makeArgTypes<Partial<ArgTypes<Element>>>('ix-toggle'),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=225-5535&m=dev',
+    },
+  },
+} satisfies Meta<Element>;
+
+export default meta;
+type Story = StoryObj<Element>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    disabled: false,
+  },
+};