Add ability to focus sl-radio-group dynamically

src/components/radio-group/radio-group.component.ts

@@ -191,17 +191,23 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     event.preventDefault();
   }
 
-  private handleLabelClick() {
+  private handleFocus(options?: FocusOptions) {
     const radios = this.getAllRadios();
     const checked = radios.find(radio => radio.checked);
-    const radioToFocus = checked || radios[0];
+    const firstEnabledRadio = radios.find(radio => !radio.disabled);
+    const radioToFocus = checked || firstEnabledRadio;
 
-    // Move focus to the checked radio (or the first one if none are checked) when clicking the label
+    // Call focus for the checked radio
+    // If no radio is checked, focus the first one that is not disabled
     if (radioToFocus) {
-      radioToFocus.focus();
+      radioToFocus.focus(options);
     }
   }
 
+  private handleLabelClick() {
+    this.handleFocus();
+  }
+
   private handleInvalid(event: Event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
@@ -325,6 +331,11 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     this.formControlController.updateValidity();
   }
 
+  /** Sets focus on the radio-group. */
+  focus(options?: FocusOptions) {
+    this.handleFocus(options);
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');

src/components/radio-group/radio-group.test.ts

@@ -300,6 +300,102 @@ describe('when a size is applied', () => {
   });
 });
 
+describe('when handling focus', () => {
+  const doAction = async (instance: SlRadioGroup, type: string) => {
+    if (type === 'focus') {
+      instance.focus();
+      await instance.updateComplete;
+      return;
+    }
+
+    const label = instance.shadowRoot!.querySelector<HTMLLabelElement>('#label')!;
+    label.click();
+    await instance.updateComplete;
+  };
+
+  // Tests for focus and label actions with radio buttons
+  ['focus', 'label'].forEach(actionType => {
+    describe(`when using ${actionType}`, () => {
+      it('should do nothing if all elements are disabled', async () => {
+        const el = await fixture<SlRadioGroup>(html`
+          <sl-radio-group>
+            <sl-radio id="radio-0" value="0" disabled></sl-radio>
+            <sl-radio id="radio-1" value="1" disabled></sl-radio>
+            <sl-radio id="radio-2" value="2" disabled></sl-radio>
+            <sl-radio id="radio-3" value="3" disabled></sl-radio>
+          </sl-radio-group>
+        `);
+
+        const validFocusHandler = sinon.spy();
+
+        Array.from(el.querySelectorAll<SlRadio>('sl-radio')).forEach(radio =>
+          radio.addEventListener('sl-focus', validFocusHandler)
+        );
+
+        expect(validFocusHandler).to.not.have.been.called;
+        await doAction(el, actionType);
+        expect(validFocusHandler).to.not.have.been.called;
+      });
+
+      it('should focus the first radio that is enabled when the group receives focus', async () => {
+        const el = await fixture<SlRadioGroup>(html`
+          <sl-radio-group>
+            <sl-radio id="radio-0" value="0" disabled></sl-radio>
+            <sl-radio id="radio-1" value="1"></sl-radio>
+            <sl-radio id="radio-2" value="2"></sl-radio>
+            <sl-radio id="radio-3" value="3"></sl-radio>
+          </sl-radio-group>
+        `);
+
+        const invalidFocusHandler = sinon.spy();
+        const validFocusHandler = sinon.spy();
+
+        const disabledRadio = el.querySelector('#radio-0')!;
+        const validRadio = el.querySelector('#radio-1')!;
+
+        disabledRadio.addEventListener('sl-focus', invalidFocusHandler);
+        validRadio.addEventListener('sl-focus', validFocusHandler);
+
+        expect(invalidFocusHandler).to.not.have.been.called;
+        expect(validFocusHandler).to.not.have.been.called;
+
+        await doAction(el, actionType);
+
+        expect(invalidFocusHandler).to.not.have.been.called;
+        expect(validFocusHandler).to.have.been.called;
+      });
+
+      it('should focus the currently enabled radio when the group receives focus', async () => {
+        const el = await fixture<SlRadioGroup>(html`
+          <sl-radio-group value="2">
+            <sl-radio id="radio-0" value="0" disabled></sl-radio>
+            <sl-radio id="radio-1" value="1"></sl-radio>
+            <sl-radio id="radio-2" value="2" checked></sl-radio>
+            <sl-radio id="radio-3" value="3"></sl-radio>
+          </sl-radio-group>
+        `);
+
+        const invalidFocusHandler = sinon.spy();
+        const validFocusHandler = sinon.spy();
+
+        const disabledRadio = el.querySelector('#radio-0')!;
+        const validRadio = el.querySelector('#radio-2')!;
+
+        disabledRadio.addEventListener('sl-focus', invalidFocusHandler);
+        validRadio.addEventListener('sl-focus', validFocusHandler);
+
+        expect(invalidFocusHandler).to.not.have.been.called;
+        expect(validFocusHandler).to.not.have.been.called;
+
+        await doAction(el, actionType);
+
+        expect(invalidFocusHandler).to.not.have.been.called;
+        expect(validFocusHandler).to.have.been.called;
+      });
+    });
+  });
+});
+
 describe('when the value changes', () => {
   it('should emit sl-change when toggled with the arrow keys', async () => {
     const radioGroup = await fixture<SlRadioGroup>(html`