♿ a11y(switch radio buttons): focus lost after selection (#1431)

* Create PR for #1422

* fix(checkbox): keep focus on click a11y criteria

* fix(checkbox): run format

* fix(checkbox): added changelog

* fix(checkbox): added documentation

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Marinkov, Magdalena <[email protected]>

.changeset/strange-rules-sleep.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**button**: Improving accessibility: keep focus on button after selection

packages/core/src/components/bal-checkbox/bal-checkbox.tsx

@@ -39,6 +39,12 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
   @State() buttonTabindex?: number
   @State() ariaForm: BalAriaForm = defaultBalAriaForm
 
+  /**
+   * Track focus state
+   * If `true` checkbox needs to remain focused
+   */
+  @State() wasFocused = false
+
   log!: LogInstance
 
   @Logger('bal-checkbox')
@@ -358,6 +364,10 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
       return
     }
 
+    if (this.wasFocused) {
+      this.focused = true
+    }
+
     if (element.nodeName !== 'INPUT' && !this.disabled && !this.readonly) {
       this.toggleChecked()
       this.nativeInput?.focus()
@@ -377,6 +387,7 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
 
     if (this.keyboardMode) {
       this.focused = true
+      this.wasFocused = true
     }
   }
 
@@ -391,7 +402,12 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
 
   private onPointerDown = () => (this.keyboardMode = false)
 
-  private onKeydown = (ev: any) => (this.keyboardMode = FOCUS_KEYS.includes(ev.key))
+  private onKeydown = (ev: any) => {
+    if (!isSpaceKey(ev)) {
+      this.wasFocused = false
+    }
+    this.keyboardMode = FOCUS_KEYS.includes(ev.key)
+  }
 
   /**
    * RENDER