feat: introduce button form support

src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js

@@ -17,7 +17,6 @@ snapshots["sbb-timetable-row renders defaultTrip Shadow DOM"] =
   <sbb-card-button
     data-action=""
     data-button=""
-    role="button"
     slot="action"
     tabindex="0"
   >
@@ -97,7 +96,6 @@ snapshots["sbb-timetable-row renders platform Shadow DOM"] =
   <sbb-card-button
     data-action=""
     data-button=""
-    role="button"
     slot="action"
     tabindex="0"
   >
@@ -196,7 +194,6 @@ snapshots["sbb-timetable-row renders bus strip Shadow DOM"] =
   <sbb-card-button
     data-action=""
     data-button=""
-    role="button"
     slot="action"
     tabindex="0"
   >

src/elements/accordion/__snapshots__/accordion.snapshot.spec.snap.js

@@ -16,7 +16,6 @@ snapshots["sbb-accordion renders DOM"] =
       data-size="l"
       data-slot-names="unnamed"
       id="sbb-expansion-panel-header-1"
-      role="button"
       slot="header"
       tabindex="0"
     >
@@ -46,7 +45,6 @@ snapshots["sbb-accordion renders DOM"] =
       data-size="l"
       data-slot-names="unnamed"
       id="sbb-expansion-panel-header-2"
-      role="button"
       slot="header"
       tabindex="0"
     >

src/elements/action-group/__snapshots__/action-group.snapshot.spec.snap.js

@@ -14,7 +14,6 @@ snapshots["sbb-action-group renders renders DOM"] =
     data-button=""
     data-sbb-button=""
     data-slot-names="unnamed"
-    role="button"
     size="l"
     tabindex="0"
   >

src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js

@@ -63,7 +63,6 @@ snapshots["sbb-alert should render default properties Shadow DOM"] =
           data-sbb-button=""
           icon-name="cross-small"
           negative=""
-          role="button"
           size="m"
           tabindex="0"
         >
@@ -158,7 +157,6 @@ snapshots["sbb-alert should render customized properties Shadow DOM"] =
           data-sbb-button=""
           icon-name="cross-small"
           negative=""
-          role="button"
           size="m"
           tabindex="0"
         >

src/elements/button/button-link/readme.md

@@ -76,7 +76,7 @@ Use the accessibility properties in case of an icon-only button to describe the
 | --------------------- | ---------------------- | ------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | `accessibilityLabel`  | `accessibility-label`  | public  | `string`                   | `''`    | This will be forwarded as aria-label to the inner anchor element.                                                                |
 | `disabled`            | `disabled`             | public  | `boolean`                  | `false` | Whether the component is disabled.                                                                                               |
-| `disabledInteractive` | `disabled-interactive` | public  | `boolean`                  | `false` | Whether disabled buttons should be interactive.                                                                                  |
+| `disabledInteractive` | `disabled-interactive` | public  | `boolean`                  | `false` | Whether the button should be aria-disabled but stay interactive.                                                                 |
 | `download`            | `download`             | public  | `boolean`                  | `false` | Whether the browser will show the download dialog on click.                                                                      |
 | `href`                | `href`                 | public  | `string`                   | `''`    | The href value you want to link to.                                                                                              |
 | `iconName`            | `icon-name`            | public  | `string`                   | `''`    | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |

src/elements/button/button/__snapshots__/button.snapshot.spec.snap.js

@@ -3,7 +3,6 @@ export const snapshots = {};
 
 snapshots["sbb-button renders a sbb-button without icon DOM"] = 
 `<sbb-button
-  aria-disabled="true"
   data-action=""
   data-button=""
   data-sbb-button=""
@@ -12,7 +11,6 @@ snapshots["sbb-button renders a sbb-button without icon DOM"] =
   form="formid"
   name="name"
   negative=""
-  role="button"
   size="m"
   type="button"
   value="value"
@@ -40,7 +38,6 @@ snapshots["sbb-button renders a sbb-button with slotted icon DOM"] =
   data-button=""
   data-sbb-button=""
   data-slot-names="icon unnamed"
-  role="button"
   size="l"
   tabindex="0"
 >

src/elements/button/button/button.stories.ts

@@ -24,7 +24,6 @@ import {
 } from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator.js';
 import './button.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonDefaultArgTypes };

src/elements/button/button/button.visual.spec.ts

@@ -69,6 +69,27 @@ describe(`sbb-button`, () => {
       );
     });
 
+    describe(`disabledInteractive`, () => {
+      for (const negative of [false, true]) {
+        describe(`negative=${negative}`, () => {
+          for (const state of visualDiffStandardStates) {
+            it(
+              `${state.name}`,
+              state.with(async (setup) => {
+                await setup.withFixture(
+                  html`<sbb-button disabled-interactive ?negative=${negative}>Button</sbb-button>`,
+                  {
+                    backgroundColor: negative ? 'var(--sbb-color-iron)' : undefined,
+                    focusOutlineDark: negative,
+                  },
+                );
+              }),
+            );
+          }
+        });
+      }
+    });
+
     describe('forcedColors=true', () => {
       describeEach(forcedColorCases, ({ disabled, negative }) => {
         beforeEach(async function () {

src/elements/button/button/readme.md

@@ -79,17 +79,17 @@ guard against such cases in your component.
 
 ## Properties
 
-| Name                  | Attribute              | Privacy | Type            | Default    | Description                                                                                                                      |
-| --------------------- | ---------------------- | ------- | --------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `disabled`            | `disabled`             | public  | `boolean`       | `false`    | Whether the component is disabled.                                                                                               |
-| `disabledInteractive` | `disabled-interactive` | public  | `boolean`       | `false`    | Whether disabled buttons should be interactive.                                                                                  |
-| `form`                | `form`                 | public  | `string`        | `''`       | The <form> element to associate the button with.                                                                                 |
-| `iconName`            | `icon-name`            | public  | `string`        | `''`       | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `name`                | `name`                 | public  | `string`        |            | The name of the button element.                                                                                                  |
-| `negative`            | `negative`             | public  | `boolean`       | `false`    | Negative coloring variant flag.                                                                                                  |
-| `size`                | `size`                 | public  | `SbbButtonSize` | `'l'`      | Size variant, either l or m.                                                                                                     |
-| `type`                | `type`                 | public  | `SbbButtonType` | `'button'` | The type attribute to use for the button.                                                                                        |
-| `value`               | `value`                | public  | `string`        |            | The value of the button element.                                                                                                 |
+| Name                  | Attribute              | Privacy | Type                      | Default    | Description                                                                                                                      |
+| --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`            | `disabled`             | public  | `boolean`                 | `false`    | Whether the component is disabled.                                                                                               |
+| `disabledInteractive` | `disabled-interactive` | public  | `boolean`                 | `false`    | Whether the button should be aria-disabled but stay interactive.                                                                 |
+| `form`                | `form`                 | public  | `HTMLFormElement \| null` |            | Returns the form owner of the internals of the target element.                                                                   |
+| `iconName`            | `icon-name`            | public  | `string`                  | `''`       | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `name`                | `name`                 | public  | `string`                  |            | Name of the form element. Will be read from name attribute.                                                                      |
+| `negative`            | `negative`             | public  | `boolean`                 | `false`    | Negative coloring variant flag.                                                                                                  |
+| `size`                | `size`                 | public  | `SbbButtonSize`           | `'l'`      | Size variant, either l or m.                                                                                                     |
+| `type`                | `type`                 | public  | `SbbButtonType`           | `'button'` | The type attribute to use for the button.                                                                                        |
+| `value`               | `value`                | public  | `string \| null`          | `null`     | Value of the form element.                                                                                                       |
 
 ## Slots
 

src/elements/button/common/button-common-stories.ts

@@ -1,23 +1,49 @@
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, StoryObj } from '@storybook/web-components';
-import type { TemplateResult } from 'lit';
+import { nothing, type TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+
 import { commonDefaultArgs, commonDefaultArgTypes } from './common-stories.js';
 
+import '../../action-group.js';
+import '../../form-field.js';
+
 /* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
-const RequestSubmitTemplate = ({ tag, text }: Args): TemplateResult => html`
-  <form id="my-fake-form" action="/submit" method="post" target="_blank">
-    <label
-      for="input"
-      style="display: flex; flex-direction: column; align-items: flex-start; padding-block-end: 2rem;"
-    >
-      Input required; submit with empty value is impossible due to 'requestSubmit' API validation.
-      <input required id="input" />
-    </label>
-    <${unsafeStatic(tag)} type="submit" form="my-fake-form" name="input" value="input"> ${text} </${unsafeStatic(tag)}>
-  </form>
-`;
+const FormTemplate = ({
+  tag,
+  name,
+  value,
+  type: _type,
+  reset: _reset,
+  ...args
+}: Args): TemplateResult => html`
+<form style="display: flex; gap: 1rem; flex-direction: column;"
+      @submit=${(e: SubmitEvent) => {
+        e.preventDefault();
+        const form = (e.target as HTMLFormElement)!;
+        form.querySelector('#form-data')!.innerHTML = JSON.stringify(
+          Object.fromEntries(new FormData(form, e.submitter)),
+        );
+      }}>
+  <p>Input required; submit with empty value is impossible due to 'requestSubmit' API validation.</p>
+  <sbb-form-field>
+    <input name="test" value="" required>
+  </sbb-form-field>
+  <fieldset>
+    <sbb-action-group>
+    <${unsafeStatic(tag)} ${sbbSpread(args)} type="reset">
+      Reset
+    </${unsafeStatic(tag)}>
+    <${unsafeStatic(tag)} ${sbbSpread(args)} value=${value ?? nothing} name=${name ?? nothing} type="submit">
+      Submit
+    </${unsafeStatic(tag)}>
+    </sbb-action-group>
+  </fieldset>
+  <div id="form-data"></div>
+</form>`;
+
 /* eslint-enable lit/binding-positions, @typescript-eslint/naming-convention */
 
 const type: InputType = {
@@ -104,6 +130,6 @@ export const buttonDefaultArgs: Args = {
 };
 
 export const requestSubmit: StoryObj = {
-  render: RequestSubmitTemplate,
-  args: { text: 'Submit form' },
+  render: FormTemplate,
+  args: { text: undefined, type: undefined, value: 'submit button' },
 };

src/elements/button/common/button-common.scss

@@ -109,7 +109,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   --sbb-button-padding-inline: 0;
 }
 
-:host(:not([disabled], :active, [data-active]):hover) {
+:host(:not([disabled], :disabled, [disabled-interactive], :active, [data-active]):hover) {
   @include sbb.hover-mq($hover: true) {
     --sbb-button-translate-y-content-hover: #{sbb.px-to-rem-build(-1)};
     --sbb-button-shadow-1-offset-y: calc(
@@ -166,22 +166,22 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
     transition-property: inset, background-color, border-color, box-shadow;
     box-shadow: var(--sbb-button-box-shadow);
 
-    :host([disabled]) & {
+    :host(:is([disabled], :disabled, [disabled-interactive])) & {
       background-color: var(--sbb-button-color-disabled-background);
       border-width: var(--sbb-button-border-disabled-width);
       border-color: var(--sbb-button-color-disabled-border);
       border-style: var(--sbb-button-border-disabled-style);
     }
 
-    :host(:not([disabled], :active, [data-active]):hover) & {
+    :host(:not([disabled], :disabled, [disabled-interactive], :active, [data-active]):hover) & {
       @include sbb.hover-mq($hover: true) {
         inset: calc(var(--sbb-button-border-width) * -1);
         background-color: var(--sbb-button-color-hover-background);
         border-color: var(--sbb-button-color-hover-border);
       }
     }
 
-    :host(:not([disabled]):is(:active, [data-active])) & {
+    :host(:not([disabled], :disabled, [disabled-interactive]):is(:active, [data-active])) & {
       color: var(--sbb-button-color-active-text);
       background-color: var(--sbb-button-color-active-background);
       border-color: var(--sbb-button-color-active-border);
@@ -193,13 +193,13 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
     justify-content: center;
   }
 
-  :host([disabled]) & {
+  :host(:is([disabled], :disabled, [disabled-interactive])) & {
     color: var(--sbb-button-color-disabled-text);
     cursor: default;
     pointer-events: none;
   }
 
-  :host(:not([disabled], :active, [data-active]):hover) & {
+  :host(:not([disabled], :disabled, [disabled-interactive], :active, [data-active]):hover) & {
     @include sbb.hover-mq($hover: true) {
       color: var(--sbb-button-color-hover-text);
     }

src/elements/button/common/primary-button.scss

@@ -24,6 +24,6 @@
   --sbb-button-shadow-2-color: var(--sbb-color-metal-alpha-20);
 }
 
-:host(:not([disabled], :active, [data-active])) {
+:host(:not([disabled], :disabled, [disabled-interactive], :active, [data-active])) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }

src/elements/button/common/secondary-button.scss

@@ -24,6 +24,6 @@
   --sbb-button-color-hover-text: var(--sbb-color-milk);
 }
 
-:host(:not([disabled], [negative], :active, [data-active])) {
+:host(:not([disabled], :disabled, [disabled-interactive], [negative], :active, [data-active])) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }

src/elements/button/common/tertiary-button.scss

@@ -12,6 +12,6 @@
   --sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20);
 }
 
-:host(:not([disabled], :active, [data-active])) {
+:host(:not([disabled], :disabled, [disabled-interactive], :active, [data-active])) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }

src/elements/button/mini-button-group/__snapshots__/mini-button-group.snapshot.spec.snap.js

@@ -10,7 +10,6 @@ snapshots["sbb-mini-button-group renders DOM"] =
     data-action=""
     data-button=""
     icon-name="pen-small"
-    role="button"
     slot="li-0"
     tabindex="0"
   >
@@ -26,7 +25,6 @@ snapshots["sbb-mini-button-group renders DOM"] =
     data-action=""
     data-button=""
     icon-name="pen-small"
-    role="button"
     slot="li-2"
     tabindex="0"
   >
@@ -70,7 +68,6 @@ snapshots["sbb-mini-button-group renders negative DOM"] =
     data-button=""
     icon-name="pen-small"
     negative=""
-    role="button"
     slot="li-0"
     tabindex="0"
   >
@@ -80,7 +77,6 @@ snapshots["sbb-mini-button-group renders negative DOM"] =
     data-button=""
     icon-name="pen-small"
     negative=""
-    role="button"
     slot="li-1"
     tabindex="0"
   >

src/elements/button/mini-button/mini-button.stories.ts

@@ -11,9 +11,11 @@ import type {
 import { html, type TemplateResult } from 'lit';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { buttonDefaultArgs, buttonDefaultArgTypes } from '../common/button-common-stories.js';
+
 import '../../form-field.js';
+import '../../icon.js';
 import './mini-button.js';
-import { buttonDefaultArgs, buttonDefaultArgTypes } from '../common/button-common-stories.js';
 
 import readme from './readme.md?raw';
 

src/elements/button/mini-button/mini-button.visual.spec.ts

@@ -54,6 +54,37 @@ describe(`sbb-mini-button`, () => {
       }
     });
 
+    describe(`disabledInteractive`, () => {
+      for (const negative of [false, true]) {
+        describe(`negative=${negative}`, () => {
+          for (const state of visualDiffStandardStates) {
+            it(
+              `${state.name}`,
+              state.with(async (setup) => {
+                await setup.withFixture(
+                  html`
+                    <sbb-form-field ?negative=${negative}>
+                      <label>Mini Button Demo</label>
+                      <sbb-mini-button
+                        icon-name="dog-small"
+                        slot="prefix"
+                        disabled-interactive
+                      ></sbb-mini-button>
+                      <input placeholder="Placeholder" />
+                    </sbb-form-field>
+                  `,
+                  {
+                    backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                  },
+                );
+                setup.withStateElement(setup.snapshotElement.querySelector('sbb-mini-button')!);
+              }),
+            );
+          }
+        });
+      }
+    });
+
     describe('slotted icon', () => {
       beforeEach(async function () {
         root = await visualRegressionFixture(html`