fix: Sync disable state for uui-radio with uui-radio-group (#393)

Co-authored-by: Jesper Møller Jensen <[email protected]>

Author: iOvergaard

packages/uui-radio/lib/uui-radio-group.element.ts

@@ -144,6 +144,11 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
         el.addEventListener('blur', this._onChildBlur);
       });
 
+      this._setNameOnRadios(this.name);
+      if (this.disabled) {
+        this._setDisableOnRadios(true);
+      }
+
       const checkedRadios = this._radioElements.filter(
         el => el.checked === true
       );
@@ -172,11 +177,6 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
         } else {
           this._makeFirstEnabledFocusable();
         }
-
-        this._setNameOnRadios(this.name);
-        if (this.disabled) {
-          this._setDisableOnRadios(true);
-        }
       } else {
         this._makeFirstEnabledFocusable();
       }
@@ -276,7 +276,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
   updated(_changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(_changedProperties);
     if (_changedProperties.has('disabled')) {
-      this._setDisableOnRadios(_changedProperties.get('disabled') as boolean);
+      this._setDisableOnRadios(this.disabled);
     }
 
     if (_changedProperties.has('name')) {

packages/uui-radio/lib/uui-radio-group.test.ts

@@ -1,4 +1,10 @@
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  oneEvent,
+} from '@open-wc/testing';
 
 import { UUIRadioGroupElement } from './uui-radio-group.element';
 import { UUIRadioElement } from './uui-radio.element';
@@ -13,7 +19,7 @@ describe('UuiRadio', () => {
   let radios: UUIRadioElement[];
   beforeEach(async () => {
     element = await fixture(html`
-      <uui-radio-group>
+      <uui-radio-group name="groupname">
         <uui-radio .value=${'Value 1'} label="Option 1">Option 1</uui-radio>
         <uui-radio .value=${'Value 2'} label="Option 2"></uui-radio>
         <uui-radio .value=${'Value 3'} label="Option 3">Option 3</uui-radio>
@@ -123,6 +129,26 @@ describe('UuiRadioGroup value', () => {
     radios[2].click();
     expect(element.value).to.equal(radios[2].value);
   });
+
+  it('name is propagated to radio children', () => {
+    expect(element.name).to.equal(radios[0].name);
+    expect(element.name).to.equal(radios[1].name);
+    expect(element.name).to.equal(radios[2].name);
+  });
+
+  it('disabled is propagated to radio children', () => {
+    expect(element.disabled).to.equal(radios[0].disabled);
+    expect(element.disabled).to.equal(radios[1].disabled);
+    expect(element.disabled).to.equal(radios[2].disabled);
+  });
+
+  it('disabled state on radio-group is reflected on radio children', async () => {
+    element.disabled = true;
+    await elementUpdated(element);
+    expect(element.disabled).to.equal(radios[0].disabled);
+    expect(element.disabled).to.equal(radios[1].disabled);
+    expect(element.disabled).to.equal(radios[2].disabled);
+  });
 });
 
 describe('UuiRadioGroup in a Form', () => {

packages/uui-radio/lib/uui-radio.element.ts

@@ -196,10 +196,9 @@ export class UUIRadioElement extends LitElement {
   set disabled(newVal) {
     const oldVal = this._disabled;
     this._disabled = newVal;
-    if (newVal) {
-      this.setAttribute('aria-hidden', 'true');
-      this.setAttribute('tabindex', '-1');
-    }
+
+    this.setAttribute('aria-hidden', newVal ? 'true' : 'false');
+    this.setAttribute('tabindex', newVal ? '-1' : '0');
     this.requestUpdate('disabled', oldVal);
   }
   private _disabled = false;

packages/uui-radio/lib/uui-radio.story.ts

@@ -124,7 +124,7 @@ RadioGroup.parameters = {
 </uui-radio-group>
 
 <uui-radio-group name="f331672b-e6f3-4b73-8b44-67a51a24f296">
-  <uui-radio      
+  <uui-radio
       value="Prolific - I live and breathe Umbraco."
       label="Prolific - I live and breathe Umbraco."
       >
@@ -159,7 +159,7 @@ RadioGroup.parameters = {
       label="Lapsed - I miss XSLT. It was all so much better before"
       >
   </uui-radio>
-  <uui-radio 
+  <uui-radio
       value="Other (Please state)"
       label="Other (Please state)"
       >
@@ -169,3 +169,15 @@ RadioGroup.parameters = {
     },
   },
 };
+
+export const DisabledGroup: Story = props => html`
+  <uui-radio-group .disabled=${props.disabled}>
+    <uui-radio value="1">one</uui-radio>
+    <uui-radio value="2" .checked=${props.checked}>two</uui-radio>
+    <uui-radio value="3">three</uui-radio>
+    <uui-radio value="4">fou2r</uui-radio>
+  </uui-radio-group>
+`;
+DisabledGroup.args = {
+  disabled: true,
+};