From d54cb30969b1b281edc690f92738b0478d34bb82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 12 Dec 2024 20:01:57 +0100
Subject: [PATCH] fix(components): fix post-togglebutton keyboard navigation

---
 .changeset/nice-cycles-provide.md              |  5 +++++
 .../post-togglebutton/post-togglebutton.scss   | 15 +++++++++++++++
 .../post-togglebutton/post-togglebutton.tsx    | 18 ++++++++++++------
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nice-cycles-provide.md

diff --git a/.changeset/nice-cycles-provide.md b/.changeset/nice-cycles-provide.md
new file mode 100644
index 0000000000..a87368195c
--- /dev/null
+++ b/.changeset/nice-cycles-provide.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated the `post-togglebutton` to function like a real button, including support for keyboard navigation and proper focus styles.
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
index b73f35a5b6..88ee2219af 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.scss
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
@@ -1,5 +1,20 @@
+@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/helpers';
+
 :host {
   cursor: pointer;
+  outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
+  outline: tokens.get('focus-outline-color', helpers.$post-focus) none
+  tokens.get('focus-outline-width', helpers.$post-focus) !important;
+}
+
+:host(:focus-visible) {
+  outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
+
+  @include utilities.high-contrast-mode() {
+    outline-color: Highlight !important;
+  }
 }
 
 :host([aria-pressed="true"]) {
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
index b34c4f8282..b0eb329d9d 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Watch } from '@stencil/core';
+import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';
 import { version } from '@root/package.json';
 import { checkType } from '@/utils';
 
@@ -12,6 +12,8 @@ import { checkType } from '@/utils';
   shadow: true,
 })
 export class PostTogglebutton {
+  @Element() host: HTMLPostTogglebuttonElement;
+
   /**
    * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
    */
@@ -28,6 +30,10 @@ export class PostTogglebutton {
 
   componentWillLoad() {
     this.validateToggled();
+
+    // add event listener to not override listener that might be set on the host
+    this.host.addEventListener('click', () => this.handleClick());
+    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.handleKeydown(e));
   }
 
   private handleClick = () => {
@@ -35,8 +41,10 @@ export class PostTogglebutton {
   };
 
   private handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      this.toggled = !this.toggled;
+    // perform a click when enter or spaced are pressed to mimic the button behavior
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault(); // prevents the page from scrolling when space is pressed
+      this.host.click();
     }
   };
 
@@ -44,12 +52,10 @@ export class PostTogglebutton {
     return (
       <Host
         slot="post-togglebutton"
-        tabindex="0"
         data-version={version}
         role="button"
+        tabindex="0"
         aria-pressed={this.toggled.toString()}
-        onClick={this.handleClick}
-        onKeyDown={this.handleKeydown}
       >
         <slot />
       </Host>