From 61bd6fecf60f8d4d9f4e36b977249c42ee326535 Mon Sep 17 00:00:00 2001
From: Osman Minaz <osman.minaz@t-systems.com>
Date: Tue, 27 Aug 2024 10:59:39 +0200
Subject: [PATCH 01/12] feat: initial implementation

---
 .../core/timetable/access-leg-helper.ts               | 11 +++++++++++
 .../pearl-chain-time/pearl-chain-time.ts              |  5 +++++
 .../timetable-row/timetable-row.ts                    |  6 ++++++
 3 files changed, 22 insertions(+)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index fe638ffa10..5ba082c16d 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -158,6 +158,7 @@ export function getDepartureArrivalTimeAttribute(
   departureWalk: number,
   arrivalWalk: number,
   currentLanguage: string,
+  a11yFootpath?: boolean,
 ): {
   renderDepartureTimeAttribute: () => TemplateResult;
   renderArrivalTimeAttribute: () => TemplateResult;
@@ -195,6 +196,16 @@ export function getDepartureArrivalTimeAttribute(
   };
 
   function renderDepartureTimeAttribute(): TemplateResult {
+    if (a11yFootpath) {
+      renderTransferTime(
+        connectionFirstLeg?.duration || 0,
+        'wheelchair-small',
+        currentLanguage,
+        connectionFirstLeg?.text || '',
+        'departure',
+      );
+    }
+
     return html`
       ${connectionFirstLeg
         ? renderWalkTime(connectionFirstLeg.duration, connectionFirstLeg.text, 'left')
diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts b/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
index 1dff9a0554..9126585171 100644
--- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
+++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
@@ -54,6 +54,11 @@ export class SbbPearlChainTimeElement extends LitElement {
    */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
+  /**
+   * TODO: comment
+   */
+  @property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
+
   /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
   @property()
   public set now(value: SbbDateLike | undefined) {
diff --git a/src/elements-experimental/timetable-row/timetable-row.ts b/src/elements-experimental/timetable-row/timetable-row.ts
index ead6ff8091..9c28c4ca21 100644
--- a/src/elements-experimental/timetable-row/timetable-row.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.ts
@@ -226,6 +226,11 @@ export class SbbTimetableRowElement extends LitElement {
    */
   @property({ attribute: 'loading-trip', type: Boolean }) public loadingTrip = false;
 
+  /**
+   * The Footpath attribute for rendering different icons
+   */
+  @property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
+
   /**
    * The loading state -
    * when this is true it will be render skeleton with an idling animation
@@ -539,6 +544,7 @@ export class SbbTimetableRowElement extends LitElement {
             .departureWalk=${departureWalk}
             .arrivalWalk=${arrivalWalk}
             ?disable-animation=${this.disableAnimation}
+            ?a11y-footpath=${this.a11yFootpath}
             .now=${this.now}
           ></sbb-pearl-chain-time>
           <div class="sbb-timetable__row-footer" role="gridcell">

From d3b71dd001e01fe3cf6700def5162996f5277d7a Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Wed, 28 Aug 2024 16:58:16 +0200
Subject: [PATCH 02/12] feat: updated implementation, readme and controls

---
 .../core/timetable/access-leg-helper.ts       | 47 ++++++++++++++-----
 .../pearl-chain-time.snapshot.spec.snap.js    |  8 ++--
 .../pearl-chain-time/pearl-chain-time.scss    | 13 ++++-
 .../pearl-chain-time/pearl-chain-time.ts      |  5 +-
 .../pearl-chain-time/readme.md                |  1 +
 .../timetable-row/readme.md                   |  1 +
 .../timetable-row.sample-data.ts              |  2 +
 .../timetable-row.snapshot.spec.ts            |  7 ++-
 .../timetable-row/timetable-row.stories.ts    | 19 ++++++++
 .../timetable-row/timetable-row.ts            |  4 ++
 .../timetable-row.visual.spec.ts              |  4 ++
 11 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index 5ba082c16d..483d2099dd 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -130,10 +130,13 @@ function renderWalkTime(
   duration: number | string,
   label: string,
   variant: 'left' | 'right',
+  icon: string,
 ): TemplateResult {
   return html`
-    <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--${variant}">
-      <sbb-icon name="walk-small"></sbb-icon>
+    <span
+      class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--${icon + '-' + variant}"
+    >
+      <sbb-icon name=${icon}></sbb-icon>
       <time datetime=${duration + 'M'}>
         <span class="sbb-screen-reader-only">${label}</span>
         ${duration}
@@ -196,22 +199,26 @@ export function getDepartureArrivalTimeAttribute(
   };
 
   function renderDepartureTimeAttribute(): TemplateResult {
-    if (a11yFootpath) {
-      renderTransferTime(
-        connectionFirstLeg?.duration || 0,
+    if (a11yFootpath && departureWalkAttribute) {
+      return html`${renderWalkTime(
+        departureWalkAttribute.duration,
+        departureWalkAttribute.text,
+        'left',
         'wheelchair-small',
-        currentLanguage,
-        connectionFirstLeg?.text || '',
-        'departure',
-      );
+      )}`;
     }
 
     return html`
       ${connectionFirstLeg
-        ? renderWalkTime(connectionFirstLeg.duration, connectionFirstLeg.text, 'left')
+        ? renderWalkTime(connectionFirstLeg.duration, connectionFirstLeg.text, 'left', 'walk-small')
         : nothing}
       ${departureWalkAttribute && !extendedFirstLeg && !connectionFirstLeg
-        ? renderWalkTime(departureWalkAttribute.duration, departureWalkAttribute.text, 'left')
+        ? renderWalkTime(
+            departureWalkAttribute.duration,
+            departureWalkAttribute.text,
+            'left',
+            'walk-small',
+          )
         : nothing}
       ${extendedFirstLeg
         ? renderTransferTime(
@@ -254,12 +261,26 @@ export function getDepartureArrivalTimeAttribute(
   };
 
   function renderArrivalTimeAttribute(): TemplateResult {
+    if (a11yFootpath && arrivalWalkAttribute) {
+      return html`${renderWalkTime(
+        arrivalWalkAttribute.duration,
+        arrivalWalkAttribute.text,
+        'right',
+        'wheelchair-small',
+      )}`;
+    }
+
     return html`
       ${connectionLastLeg
-        ? renderWalkTime(connectionLastLeg.duration, connectionLastLeg.text, 'right')
+        ? renderWalkTime(connectionLastLeg.duration, connectionLastLeg.text, 'right', 'walk-small')
         : nothing}
       ${arrivalWalkAttribute && !extendedLastLeg && !connectionLastLeg
-        ? renderWalkTime(arrivalWalkAttribute.duration, arrivalWalkAttribute.text, 'right')
+        ? renderWalkTime(
+            arrivalWalkAttribute.duration,
+            arrivalWalkAttribute.text,
+            'right',
+            'walk-small',
+          )
         : nothing}
       ${extendedLastLeg
         ? renderTransferTime(
diff --git a/src/elements-experimental/pearl-chain-time/__snapshots__/pearl-chain-time.snapshot.spec.snap.js b/src/elements-experimental/pearl-chain-time/__snapshots__/pearl-chain-time.snapshot.spec.snap.js
index eccebe5443..22173711df 100644
--- a/src/elements-experimental/pearl-chain-time/__snapshots__/pearl-chain-time.snapshot.spec.snap.js
+++ b/src/elements-experimental/pearl-chain-time/__snapshots__/pearl-chain-time.snapshot.spec.snap.js
@@ -48,7 +48,7 @@ snapshots["sbb-pearl-chain-time renders with departure walk DOM"] =
 
 snapshots["sbb-pearl-chain-time renders with departure walk Shadow DOM"] = 
 `<div class="sbb-pearl-chain__time">
-  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--left">
+  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--walk-small-left">
     <sbb-icon
       aria-hidden="true"
       data-namespace="default"
@@ -125,7 +125,7 @@ snapshots["sbb-pearl-chain-time renders with arrival walk Shadow DOM"] =
     </span>
     15:00
   </time>
-  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--right">
+  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--walk-small-right">
     <sbb-icon
       aria-hidden="true"
       data-namespace="default"
@@ -163,7 +163,7 @@ snapshots["sbb-pearl-chain-time renders with departure and arrival walk DOM"] =
 
 snapshots["sbb-pearl-chain-time renders with departure and arrival walk Shadow DOM"] = 
 `<div class="sbb-pearl-chain__time">
-  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--left">
+  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--walk-small-left">
     <sbb-icon
       aria-hidden="true"
       data-namespace="default"
@@ -204,7 +204,7 @@ snapshots["sbb-pearl-chain-time renders with departure and arrival walk Shadow D
     </span>
     15:00
   </time>
-  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--right">
+  <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--walk-small-right">
     <sbb-icon
       aria-hidden="true"
       data-namespace="default"
diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
index c640e6159d..54fd6914fc 100644
--- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
+++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
@@ -33,12 +33,21 @@
   align-items: center;
 }
 
-.sbb-pearl-chain__time-walktime--left {
+.sbb-pearl-chain__time-walktime--walk-small-left {
   transform: translateX(sbb.px-to-rem-build(-7));
   margin-inline-end: calc(var(--sbb-spacing-fixed-2x) - #{sbb.px-to-rem-build(7)});
 }
 
-.sbb-pearl-chain__time-walktime--right {
+.sbb-pearl-chain__time-walktime--walk-small-right {
+  margin-inline-start: calc(var(--sbb-spacing-fixed-2x) - #{sbb.px-to-rem-build(4)});
+}
+
+.sbb-pearl-chain__time-walktime--wheelchair-small-left {
+  transform: translateX(sbb.px-to-rem-build(-6));
+  margin-inline-end: calc(var(--sbb-spacing-fixed-2x) - #{sbb.px-to-rem-build(7)});
+}
+
+.sbb-pearl-chain__time-walktime--wheelchair-small-right {
   margin-inline-start: calc(var(--sbb-spacing-fixed-2x) - #{sbb.px-to-rem-build(4)});
 }
 
diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts b/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
index 9126585171..78cef0ed89 100644
--- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
+++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
@@ -54,9 +54,7 @@ export class SbbPearlChainTimeElement extends LitElement {
    */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
-  /**
-   * TODO: comment
-   */
+  /** Optional prop to render wheelchair-small instead of walk-small */
   @property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
 
   /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
@@ -85,6 +83,7 @@ export class SbbPearlChainTimeElement extends LitElement {
         this.departureWalk || 0,
         this.arrivalWalk || 0,
         this._language.current,
+        this.a11yFootpath,
       );
 
     const rideLegs = this.legs?.filter((leg) => isRideLeg(leg));
diff --git a/src/elements-experimental/pearl-chain-time/readme.md b/src/elements-experimental/pearl-chain-time/readme.md
index 7e92529d50..27ee28dad8 100644
--- a/src/elements-experimental/pearl-chain-time/readme.md
+++ b/src/elements-experimental/pearl-chain-time/readme.md
@@ -55,6 +55,7 @@ This is helpful if you need a specific state of the component.
 
 | Name               | Attribute           | Privacy | Type                   | Default | Description                                                                                                                                                                                                                                                                    |
 | ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `a11yFootpath`     | `a11y-footpath`     | public  | `boolean \| undefined` |         | Optional prop to render wheelchair-small instead of walk-small                                                                                                                                                                                                                 |
 | `arrivalTime`      | `arrival-time`      | public  | `string \| undefined`  |         | Prop to render the arrival time - will be formatted as "H:mm"                                                                                                                                                                                                                  |
 | `arrivalWalk`      | `arrival-walk`      | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) after arrival                                                                                                                                                                                                               |
 | `departureTime`    | `departure-time`    | public  | `string \| undefined`  |         | Prop to render the departure time - will be formatted as "H:mm"                                                                                                                                                                                                                |
diff --git a/src/elements-experimental/timetable-row/readme.md b/src/elements-experimental/timetable-row/readme.md
index ea4ac293c8..1a776bc3f5 100644
--- a/src/elements-experimental/timetable-row/readme.md
+++ b/src/elements-experimental/timetable-row/readme.md
@@ -49,6 +49,7 @@ This is helpful if you need a specific state of the component.
 
 | Name                    | Attribute                | Privacy | Type                    | Default | Description                                                                                                                                                                                   |
 | ----------------------- | ------------------------ | ------- | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `a11yFootpath`          | `a11y-footpath`          | public  | `boolean \| undefined`  |         | The Footpath attribute for rendering different icons true: render a11y-icon false: render walk-icon default: render walk-icon                                                                 |
 | `accessibilityExpanded` | `accessibility-expanded` | public  | `boolean \| undefined`  |         | This will be forwarded to the sbb-card component as aria-expanded.                                                                                                                            |
 | `active`                | `active`                 | public  | `boolean \| undefined`  |         | When this prop is true the sbb-card will be in the active state.                                                                                                                              |
 | `boarding`              | `boarding`               | public  | `Boarding \| undefined` |         | This will be forwarded to the notices section                                                                                                                                                 |
diff --git a/src/elements-experimental/timetable-row/timetable-row.sample-data.ts b/src/elements-experimental/timetable-row/timetable-row.sample-data.ts
index 83eac71e5f..a32214dba8 100644
--- a/src/elements-experimental/timetable-row/timetable-row.sample-data.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.sample-data.ts
@@ -582,6 +582,8 @@ export const walkTimeTrip: DeepPartial<ITripItem> = {
   },
 };
 
+export const a11yFootpathTrip: DeepPartial<ITripItem> = { ...walkTimeTrip };
+
 export const extendedEnterTimeTrip: DeepPartial<ITripItem> = {
   legs: [extendedLeg, futureLeg, longFutureLeg],
   notices: [],
diff --git a/src/elements-experimental/timetable-row/timetable-row.snapshot.spec.ts b/src/elements-experimental/timetable-row/timetable-row.snapshot.spec.ts
index a96b1053ba..3a9c7c5691 100644
--- a/src/elements-experimental/timetable-row/timetable-row.snapshot.spec.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.snapshot.spec.ts
@@ -65,7 +65,12 @@ describe(`sbb-timetable-row`, () => {
   describe('renders loading state', () => {
     beforeEach(async () => {
       element = await fixture(
-        html`<sbb-timetable-row loading-trip loading-price .now=${now}></sbb-timetable-row>`,
+        html`<sbb-timetable-row
+          loading-trip
+          a11y-footpath
+          loading-price
+          .now=${now}
+        ></sbb-timetable-row>`,
       );
     });
 
diff --git a/src/elements-experimental/timetable-row/timetable-row.stories.ts b/src/elements-experimental/timetable-row/timetable-row.stories.ts
index 46561975f8..afb57583df 100644
--- a/src/elements-experimental/timetable-row/timetable-row.stories.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.stories.ts
@@ -20,6 +20,7 @@ import {
   quayChangeTrip,
   shipTrip,
   walkTimeTrip,
+  a11yFootpathTrip,
   extendedEnterTimeTrip,
   noticesTrip,
   skippedDepartureStopTrip,
@@ -59,6 +60,12 @@ const accessibilityExpanded: InputType = {
   },
 };
 
+const a11yFootpath: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const active: InputType = {
   control: {
     type: 'boolean',
@@ -92,6 +99,7 @@ const defaultArgTypes: ArgTypes = {
   'loading-trip': loadingTrip,
   'loading-price': loadingPrice,
   'accessibility-expanded': accessibilityExpanded,
+  'a11y-footpath': a11yFootpath,
   active,
   now,
   boarding,
@@ -104,6 +112,7 @@ const defaultArgs: Args = {
   'loading-trip': false,
   'loading-price': false,
   'accessibility-expanded': false,
+  'a11y-footpath': false,
   active: false,
   now: new Date('2022-12-01T12:11:00').valueOf(),
   trip: defaultTrip,
@@ -348,6 +357,16 @@ export const WalkTime: StoryObj = {
   },
 };
 
+export const A11yFootpath: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    trip: a11yFootpathTrip,
+    'a11y-footpath': 'true',
+  },
+};
+
 export const ExtendedEnterTime: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
diff --git a/src/elements-experimental/timetable-row/timetable-row.ts b/src/elements-experimental/timetable-row/timetable-row.ts
index 9c28c4ca21..cd0ca8ecd0 100644
--- a/src/elements-experimental/timetable-row/timetable-row.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.ts
@@ -228,6 +228,9 @@ export class SbbTimetableRowElement extends LitElement {
 
   /**
    * The Footpath attribute for rendering different icons
+   * true: render a11y-icon
+   * false: render walk-icon
+   * default: render walk-icon
    */
   @property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
 
@@ -342,6 +345,7 @@ export class SbbTimetableRowElement extends LitElement {
       departureWalk || 0,
       arrivalWalk || 0,
       this._language.current,
+      this.a11yFootpath,
     );
 
     const departureTime: Date | undefined = departure?.time
diff --git a/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts b/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts
index 19e1aafc55..c40d6ee7cc 100644
--- a/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts
@@ -28,6 +28,7 @@ import {
   skippedLastArrivalStopTrip,
   trainTrip,
   walkTimeTrip,
+  a11yFootpathTrip,
 } from './timetable-row.sample-data.js';
 
 const samplePrice: Price = { price: '39.90', text: 'ab CHF', isDiscount: false };
@@ -39,6 +40,7 @@ interface Args {
   now?: number;
   active?: boolean;
   loadingTrip?: boolean;
+  a11yFootpath?: boolean;
   loadingPrice?: boolean;
 }
 
@@ -69,6 +71,7 @@ describe(`sbb-timetable-row`, () => {
     { name: 'bus', trip: busTrip },
     { name: 'ship', trip: shipTrip },
     { name: 'walkTime', trip: walkTimeTrip },
+    { name: 'a11yFootpath', trip: a11yFootpathTrip },
     { name: 'extended enter time', trip: extendedEnterTimeTrip },
     { name: 'notices', trip: noticesTrip, boarding: { name: 'sa-rs', text: 'boarding' } },
   ];
@@ -80,6 +83,7 @@ describe(`sbb-timetable-row`, () => {
       .boarding=${args.boarding}
       ?active=${args.active}
       ?loading-trip=${args.loadingTrip}
+      ?a11y-footpath=${args.a11yFootpath}
       ?loading-price=${args.loadingPrice}
       now=${(args.now ?? new Date('2022-12-01T12:11:00').valueOf()) / 1000}
       disable-animation

From f0b1b86c79c99b4b0bf4d4c08e856f3d82dd85f3 Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Fri, 30 Aug 2024 12:24:05 +0200
Subject: [PATCH 03/12] fix: snapshot sbb-timetable-row renders loading state
 DOM

---
 .../__snapshots__/timetable-row.snapshot.spec.snap.js            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js b/src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js
index 6d31c56af4..78d387b553 100644
--- a/src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js
+++ b/src/elements-experimental/timetable-row/__snapshots__/timetable-row.snapshot.spec.snap.js
@@ -276,6 +276,7 @@ snapshots["sbb-timetable-row renders bus strip Shadow DOM"] =
 
 snapshots["sbb-timetable-row renders loading state DOM"] = 
 `<sbb-timetable-row
+  a11y-footpath=""
   loading-price=""
   loading-trip=""
 >

From 8a6ad63585bd1f5ceb721662520367ef3e11de1c Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Mon, 2 Sep 2024 10:20:42 +0200
Subject: [PATCH 04/12] fix: rendering icons, test

---
 .../core/timetable/access-leg-helper.spec.ts  | 21 ++++++++++
 .../core/timetable/access-leg-helper.ts       | 41 ++++++++-----------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.spec.ts b/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
index 25ddf7dd83..ba16187499 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
@@ -39,6 +39,27 @@ describe('getDepartureArrivalTimeAttribute', () => {
     });
   });
 
+  it('should return correct a11y time attributes', () => {
+    const { departureTimeAttribute, arrivalTimeAttribute } = getDepartureArrivalTimeAttribute(
+      defaultTrip.legs as Leg[],
+      10,
+      10,
+      'en',
+      true,
+    );
+
+    expect(departureTimeAttribute).to.be.deep.equal({
+      duration: 10,
+      icon: 'wheelchair-small',
+      text: 'minutes of walking time before departure:',
+    });
+    expect(arrivalTimeAttribute).to.be.deep.equal({
+      duration: 10,
+      icon: 'wheelchair-small',
+      text: 'minutes of walking time after arrival:',
+    });
+  });
+
   it('should returns extended departure time attribute', () => {
     const { departureTimeAttribute } = getDepartureArrivalTimeAttribute(
       extendedEnterTimeTrip.legs as Leg[],
diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index 483d2099dd..dcff0ba477 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -151,6 +151,7 @@ function renderWalkTime(
  * @param departureWalk: The walking distance in minutes from the departure point to the first leg.
  * @param arrivalWalk: The walking distance in minutes from the last leg to the arrival point.
  * @param currentLanguage: The current language for localization.
+ * @param a11yFootpath: If the a11y-icon should be shown.
  * @returns renderDepartureTimeAttribute: A function that renders the element for the departure time attribute.
  * @returns renderArrivalTimeAttribute: A function that renders the element for the arrival time attribute.
  * @returns arrivalTimeAttribute: The access attribute for the arrival time.
@@ -182,7 +183,7 @@ export function getDepartureArrivalTimeAttribute(
     ? {
         text: i18nWalkingDistanceDeparture[currentLanguage],
         duration: departureWalk,
-        icon: 'walk-small',
+        icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
 
@@ -199,25 +200,21 @@ export function getDepartureArrivalTimeAttribute(
   };
 
   function renderDepartureTimeAttribute(): TemplateResult {
-    if (a11yFootpath && departureWalkAttribute) {
-      return html`${renderWalkTime(
-        departureWalkAttribute.duration,
-        departureWalkAttribute.text,
-        'left',
-        'wheelchair-small',
-      )}`;
-    }
-
     return html`
       ${connectionFirstLeg
-        ? renderWalkTime(connectionFirstLeg.duration, connectionFirstLeg.text, 'left', 'walk-small')
+        ? renderWalkTime(
+            connectionFirstLeg.duration,
+            connectionFirstLeg.text,
+            'left',
+            connectionFirstLeg.icon,
+          )
         : nothing}
       ${departureWalkAttribute && !extendedFirstLeg && !connectionFirstLeg
         ? renderWalkTime(
             departureWalkAttribute.duration,
             departureWalkAttribute.text,
             'left',
-            'walk-small',
+            departureWalkAttribute.icon,
           )
         : nothing}
       ${extendedFirstLeg
@@ -244,7 +241,7 @@ export function getDepartureArrivalTimeAttribute(
     ? {
         text: i18nWalkingDistanceArrival[currentLanguage],
         duration: arrivalWalk,
-        icon: 'walk-small',
+        icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
 
@@ -261,25 +258,21 @@ export function getDepartureArrivalTimeAttribute(
   };
 
   function renderArrivalTimeAttribute(): TemplateResult {
-    if (a11yFootpath && arrivalWalkAttribute) {
-      return html`${renderWalkTime(
-        arrivalWalkAttribute.duration,
-        arrivalWalkAttribute.text,
-        'right',
-        'wheelchair-small',
-      )}`;
-    }
-
     return html`
       ${connectionLastLeg
-        ? renderWalkTime(connectionLastLeg.duration, connectionLastLeg.text, 'right', 'walk-small')
+        ? renderWalkTime(
+            connectionLastLeg.duration,
+            connectionLastLeg.text,
+            'right',
+            connectionLastLeg.icon,
+          )
         : nothing}
       ${arrivalWalkAttribute && !extendedLastLeg && !connectionLastLeg
         ? renderWalkTime(
             arrivalWalkAttribute.duration,
             arrivalWalkAttribute.text,
             'right',
-            'walk-small',
+            arrivalWalkAttribute.icon,
           )
         : nothing}
       ${extendedLastLeg

From fb877ac37abdd5502a347fb31c5c6380d84ed6c8 Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Mon, 2 Sep 2024 14:24:25 +0200
Subject: [PATCH 05/12] feat: test connectionFirstLeg

---
 .../core/timetable/access-leg-helper.spec.ts  | 17 +++++++++++
 .../pearl-chain/pearl-chain.sample-data.ts    | 29 +++++++++++++++++++
 .../timetable-row.sample-data.ts              |  6 ++++
 3 files changed, 52 insertions(+)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.spec.ts b/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
index ba16187499..f5a36b0b97 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
@@ -1,6 +1,7 @@
 import { expect } from '@open-wc/testing';
 
 import {
+  connectionTrip,
   defaultTrip,
   extendedEnterTimeTrip,
 } from '../../timetable-row/timetable-row.sample-data.js';
@@ -60,6 +61,22 @@ describe('getDepartureArrivalTimeAttribute', () => {
     });
   });
 
+  it('should return correct time attribute for connection-leg', () => {
+    const { departureTimeAttribute } = getDepartureArrivalTimeAttribute(
+      connectionTrip.legs as Leg[],
+      10,
+      0,
+      'en',
+      true,
+    );
+
+    expect(departureTimeAttribute).to.be.deep.equal({
+      duration: 30,
+      icon: 'walk-small',
+      text: 'Zu Fuss',
+    });
+  });
+
   it('should returns extended departure time attribute', () => {
     const { departureTimeAttribute } = getDepartureArrivalTimeAttribute(
       extendedEnterTimeTrip.legs as Leg[],
diff --git a/src/elements-experimental/pearl-chain/pearl-chain.sample-data.ts b/src/elements-experimental/pearl-chain/pearl-chain.sample-data.ts
index 7332869434..a359ad9725 100644
--- a/src/elements-experimental/pearl-chain/pearl-chain.sample-data.ts
+++ b/src/elements-experimental/pearl-chain/pearl-chain.sample-data.ts
@@ -41,6 +41,35 @@ export const futureLeg: any = {
   serviceJourney: defaultService,
 };
 
+export const connectionLeg: any = {
+  duration: 30,
+  id: '3',
+  __typename: 'PTConnectionLeg',
+  start: {
+    __typename: 'StopPlace',
+    id: '8722326',
+    name: 'Lille-Europe',
+  },
+  end: {
+    __typename: 'StopPlace',
+    id: '8798949',
+    name: 'Lille-Europe EST',
+  },
+  notices: [
+    {
+      name: 'Y',
+      text: {
+        template: 'Zu Fuss',
+        arguments: [],
+        __typename: 'LinkedText',
+      },
+      type: 'ATTRIBUTE',
+      priority: 5,
+      __typename: 'Notice',
+    },
+  ],
+};
+
 export const extendedLeg = {
   __typename: 'PTRideLeg',
   arrival: { time: future2 },
diff --git a/src/elements-experimental/timetable-row/timetable-row.sample-data.ts b/src/elements-experimental/timetable-row/timetable-row.sample-data.ts
index a32214dba8..6588d77dbc 100644
--- a/src/elements-experimental/timetable-row/timetable-row.sample-data.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.sample-data.ts
@@ -1,6 +1,7 @@
 import type { ITripItem } from '../core/timetable.js';
 import {
   cancelledLeg,
+  connectionLeg,
   defaultBusLeg,
   defaultShipLeg,
   defaultTramLeg,
@@ -42,6 +43,11 @@ export const defaultTrip: DeepPartial<ITripItem> = {
   },
 };
 
+export const connectionTrip: DeepPartial<ITripItem> = {
+  ...defaultTrip,
+  legs: [connectionLeg],
+};
+
 export const cancelledTrip: DeepPartial<ITripItem> = {
   legs: [cancelledLeg],
   situations: [],

From 9ce402efaffb77c943dd058b9c8e225ec49a0f4b Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Tue, 3 Sep 2024 16:32:24 +0200
Subject: [PATCH 06/12] feat: add extended a11y handling

---
 .../core/timetable/access-leg-helper.spec.ts  | 16 ++++++++++++
 .../core/timetable/access-leg-helper.ts       | 26 ++++++++++++++++---
 .../pearl-chain-time/pearl-chain-time.scss    |  4 +--
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.spec.ts b/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
index f5a36b0b97..79c501e5b1 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.spec.ts
@@ -106,4 +106,20 @@ describe('getDepartureArrivalTimeAttribute', () => {
       text: 'Extended boarding time ',
     });
   });
+
+  it('should return correct a11y time attribute with extended departure time', () => {
+    const { departureTimeAttribute } = getDepartureArrivalTimeAttribute(
+      extendedEnterTimeTrip.legs as Leg[],
+      0,
+      0,
+      'en',
+      true,
+    );
+
+    expect(departureTimeAttribute).to.be.deep.equal({
+      duration: 45,
+      icon: 'wheelchair-small',
+      text: 'minutes of walking time before departure:',
+    });
+  });
 });
diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index dcff0ba477..1a6782e408 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -104,7 +104,9 @@ function renderTransferTime(
   type?: 'departure' | 'arrival',
 ): TemplateResult {
   return html`
-    <span class="sbb-pearl-chain__time-transfer sbb-pearl-chain__time-transfer--${type}">
+    <span
+      class="sbb-pearl-chain__time-transfer sbb-pearl-chain__time-transfer--${icon + '-' + type}"
+    >
       <sbb-icon name=${icon}></sbb-icon>
       <time datetime=${duration + 'M'}>
         <span class="sbb-screen-reader-only">
@@ -186,12 +188,22 @@ export function getDepartureArrivalTimeAttribute(
         icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
+  const extendedA11yFirstLeg =
+    extendedFirstLeg && a11yFootpath
+      ? {
+          text: i18nWalkingDistanceDeparture[currentLanguage],
+          duration: extendedFirstLeg.duration,
+          icon: 'wheelchair-small',
+        }
+      : null;
 
   const getDepartureType = (): IAccessAttribute | null => {
     if (connectionFirstLeg) {
       return connectionFirstLeg;
     } else if (departureWalkAttribute && !extendedFirstLeg && !connectionFirstLeg) {
       return departureWalkAttribute;
+    } else if (extendedA11yFirstLeg) {
+      return extendedA11yFirstLeg;
     } else if (extendedFirstLeg) {
       return extendedFirstLeg;
     } else {
@@ -217,7 +229,15 @@ export function getDepartureArrivalTimeAttribute(
             departureWalkAttribute.icon,
           )
         : nothing}
-      ${extendedFirstLeg
+      ${extendedA11yFirstLeg
+        ? renderWalkTime(
+            extendedA11yFirstLeg.duration,
+            extendedA11yFirstLeg.text,
+            'left',
+            extendedA11yFirstLeg.icon,
+          )
+        : nothing}
+      ${!extendedA11yFirstLeg && extendedFirstLeg
         ? renderTransferTime(
             extendedFirstLeg.duration,
             extendedFirstLeg.icon,
@@ -278,7 +298,7 @@ export function getDepartureArrivalTimeAttribute(
       ${extendedLastLeg
         ? renderTransferTime(
             extendedLastLeg.duration,
-            extendedLastLeg.icon,
+            a11yFootpath ? 'wheelchair-small' : extendedLastLeg.icon,
             currentLanguage,
             extendedLastLeg.text,
             'arrival',
diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
index 54fd6914fc..1508c9db3e 100644
--- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
+++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
@@ -59,11 +59,11 @@
   gap: var(--sbb-spacing-fixed-1x);
 }
 
-.sbb-pearl-chain__time-transfer--departure {
+.sbb-pearl-chain__time-transfer--sa-ci-departure {
   margin-inline-end: var(--sbb-spacing-fixed-2x);
 }
 
-.sbb-pearl-chain__time-transfer--arrival {
+.sbb-pearl-chain__time-transfer--sa-ci-arrival {
   margin-inline-start: calc(var(--sbb-spacing-fixed-2x) - #{sbb.px-to-rem-build(4)});
 }
 

From f22ef0e58571835d8f8b99a47dd249aec207aff7 Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Wed, 4 Sep 2024 10:17:14 +0200
Subject: [PATCH 07/12] feat: add extended a11y arrival handling

---
 .../core/timetable/access-leg-helper.ts       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index 1a6782e408..30303990cb 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -264,12 +264,22 @@ export function getDepartureArrivalTimeAttribute(
         icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
+  const extendedA11yLastLeg =
+    extendedLastLeg && a11yFootpath
+      ? {
+          text: i18nWalkingDistanceArrival[currentLanguage],
+          duration: extendedLastLeg.duration,
+          icon: 'wheelchair-small',
+        }
+      : null;
 
   const getArrivalType = (): IAccessAttribute | null => {
     if (connectionLastLeg) {
       return connectionLastLeg;
     } else if (arrivalWalkAttribute && !extendedLastLeg && !connectionLastLeg) {
       return arrivalWalkAttribute;
+    } else if (extendedA11yLastLeg) {
+      return extendedA11yLastLeg;
     } else if (extendedLastLeg) {
       return extendedLastLeg;
     } else {
@@ -295,7 +305,15 @@ export function getDepartureArrivalTimeAttribute(
             arrivalWalkAttribute.icon,
           )
         : nothing}
-      ${extendedLastLeg
+      ${extendedA11yLastLeg
+        ? renderWalkTime(
+            extendedA11yLastLeg.duration,
+            extendedA11yLastLeg.text,
+            'right',
+            extendedA11yLastLeg.icon,
+          )
+        : nothing}
+      ${!extendedA11yFirstLeg && extendedLastLeg
         ? renderTransferTime(
             extendedLastLeg.duration,
             a11yFootpath ? 'wheelchair-small' : extendedLastLeg.icon,

From 1e75110aec6eaac7436f98863c84ccc946d86314 Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Wed, 4 Sep 2024 11:54:03 +0200
Subject: [PATCH 08/12] fix: clean code

---
 .../core/timetable/access-leg-helper.ts       | 113 +++++++++---------
 1 file changed, 54 insertions(+), 59 deletions(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index 30303990cb..801489ff66 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -50,6 +50,8 @@ function getPTConnectionAttribute(
 function getFirstExtendedLegAttribute(
   leg: PtRideLeg | PtConnectionLeg,
   departureWalk: number,
+  a11yFootpath: boolean | undefined,
+  currentLanguage: string,
 ): IAccessAttribute | null {
   // Extended enter
   const extendedFirstLeg = isRideLeg(leg)
@@ -64,8 +66,10 @@ function getFirstExtendedLegAttribute(
   return extendedFirstLeg
     ? {
         duration: (extractTimeAndString?.duration || 0) + (departureWalk || 0),
-        text: extractTimeAndString?.text || '',
-        icon: `sa-${extendedFirstLeg?.name?.toLowerCase()}`,
+        text: a11yFootpath
+          ? i18nWalkingDistanceDeparture[currentLanguage]
+          : extractTimeAndString?.text || '',
+        icon: a11yFootpath ? 'wheelchair-small' : `sa-${extendedFirstLeg?.name?.toLowerCase()}`,
       }
     : null;
 }
@@ -73,7 +77,12 @@ function getFirstExtendedLegAttribute(
 /**
  * @returns the extended exit attribute of the PTRideLeg
  */
-function getLastExtendedLegAttribute(leg: Leg, arrivalWalk: number): IAccessAttribute | null {
+function getLastExtendedLegAttribute(
+  leg: Leg,
+  arrivalWalk: number,
+  a11yFootpath: boolean | undefined,
+  currentLanguage: string,
+): IAccessAttribute | null {
   // Extended exit
   const extendedLastLeg = isRideLeg(leg)
     ? (leg as PtRideLeg)?.serviceJourney?.notices?.filter((notice) =>
@@ -87,8 +96,10 @@ function getLastExtendedLegAttribute(leg: Leg, arrivalWalk: number): IAccessAttr
   return extendedLastLeg
     ? {
         duration: (extractTimeAndString?.duration || 0) + (arrivalWalk || 0),
-        text: extractTimeAndString?.text || '',
-        icon: `sa-${extendedLastLeg?.name?.toLowerCase()}`,
+        text: a11yFootpath
+          ? i18nWalkingDistanceArrival[currentLanguage]
+          : extractTimeAndString?.text || '',
+        icon: a11yFootpath ? 'wheelchair-small' : `sa-${extendedLastLeg?.name?.toLowerCase()}`,
       }
     : null;
 }
@@ -180,7 +191,12 @@ export function getDepartureArrivalTimeAttribute(
   const connectionLegNotice = ['YM', 'YB', 'Y', 'YT'];
 
   const connectionFirstLeg = getPTConnectionAttribute(connectionRideLeg, connectionLegNotice);
-  const extendedFirstLeg = getFirstExtendedLegAttribute(connectionRideLeg, departureWalk);
+  const extendedFirstLeg = getFirstExtendedLegAttribute(
+    connectionRideLeg,
+    departureWalk,
+    a11yFootpath,
+    currentLanguage,
+  );
   const departureWalkAttribute = departureWalk
     ? {
         text: i18nWalkingDistanceDeparture[currentLanguage],
@@ -188,22 +204,12 @@ export function getDepartureArrivalTimeAttribute(
         icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
-  const extendedA11yFirstLeg =
-    extendedFirstLeg && a11yFootpath
-      ? {
-          text: i18nWalkingDistanceDeparture[currentLanguage],
-          duration: extendedFirstLeg.duration,
-          icon: 'wheelchair-small',
-        }
-      : null;
 
   const getDepartureType = (): IAccessAttribute | null => {
     if (connectionFirstLeg) {
       return connectionFirstLeg;
     } else if (departureWalkAttribute && !extendedFirstLeg && !connectionFirstLeg) {
       return departureWalkAttribute;
-    } else if (extendedA11yFirstLeg) {
-      return extendedA11yFirstLeg;
     } else if (extendedFirstLeg) {
       return extendedFirstLeg;
     } else {
@@ -229,22 +235,21 @@ export function getDepartureArrivalTimeAttribute(
             departureWalkAttribute.icon,
           )
         : nothing}
-      ${extendedA11yFirstLeg
-        ? renderWalkTime(
-            extendedA11yFirstLeg.duration,
-            extendedA11yFirstLeg.text,
-            'left',
-            extendedA11yFirstLeg.icon,
-          )
-        : nothing}
-      ${!extendedA11yFirstLeg && extendedFirstLeg
-        ? renderTransferTime(
-            extendedFirstLeg.duration,
-            extendedFirstLeg.icon,
-            currentLanguage,
-            extendedFirstLeg.text,
-            'departure',
-          )
+      ${extendedFirstLeg
+        ? a11yFootpath
+          ? renderWalkTime(
+              extendedFirstLeg.duration,
+              extendedFirstLeg.text,
+              'left',
+              extendedFirstLeg.icon,
+            )
+          : renderTransferTime(
+              extendedFirstLeg.duration,
+              extendedFirstLeg.icon,
+              currentLanguage,
+              extendedFirstLeg.text,
+              'departure',
+            )
         : nothing}
     `;
   }
@@ -256,7 +261,8 @@ export function getDepartureArrivalTimeAttribute(
   const connectionLastLeg =
     lastConnectionRideLeg && getPTConnectionAttribute(lastConnectionRideLeg, connectionLegNotice);
   const extendedLastLeg =
-    lastConnectionRideLeg && getLastExtendedLegAttribute(lastConnectionRideLeg, arrivalWalk);
+    lastConnectionRideLeg &&
+    getLastExtendedLegAttribute(lastConnectionRideLeg, arrivalWalk, a11yFootpath, currentLanguage);
   const arrivalWalkAttribute = arrivalWalk
     ? {
         text: i18nWalkingDistanceArrival[currentLanguage],
@@ -264,22 +270,12 @@ export function getDepartureArrivalTimeAttribute(
         icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
-  const extendedA11yLastLeg =
-    extendedLastLeg && a11yFootpath
-      ? {
-          text: i18nWalkingDistanceArrival[currentLanguage],
-          duration: extendedLastLeg.duration,
-          icon: 'wheelchair-small',
-        }
-      : null;
 
   const getArrivalType = (): IAccessAttribute | null => {
     if (connectionLastLeg) {
       return connectionLastLeg;
     } else if (arrivalWalkAttribute && !extendedLastLeg && !connectionLastLeg) {
       return arrivalWalkAttribute;
-    } else if (extendedA11yLastLeg) {
-      return extendedA11yLastLeg;
     } else if (extendedLastLeg) {
       return extendedLastLeg;
     } else {
@@ -305,22 +301,21 @@ export function getDepartureArrivalTimeAttribute(
             arrivalWalkAttribute.icon,
           )
         : nothing}
-      ${extendedA11yLastLeg
-        ? renderWalkTime(
-            extendedA11yLastLeg.duration,
-            extendedA11yLastLeg.text,
-            'right',
-            extendedA11yLastLeg.icon,
-          )
-        : nothing}
-      ${!extendedA11yFirstLeg && extendedLastLeg
-        ? renderTransferTime(
-            extendedLastLeg.duration,
-            a11yFootpath ? 'wheelchair-small' : extendedLastLeg.icon,
-            currentLanguage,
-            extendedLastLeg.text,
-            'arrival',
-          )
+      ${extendedLastLeg
+        ? a11yFootpath
+          ? renderWalkTime(
+              extendedLastLeg.duration,
+              extendedLastLeg.text,
+              'right',
+              extendedLastLeg.icon,
+            )
+          : renderTransferTime(
+              extendedLastLeg.duration,
+              extendedLastLeg.icon,
+              currentLanguage,
+              extendedLastLeg.text,
+              'arrival',
+            )
         : nothing}
     `;
   }

From 5d8ffbad2d514cc36ac6dfb563625cc97150bec3 Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <r.fuhrmann@telekom.de>
Date: Mon, 9 Sep 2024 09:18:51 +0200
Subject: [PATCH 09/12] fix: clean code

---
 .../core/timetable/access-leg-helper.ts                   | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index 801489ff66..b46d93c5ac 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -115,9 +115,7 @@ function renderTransferTime(
   type?: 'departure' | 'arrival',
 ): TemplateResult {
   return html`
-    <span
-      class="sbb-pearl-chain__time-transfer sbb-pearl-chain__time-transfer--${icon + '-' + type}"
-    >
+    <span class="sbb-pearl-chain__time-transfer sbb-pearl-chain__time-transfer--${icon}-${type}">
       <sbb-icon name=${icon}></sbb-icon>
       <time datetime=${duration + 'M'}>
         <span class="sbb-screen-reader-only">
@@ -146,9 +144,7 @@ function renderWalkTime(
   icon: string,
 ): TemplateResult {
   return html`
-    <span
-      class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--${icon + '-' + variant}"
-    >
+    <span class="sbb-pearl-chain__time-walktime sbb-pearl-chain__time-walktime--${icon}-${variant}">
       <sbb-icon name=${icon}></sbb-icon>
       <time datetime=${duration + 'M'}>
         <span class="sbb-screen-reader-only">${label}</span>

From 43458c07c1a99969cf1577e7c4d2e75de8de6492 Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <fuhrmann.robert@arcor.de>
Date: Tue, 10 Sep 2024 13:19:24 +0200
Subject: [PATCH 10/12] Update
 src/elements-experimental/core/timetable/access-leg-helper.ts

Co-authored-by: Jeri Peier <jeremias.peier@sbb.ch>
---
 src/elements-experimental/core/timetable/access-leg-helper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements-experimental/core/timetable/access-leg-helper.ts b/src/elements-experimental/core/timetable/access-leg-helper.ts
index b46d93c5ac..e9c7cfbf73 100644
--- a/src/elements-experimental/core/timetable/access-leg-helper.ts
+++ b/src/elements-experimental/core/timetable/access-leg-helper.ts
@@ -160,7 +160,7 @@ function renderWalkTime(
  * @param departureWalk: The walking distance in minutes from the departure point to the first leg.
  * @param arrivalWalk: The walking distance in minutes from the last leg to the arrival point.
  * @param currentLanguage: The current language for localization.
- * @param a11yFootpath: If the a11y-icon should be shown.
+ * @param a11yFootpath: Whether the a11y-icon should be shown.
  * @returns renderDepartureTimeAttribute: A function that renders the element for the departure time attribute.
  * @returns renderArrivalTimeAttribute: A function that renders the element for the arrival time attribute.
  * @returns arrivalTimeAttribute: The access attribute for the arrival time.

From f69d6d37f2c453949b762f0f549d7c8a5687263e Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <fuhrmann.robert@arcor.de>
Date: Tue, 10 Sep 2024 13:21:28 +0200
Subject: [PATCH 11/12] Update
 src/elements-experimental/timetable-row/timetable-row.visual.spec.ts

Co-authored-by: Jeri Peier <jeremias.peier@sbb.ch>
---
 .../timetable-row/timetable-row.visual.spec.ts                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts b/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts
index c40d6ee7cc..907a2d59fe 100644
--- a/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.visual.spec.ts
@@ -71,7 +71,7 @@ describe(`sbb-timetable-row`, () => {
     { name: 'bus', trip: busTrip },
     { name: 'ship', trip: shipTrip },
     { name: 'walkTime', trip: walkTimeTrip },
-    { name: 'a11yFootpath', trip: a11yFootpathTrip },
+    { name: 'a11yFootpath', trip: a11yFootpathTrip, a11yFootpath: true },
     { name: 'extended enter time', trip: extendedEnterTimeTrip },
     { name: 'notices', trip: noticesTrip, boarding: { name: 'sa-rs', text: 'boarding' } },
   ];

From 5a58fb82300654359a04dfdb7c1b7d2bb97c11d8 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 12 Sep 2024 11:13:36 +0200
Subject: [PATCH 12/12] fix: add wheelchair-small to the list of preloaded
 icons

---
 tools/web-test-runner/preload-icons.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tools/web-test-runner/preload-icons.ts b/tools/web-test-runner/preload-icons.ts
index b5c349810c..b0fc5528b3 100644
--- a/tools/web-test-runner/preload-icons.ts
+++ b/tools/web-test-runner/preload-icons.ts
@@ -115,6 +115,7 @@ const preloadIconList = [
   'walk-fast-small',
   'walk-slow-small',
   'walk-small',
+  'wheelchair-small',
   'picto:bus-right',
   'picto:train-right',
 ];