feat(sbb-timetable-row): provide a11y footpaths

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:',
+    });
+  });
 });

src/elements-experimental/core/timetable/access-leg-helper.ts

@@ -104,7 +104,9 @@
   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 +132,13 @@
   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 +153,7 @@
  * @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.
@@ -158,6 +164,7 @@
   departureWalk: number,
   arrivalWalk: number,
   currentLanguage: string,
+  a11yFootpath?: boolean,
 ): {
   renderDepartureTimeAttribute: () => TemplateResult;
   renderArrivalTimeAttribute: () => TemplateResult;
@@ -178,15 +185,25 @@
     ? {
         text: i18nWalkingDistanceDeparture[currentLanguage],
         duration: departureWalk,
-        icon: 'walk-small',
+        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 {
@@ -197,12 +214,30 @@
   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
+      ${extendedA11yFirstLeg
+        ? renderWalkTime(
+            extendedA11yFirstLeg.duration,
+            extendedA11yFirstLeg.text,
+            'left',
+            extendedA11yFirstLeg.icon,
+          )
+        : nothing}
+      ${!extendedA11yFirstLeg && extendedFirstLeg
         ? renderTransferTime(
             extendedFirstLeg.duration,
             extendedFirstLeg.icon,
@@ -226,7 +261,7 @@
     ? {
         text: i18nWalkingDistanceArrival[currentLanguage],
         duration: arrivalWalk,
-        icon: 'walk-small',
+        icon: a11yFootpath ? 'wheelchair-small' : 'walk-small',
       }
     : null;
 
@@ -245,15 +280,25 @@
   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,
+            a11yFootpath ? 'wheelchair-small' : extendedLastLeg.icon,
             currentLanguage,
             extendedLastLeg.text,
             'arrival',

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"

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)});
 }
 

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));

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"                                                                                                                                                                                                                |

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 },

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=""
 >

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                                                                                                                                                 |

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: [],