feat(sbb-journey-summary): provide a11y footpath property (#3104)

sbb-design-systems · Sep 26, 2024 · 05c6d1a · 05c6d1a
1 parent 8306362
commit 05c6d1a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/elements-experimental/journey-summary/journey-summary.stories.ts b/src/elements-experimental/journey-summary/journey-summary.stories.ts
@@ -40,6 +40,12 @@ const headerLevel: InputType = {
   },
 };
 
+const a11yFootpath: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const now: InputType = {
   control: {
     type: 'date',
@@ -68,6 +74,7 @@ const defaultArgTypes: ArgTypes = {
   'disable-animation': disableAnimation,
   'round-trip': roundTrip,
   'header-level': headerLevel,
+  'a11y-footpath': a11yFootpath,
   now,
   trip,
   tripBack,
@@ -77,6 +84,7 @@ const defaultArgs: Args = {
   'disable-animation': false,
   'round-trip': false,
   'header-level': headerLevel.options![2],
+  'a11y-footpath': false,
   now: new Date('2022-12-05T12:11:00').valueOf(),
   trip: undefined,
   tripBack: undefined,

diff --git a/src/elements-experimental/journey-summary/journey-summary.ts b/src/elements-experimental/journey-summary/journey-summary.ts
@@ -60,6 +60,14 @@ export class SbbJourneySummaryElement extends LitElement {
    */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
+  /**
+   * 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;
+
   /** 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) {
@@ -138,6 +146,7 @@ export class SbbJourneySummaryElement extends LitElement {
           .arrivalWalk=${arrivalWalk}
           .legs=${legs}
           .disableAnimation=${this.disableAnimation}
+          .a11yFootpath=${this.a11yFootpath}
           .now=${this.now}
         ></sbb-pearl-chain-time>
       </div>

diff --git a/src/elements-experimental/journey-summary/readme.md b/src/elements-experimental/journey-summary/readme.md
@@ -24,14 +24,15 @@ This is helpful if you need a specific state of the component.
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                                | Default | Description                                                                                                          |
-| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
-| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined`                              |         | Per default, the current location has a pulsating animation. You can disable the animation with this property.       |
-| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                            |
-| `now`              | `now`               | public  | `Date`                                              | `null`  | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
-| `roundTrip`        | `round-trip`        | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                             |
-| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                                                        |
-| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                                                    |
+| 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 |
+| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined`                              |         | Per default, the current location has a pulsating animation. You can disable the animation with this property.                |
+| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                                     |
+| `now`              | `now`               | public  | `Date`                                              | `null`  | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes.          |
+| `roundTrip`        | `round-trip`        | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                                      |
+| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                                                                 |
+| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                                                             |
 
 ## Slots