[myfaces-tobago] 01/02: fix(radio): deselect with spacebar

[hn...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit b4f04949884d273ff665a26214355cd99e3d00b4
Author: Tom Springwald <to...@gmail.com>
AuthorDate: Fri Nov 11 14:51:33 2022 +0100

    fix(radio): deselect with spacebar
    
    Radio buttons can be selected/deselected with spacebar.
    
    Issue: TOBAGO-2031
---
 .../src/main/ts/tobago-select-one-radio.ts           | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts
index 644c9f67ff..621ce702ef 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts
@@ -19,6 +19,10 @@ import {Focus} from "./tobago-focus";
 
 class SelectOneRadio extends HTMLElement {
 
+  private readonly Key = {
+    SPACE: " "
+  };
+
   private oldCheckedId = "";
 
   constructor() {
@@ -30,6 +34,7 @@ class SelectOneRadio extends HTMLElement {
     for (const radio of this.radioGroup) {
       radio.addEventListener("focus", Focus.setLastFocusId);
       radio.addEventListener("click", this.clickSelection.bind(this));
+      radio.addEventListener("keydown", this.keySelection.bind(this));
     }
   }
 
@@ -46,6 +51,21 @@ class SelectOneRadio extends HTMLElement {
     this.saveSelection();
   }
 
+  private keySelection(event: KeyboardEvent): void {
+    if (event.key === this.Key.SPACE) {
+      event.preventDefault();
+    }
+    const radio = event.currentTarget as HTMLInputElement;
+
+    if (radio.readOnly) {
+      this.revertSelection();
+    } else if (!radio.disabled && !radio.required && event.key === " ") {
+      radio.checked = !radio.checked;
+    }
+
+    this.saveSelection();
+  }
+
   private revertSelection(): void {
     for (const radio of this.radioGroup) {
       radio.checked = radio.id === this.oldCheckedId;