fix(dialog): fire a change event when using arrow keys.

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 <input type="radio"> behavior.
+      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));
+
       break;
     }
   };

radio/radio_test.ts

@@ -138,6 +138,20 @@ describe('<md-radio>', () => {
       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);