From 5fd32f8d8a5d6f92d14ec6e83398b06c001c3e4e Mon Sep 17 00:00:00 2001
From: skhamvon <sullivan.khamvongsa@ovhcloud.com>
Date: Mon, 10 Jul 2023 14:38:07 +0200
Subject: [PATCH] fix(radio): disable tabindex on disabled radio

---
 .../radio/ods-radio-controller.spec.ts        |  7 ++++++
 .../components/radio/ods-radio-controller.ts  | 24 +++++++++----------
 .../src/components/osds-radio/osds-radio.tsx  |  1 +
 .../stencil/components/radio/src/index.html   | 11 +++++++++
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/libraries/core/src/components/radio/ods-radio-controller.spec.ts b/packages/libraries/core/src/components/radio/ods-radio-controller.spec.ts
index 81a7f1e07e..6a7f94c2c9 100644
--- a/packages/libraries/core/src/components/radio/ods-radio-controller.spec.ts
+++ b/packages/libraries/core/src/components/radio/ods-radio-controller.spec.ts
@@ -80,6 +80,13 @@ describe('spec:ods-radio-controller', () => {
         controller.setButtonTabindex(n);
         expect(component.buttonTabindex).toBe(n);
       });
+
+      it('should set buttonTabindex value to minus one if disabled', () => {
+        const n = 1 + Math.round(Math.random() * 5);
+        setup({ buttonTabindex: 0, disabled: true });
+        controller.setButtonTabindex(n);
+        expect(component.buttonTabindex).toBe(-1);
+      });
     });
 
     describe('methods:updateDisabledOnChild', () => {
diff --git a/packages/libraries/core/src/components/radio/ods-radio-controller.ts b/packages/libraries/core/src/components/radio/ods-radio-controller.ts
index d2b6c3b3bf..12a30eeb21 100644
--- a/packages/libraries/core/src/components/radio/ods-radio-controller.ts
+++ b/packages/libraries/core/src/components/radio/ods-radio-controller.ts
@@ -22,7 +22,7 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   setButtonTabindex(value: number): void {
-    this.component.buttonTabindex = value;
+    this.component.buttonTabindex = this.component.disabled ? -1 : value;
   }
 
   updateDisabledOnChild(disabled: boolean): void {
@@ -59,15 +59,15 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   /**
-   * 
-   * @param value 
+   *
+   * @param value
    */
   watchValue(value: string): void {
     this.logger.log(`[radio=${this.component.value}]`, 'value changed', { value });
   }
 
   /**
-   * 
+   *
    */
   beforeInit(): void {
     this.logger.log(`[radio=${this.component.value}]`, 'connectedCallback');
@@ -83,7 +83,7 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   /**
-   * 
+   *
    */
   afterInit(): void {
     this.component.radioizedComponent = (this.component.el.firstElementChild as unknown) as (HTMLElement & OdsRadioizable);
@@ -96,7 +96,7 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   /**
-   * 
+   *
    */
   onDestroy(): void {
     const radioGroup = this.component.radioGroup;
@@ -109,8 +109,8 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   /**
-   * 
-   * @param checking 
+   *
+   * @param checking
    */
   updateState(checking?: boolean): void {
     if (this.component.radioGroup) {
@@ -127,8 +127,8 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   /**
-   * 
-   * @param event 
+   *
+   * @param event
    */
   async handleLabelClick(event: MouseEvent) {
     this.logger.log(`[radio=${this.component.value}]`, 'click');
@@ -137,8 +137,8 @@ export class OdsRadioController extends OdsComponentController<OdsRadio> {
   }
 
   /**
-   * 
-   * @param event 
+   *
+   * @param event
    */
   async handleLabelKeyEvent(event: KeyboardEvent) {
     this.logger.log(`[radio=${this.component.value}]`, 'key event', { event });
diff --git a/packages/stencil/components/radio/src/components/osds-radio/osds-radio.tsx b/packages/stencil/components/radio/src/components/osds-radio/osds-radio.tsx
index b0d93b5452..a7542165f3 100644
--- a/packages/stencil/components/radio/src/components/osds-radio/osds-radio.tsx
+++ b/packages/stencil/components/radio/src/components/osds-radio/osds-radio.tsx
@@ -90,6 +90,7 @@ export class OsdsRadio implements OdsRadio<OdsStencilMethods<OdsRadioMethods>, O
   @Watch('disabled')
   updateDisabledOnChild(disabled: boolean): void {
     this.controller.updateDisabledOnChild(disabled);
+    this.buttonTabindex = disabled ? -1 : 0;
   }
 
   @Watch('checking')
diff --git a/packages/stencil/components/radio/src/index.html b/packages/stencil/components/radio/src/index.html
index 0b7e3b7d65..6a1368f540 100644
--- a/packages/stencil/components/radio/src/index.html
+++ b/packages/stencil/components/radio/src/index.html
@@ -38,6 +38,17 @@
   </osds-radio>
 </osds-radio-group>
 
+<p>radio disabled</p>
+<osds-radio-group id="radio-group-a" disabled>
+  <osds-radio value="val-tile1">
+    <osds-tile>myTile1</osds-tile>
+  </osds-radio>
+  <osds-radio value="val-tile2">
+    <osds-tile >myTile2</osds-tile>
+  </osds-radio>
+</osds-radio-group>
+
+
 
 <script type="module">
   document.addEventListener('odsInitialized', ({detail}) => {