Merge branch 'next' of https://github.com/kanoni4567/shoelace into kanoni4567-next

src/components/radio/radio.test.ts

@@ -3,6 +3,7 @@ import { sendKeys } from '@web/test-runner-commands';
 
 import '../../../dist/shoelace.js';
 import type SlRadio from './radio';
+import type SlRadioGroup from '../radio-group/radio-group';
 
 describe('<sl-radio>', () => {
   it('should be disabled with the disabled attribute', async () => {
@@ -26,7 +27,7 @@ describe('<sl-radio>', () => {
     expect(el.checked).to.be.true;
   });
 
-  it('should fire sl-change when toggled via keyboard', async () => {
+  it('should fire sl-change when toggled via keyboard - space', async () => {
     const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
     const input = el.shadowRoot?.querySelector('input');
     input.focus();
@@ -36,6 +37,23 @@ describe('<sl-radio>', () => {
     expect(el.checked).to.be.true;
   });
 
+  it('should fire sl-change when toggled via keyboard - arrow key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1"></sl-radio>
+        <sl-radio id="radio-2"></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+    const input1 = radio1.shadowRoot?.querySelector('input');
+    input1.focus();
+    setTimeout(() => sendKeys({ press: 'ArrowRight' }));
+    const event = await oneEvent(radio2, 'sl-change');
+    expect(event.target).to.equal(radio2);
+    expect(radio2.checked).to.be.true;
+  });
+
   it('should not fire sl-change when checked is set by javascript', async () => {
     const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
     el.addEventListener('sl-change', () => expect.fail('event fired'));

src/components/radio/radio.ts

@@ -136,6 +136,7 @@ export default class SlRadio extends LitElement {
       this.getAllRadios().map(radio => (radio.checked = false));
       radios[index].focus();
       radios[index].checked = true;
+      emit(radios[index], 'sl-change');
 
       event.preventDefault();
     }