feat(sbb-stepper): introduce sbb-stepper component

src/elements/core/styles/a11y.scss

@@ -3,3 +3,17 @@
 .sbb-screen-reader-only {
   @include a11y.screen-reader-only;
 }
+
+.sbb-focus-outline:focus-visible {
+  @include a11y.focus-outline;
+
+  border-radius: var(--sbb-border-radius-1x);
+}
+
+.sbb-focus-outline-dark:focus-visible {
+  @include a11y.focus-outline;
+
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+
+  border-radius: var(--sbb-border-radius-1x);
+}

src/elements/stepper/step-label/step-label.ssr.spec.ts

@@ -0,0 +1,20 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbStepLabelElement } from './step-label.js';
+
+describe(`sbb-step-label ${fixture.name}`, () => {
+  let root: SbbStepLabelElement;
+
+  beforeEach(async () => {
+    root = await fixture(html`<sbb-step-label>Label</sbb-step-label>`, {
+      modules: ['./step-label.js'],
+    });
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbStepLabelElement);
+  });
+});

src/elements/stepper/step/__snapshots__/step.spec.snap.js

@@ -14,10 +14,7 @@ snapshots["sbb-step renders - Dom"] =
 
 snapshots["sbb-step renders - ShadowDom"] = 
 `<div class="sbb-step--wrapper">
-  <div
-    class="sbb-step"
-    tabindex="0"
-  >
+  <div class="sbb-step">
     <slot>
     </slot>
   </div>

src/elements/stepper/step/readme.md

@@ -14,6 +14,15 @@ Whenever a step switch is triggered, a `validate` event is emitted and can be ca
 
 ## Accessibility
 
+Whenever textual content is provided, please also set the attribute `tabindex=‘0’` on the text tag, so that it can be reached and announced by screen-readers. Also remember to use the classes `.sbb-focus-outline` and `.sbb-focus-outline-dark` to correctly style the outline.
+
+```html
+<sbb-step>
+    <p tabindex="0" class="sbb-focus-outline">Step content</p>
+    <sbb-button>Button<sbb-button>
+</sbb-step>
+```
+
 The aria attribute `aria-labelledby` is set automatically.
 
 <!-- Auto Generated Below -->

src/elements/stepper/step/step.scss

@@ -68,10 +68,4 @@
     delay: var(--sbb-step-animation-delay);
     timing-function: var(--sbb-animation-easing);
   }
-
-  &:focus-visible {
-    @include sbb.focus-outline;
-
-    border-radius: var(--sbb-border-radius-1x);
-  }
 }

src/elements/stepper/step/step.ssr.spec.ts

@@ -0,0 +1,18 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbStepElement } from './step.js';
+
+describe(`sbb-step ${fixture.name}`, () => {
+  let root: SbbStepElement;
+
+  beforeEach(async () => {
+    root = await fixture(html`<sbb-step>Step</sbb-step>`, { modules: ['./step.js'] });
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbStepElement);
+  });
+});

src/elements/stepper/step/step.ts

@@ -167,7 +167,6 @@ export class SbbStepElement extends LitElement {
       <div class="sbb-step--wrapper">
         <div
           class="sbb-step"
-          tabindex="0"
           ${ref((step) => step && this._stepResizeObserver.observe(step as HTMLElement))}
         >
           <slot></slot>

src/elements/stepper/stepper/__snapshots__/stepper.spec.snap.js

@@ -134,7 +134,7 @@ snapshots["sbb-stepper A11y tree Chrome"] =
       "name": "Test step label 4"
     },
     {
-      "role": "generic",
+      "role": "text",
       "name": "Test step content 1"
     }
   ]
@@ -167,14 +167,8 @@ snapshots["sbb-stepper A11y tree Firefox"] =
       "name": "4 Test step label 4"
     },
     {
-      "role": "section",
-      "name": "",
-      "children": [
-        {
-          "role": "text leaf",
-          "name": "Test step content 1"
-        }
-      ]
+      "role": "text leaf",
+      "name": "Test step content 1"
     },
     {
       "role": "tabpanel",

src/elements/stepper/stepper/readme.md

@@ -79,6 +79,24 @@ Whenever a step switch is triggered, a `validate` event is emitted and can be ca
 
 ## Accessibility
 
+Whenever textual content is provided, please also set the attribute `tabindex=‘0’` on the text tag, so that it can be reached and announced by screen-readers. Also remember to use the classes `.sbb-focus-outline` and `.sbb-focus-outline-dark` to correctly style the outline.
+
+```html
+<sbb-stepper aria-label="Purpose of this flow">
+  <sbb-step-label>Step label 1</sbb-step-label>
+  <sbb-step>
+    <p tabindex="0" class="sbb-focus-outline">Step content 1</p>
+    <sbb-button>Button<sbb-button>
+  </sbb-step>
+
+  <sbb-step-label>Step label 2</sbb-step-label>
+  <sbb-step>
+    <p tabindex="0" class="sbb-focus-outline">Step content 2</p>
+    <sbb-button>Button<sbb-button>
+  </sbb-step>
+</sbb-stepper>
+```
+
 Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-stepper` also sets other attributes on the steps and the step labels like `aria-setsize`, `aria-posinset`, `aria-controls`, `aria-labelledby`. If important content needs to be announced when a step is changed, use the `aria-live=‘polite’` attribute.
 
 <!-- Auto Generated Below -->

src/elements/stepper/stepper/stepper.e2e.ts

@@ -19,25 +19,25 @@ describe('sbb-stepper', () => {
       <sbb-stepper>
         <sbb-step-label>Step 1</sbb-step-label>
         <sbb-step>
-          Step one content.
+          <div tabindex="0" id="step-one-content"></div>Step one content.</div>
           <button sbb-stepper-next id="next-button-1">Next</button>
         </sbb-step>
 
         <sbb-step-label>Step 2</sbb-step-label>
         <sbb-step>
-          Step two content.
+          <div tabindex="0"></div>Step two content.</div>
           <button sbb-stepper-next>Next</button>
           <span sbb-stepper-previous>Back</span>
         </sbb-step>
 
         <sbb-step-label>Step 3</sbb-step-label>
         <sbb-step>
-          Step three content.
+          <div tabindex="0"></div>Step three content.</div>
           <span sbb-stepper-previous>Back</span>
         </sbb-step>
 
         <sbb-step-label disabled>Step 4</sbb-step-label>
-        <sbb-step> Step four content. </sbb-step>
+        <sbb-step> <div tabindex="0"></div>Step four content.</div> </sbb-step>
       </sbb-stepper>
     `);
   });
@@ -61,13 +61,15 @@ describe('sbb-stepper', () => {
     )!;
     const validate = new EventSpy(SbbStepElement.events.validate);
 
+    stepLabelThree.focus();
     stepLabelThree.click();
     await waitForLitRender(element);
 
     await waitForCondition(() => validate.events.length === 1);
     expect(validate.count).to.be.equal(1);
     expect(stepLabelThree).to.have.attribute('data-selected');
     expect(stepLabelThree.step).to.have.attribute('data-selected');
+    expect(document.activeElement!.id).to.be.equal(stepLabelThree.id);
   });
 
   it('selects the correct step via `selected` and emits validate event', async () => {
@@ -83,6 +85,7 @@ describe('sbb-stepper', () => {
     expect(validate.count).to.be.equal(1);
     expect(stepLabelThree).to.have.attribute('data-selected');
     expect(stepLabelThree.step).to.have.attribute('data-selected');
+    expect(document.activeElement!.id).not.to.be.equal(stepLabelThree.id);
   });
 
   it('selects the correct step via `selectedIndex` and emits validate event', async () => {
@@ -98,6 +101,7 @@ describe('sbb-stepper', () => {
     expect(validate.count).to.be.equal(1);
     expect(stepLabelThree).to.have.attribute('data-selected');
     expect(stepLabelThree.step).to.have.attribute('data-selected');
+    expect(document.activeElement!.id).not.to.be.equal(stepLabelThree.id);
   });
 
   it('selects the next step on [sbb-stepper-next] click and emits validate event', async () => {
@@ -107,13 +111,15 @@ describe('sbb-stepper', () => {
     )!;
     const validate = new EventSpy(SbbStepElement.events.validate);
 
+    stepperNext.focus();
     stepperNext.click();
     await waitForLitRender(element);
 
     await waitForCondition(() => validate.events.length === 1);
     expect(validate.count).to.be.equal(1);
     expect(stepLabelTwo).to.have.attribute('data-selected');
     expect(stepLabelTwo.step).to.have.attribute('data-selected');
+    expect(document.activeElement!.id).to.be.equal(stepLabelTwo.id);
   });
 
   it('selects the previous step on [sbb-stepper-previous] click', async () => {
@@ -127,19 +133,22 @@ describe('sbb-stepper', () => {
     )!;
     const validate = new EventSpy(SbbStepElement.events.validate);
 
+    stepperNext.focus();
     stepperNext.click();
     await waitForLitRender(element);
 
     await waitForCondition(() => validate.events.length === 1);
     expect(validate.count).to.be.equal(1);
     expect(stepLabelTwo).to.have.attribute('data-selected');
     expect(stepLabelTwo.step).to.have.attribute('data-selected');
+    expect(document.activeElement!.id).to.be.equal(stepLabelTwo.id);
 
     stepperPrevious.click();
     await waitForLitRender(element);
 
     expect(stepLabelOne).to.have.attribute('data-selected');
     expect(stepLabelOne.step).to.have.attribute('data-selected');
+    expect(document.activeElement!.id).to.be.equal(stepLabelOne.id);
   });
 
   it('selects only the next step via [sbb-stepper-next] click in linear mode and emits validate event', async () => {
@@ -304,7 +313,7 @@ describe('sbb-stepper', () => {
     expect(document.activeElement!.id).to.be.equal(stepLabelOne.id);
 
     await sendKeys({ down: 'Tab' });
-    expect(document.activeElement!.id).to.be.equal(stepLabelOne.step!.id);
+    expect(document.activeElement!.id).to.be.equal('step-one-content');
   });
 
   it('sets the correct aria-labelledby attributes', async () => {

src/elements/stepper/stepper/stepper.ssr.spec.ts

@@ -0,0 +1,34 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbStepperElement } from './stepper.js';
+
+import '../step.js';
+import '../step-label.js';
+
+describe(`sbb-stepper ${fixture.name}`, () => {
+  let root: SbbStepperElement;
+
+  beforeEach(async () => {
+    root = await fixture(
+      html`
+        <sbb-stepper selected-index="0">
+          <sbb-step-label>Test step label 1</sbb-step-label>
+          <sbb-step>Test step content 1</sbb-step>
+          <sbb-step-label>Test step label 2</sbb-step-label>
+          <sbb-step>Test step content 2</sbb-step>
+          <sbb-step-label disabled>Test step label 3</sbb-step-label>
+          <sbb-step>Test step content 3</sbb-step>
+          <sbb-step-label>Test step label 4</sbb-step-label>
+        </sbb-stepper>
+      `,
+      { modules: ['./stepper.js', '../step.js', '../step-label.js'] },
+    );
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbStepperElement);
+  });
+});