fix(components): fix post-togglebutton keyboard navigation (#4242)

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

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"]) {

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,28 +30,32 @@ 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 = () => {
     this.toggled = !this.toggled;
   };
 
   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();
     }
   };
 
   render() {
     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>