From cf9e70fb002bc19c79eab87ab195b2549ac9499b Mon Sep 17 00:00:00 2001
From: Robert Fuhrmann <fuhrmann.robert@arcor.de>
Date: Thu, 12 Sep 2024 13:13:47 +0200
Subject: [PATCH] feat(sbb-timetable-row): provide a11y footpaths (#3048)

---------

Co-authored-by: Osman Minaz <osman.minaz@t-systems.com>
Co-authored-by: Robert Fuhrmann <r.fuhrmann@telekom.de>
Co-authored-by: Jeri Peier <jeremias.peier@sbb.ch>
---
 .../core/timetable/access-leg-helper.spec.ts  |  54 +++++++++
 .../core/timetable/access-leg-helper.ts       | 114 +++++++++++++-----
 .../pearl-chain-time.snapshot.spec.snap.js    |   8 +-
 .../pearl-chain-time/pearl-chain-time.scss    |  17 ++-
 .../pearl-chain-time/pearl-chain-time.ts      |   4 +
 .../pearl-chain-time/readme.md                |   1 +
 .../pearl-chain/pearl-chain.sample-data.ts    |  29 +++++
 .../timetable-row.snapshot.spec.snap.js       |   1 +
 .../timetable-row/readme.md                   |   1 +
 .../timetable-row.sample-data.ts              |   8 ++
 .../timetable-row.snapshot.spec.ts            |   7 +-
 .../timetable-row/timetable-row.stories.ts    |  19 +++
 .../timetable-row/timetable-row.ts            |  10 ++
 .../timetable-row.visual.spec.ts              |   4 +
 tools/web-test-runner/preload-icons.ts        |   1 +
 15 files changed, 239 insertions(+), 39 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..79c501e5b1 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';
@@ -39,6 +40,43 @@ 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 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[],
@@ -68,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 fe638ffa10..e9c7cfbf73 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;
 }
@@ -104,7 +115,7 @@ 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">
@@ -130,10 +141,11 @@ 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}
@@ -148,6 +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: 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.
@@ -158,6 +171,7 @@ export function getDepartureArrivalTimeAttribute(
   departureWalk: number,
   arrivalWalk: number,
   currentLanguage: string,
+  a11yFootpath?: boolean,
 ): {
   renderDepartureTimeAttribute: () => TemplateResult;
   renderArrivalTimeAttribute: () => TemplateResult;
@@ -173,12 +187,17 @@ 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],
         duration: departureWalk,
-        icon: 'walk-small',
+        icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
 
@@ -197,19 +216,36 @@ export function getDepartureArrivalTimeAttribute(
   function renderDepartureTimeAttribute(): TemplateResult {
     return html`
       ${connectionFirstLeg
-        ? renderWalkTime(connectionFirstLeg.duration, connectionFirstLeg.text, 'left')
+        ? renderWalkTime(
+            connectionFirstLeg.duration,
+            connectionFirstLeg.text,
+            'left',
+            connectionFirstLeg.icon,
+          )
         : nothing}
       ${departureWalkAttribute && !extendedFirstLeg && !connectionFirstLeg
-        ? renderWalkTime(departureWalkAttribute.duration, departureWalkAttribute.text, 'left')
+        ? renderWalkTime(
+            departureWalkAttribute.duration,
+            departureWalkAttribute.text,
+            'left',
+            departureWalkAttribute.icon,
+          )
         : nothing}
       ${extendedFirstLeg
-        ? renderTransferTime(
-            extendedFirstLeg.duration,
-            extendedFirstLeg.icon,
-            currentLanguage,
-            extendedFirstLeg.text,
-            'departure',
-          )
+        ? a11yFootpath
+          ? renderWalkTime(
+              extendedFirstLeg.duration,
+              extendedFirstLeg.text,
+              'left',
+              extendedFirstLeg.icon,
+            )
+          : renderTransferTime(
+              extendedFirstLeg.duration,
+              extendedFirstLeg.icon,
+              currentLanguage,
+              extendedFirstLeg.text,
+              'departure',
+            )
         : nothing}
     `;
   }
@@ -221,12 +257,13 @@ 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],
         duration: arrivalWalk,
-        icon: 'walk-small',
+        icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
 
@@ -245,19 +282,36 @@ export function getDepartureArrivalTimeAttribute(
   function renderArrivalTimeAttribute(): TemplateResult {
     return html`
       ${connectionLastLeg
-        ? renderWalkTime(connectionLastLeg.duration, connectionLastLeg.text, 'right')
+        ? renderWalkTime(
+            connectionLastLeg.duration,
+            connectionLastLeg.text,
+            'right',
+            connectionLastLeg.icon,
+          )
         : nothing}
       ${arrivalWalkAttribute && !extendedLastLeg && !connectionLastLeg
-        ? renderWalkTime(arrivalWalkAttribute.duration, arrivalWalkAttribute.text, 'right')
+        ? renderWalkTime(
+            arrivalWalkAttribute.duration,
+            arrivalWalkAttribute.text,
+            'right',
+            arrivalWalkAttribute.icon,
+          )
         : nothing}
       ${extendedLastLeg
-        ? renderTransferTime(
-            extendedLastLeg.duration,
-            extendedLastLeg.icon,
-            currentLanguage,
-            extendedLastLeg.text,
-            'arrival',
-          )
+        ? a11yFootpath
+          ? renderWalkTime(
+              extendedLastLeg.duration,
+              extendedLastLeg.text,
+              'right',
+              extendedLastLeg.icon,
+            )
+          : renderTransferTime(
+              extendedLastLeg.duration,
+              extendedLastLeg.icon,
+              currentLanguage,
+              extendedLastLeg.text,
+              'arrival',
+            )
         : nothing}
     `;
   }
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..1508c9db3e 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)});
 }
 
@@ -50,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)});
 }
 
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..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,6 +54,9 @@ export class SbbPearlChainTimeElement extends LitElement {
    */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
+  /** 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. */
   @property()
   public set now(value: SbbDateLike | undefined) {
@@ -80,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/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/__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=""
 >
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..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: [],
@@ -582,6 +588,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 8c3649516d..e18fe0d73b 100644
--- a/src/elements-experimental/timetable-row/timetable-row.stories.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.stories.ts
@@ -19,6 +19,7 @@ import {
   quayChangeTrip,
   shipTrip,
   walkTimeTrip,
+  a11yFootpathTrip,
   extendedEnterTimeTrip,
   noticesTrip,
   skippedDepartureStopTrip,
@@ -58,6 +59,12 @@ const accessibilityExpanded: InputType = {
   },
 };
 
+const a11yFootpath: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const active: InputType = {
   control: {
     type: 'boolean',
@@ -91,6 +98,7 @@ const defaultArgTypes: ArgTypes = {
   'loading-trip': loadingTrip,
   'loading-price': loadingPrice,
   'accessibility-expanded': accessibilityExpanded,
+  'a11y-footpath': a11yFootpath,
   active,
   now,
   boarding,
@@ -103,6 +111,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,
@@ -347,6 +356,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 ead6ff8091..cd0ca8ecd0 100644
--- a/src/elements-experimental/timetable-row/timetable-row.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.ts
@@ -226,6 +226,14 @@ export class SbbTimetableRowElement extends LitElement {
    */
   @property({ attribute: 'loading-trip', type: Boolean }) public loadingTrip = false;
 
+  /**
+   * 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;
+
   /**
    * The loading state -
    * when this is true it will be render skeleton with an idling animation
@@ -337,6 +345,7 @@ export class SbbTimetableRowElement extends LitElement {
       departureWalk || 0,
       arrivalWalk || 0,
       this._language.current,
+      this.a11yFootpath,
     );
 
     const departureTime: Date | undefined = departure?.time
@@ -539,6 +548,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">
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..907a2d59fe 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, a11yFootpath: true },
     { 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
diff --git a/tools/web-test-runner/preload-icons.ts b/tools/web-test-runner/preload-icons.ts
index 3a69a00d81..d1712c0e68 100644
--- a/tools/web-test-runner/preload-icons.ts
+++ b/tools/web-test-runner/preload-icons.ts
@@ -121,6 +121,7 @@ const preloadIconList = [
   'walk-fast-small',
   'walk-slow-small',
   'walk-small',
+  'wheelchair-small',
   'picto:bus-right',
   'picto:jetty-right',
   'picto:train-right',