fix(radio): disable tabindex on disabled radio (#95)

ovh · Jul 17, 2023 · cfb31b6 · cfb31b6
1 parent dc86eb9
commit cfb31b6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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}) => {