diff --git a/radio/lib/single-selection-controller.ts b/radio/lib/single-selection-controller.ts
index b72566e787..0a697719f9 100644
--- a/radio/lib/single-selection-controller.ts
+++ b/radio/lib/single-selection-controller.ts
@@ -219,6 +219,10 @@ export class SingleSelectionController implements ReactiveController {
nextSibling.checked = true;
nextSibling.removeAttribute('tabindex');
nextSibling.focus();
+ // Fire a change event since the change is triggered by a user action.
+ // This matches native behavior.
+ nextSibling.dispatchEvent(new Event('change', {bubbles: true}));
+
break;
}
};
diff --git a/radio/radio_test.ts b/radio/radio_test.ts
index c895991f4c..4efe82b136 100644
--- a/radio/radio_test.ts
+++ b/radio/radio_test.ts
@@ -138,6 +138,20 @@ describe('', () => {
expect(a2.element.checked).withContext('prev radio checked').toBeFalse();
});
+ it('Using arrow right should fire a change event', async () => {
+ const {harnesses, root} = await setupTest(radioGroupPreSelected);
+ const changeHandler = jasmine.createSpy('changeHandler');
+ root.addEventListener('change', changeHandler);
+ const [, a2] = harnesses;
+ expect(a2.element.checked)
+ .withContext('default checked radio')
+ .toBeTrue();
+
+ await simulateKeyDown(a2.element, 'ArrowRight');
+
+ expect(changeHandler).toHaveBeenCalledTimes(1);
+ });
+
it('Using arrow right on the last radio should select the first radio in that group',
async () => {
const {harnesses} = await setupTest(radioGroupPreSelected);