fix radio group tabbing

docs/resources/changelog.md

@@ -12,6 +12,7 @@ This release improves how component dependencies are imported. If you've been ch
 
 - Added "Reflects" column to the properties table
 - Dependencies are now automatically imported for all components
+- Fixed a bug where tabbing into `sl-radio-group` would not always focus the checked radio
 - Improved base path utility logic
 
 ## 2.0.0-beta.46

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

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
+import type SlRadio from '../radio/radio';
 import styles from './radio-group.styles';
 
 /**
@@ -17,12 +18,25 @@ import styles from './radio-group.styles';
 export default class SlRadioGroup extends LitElement {
   static styles = styles;
 
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
   /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
   @property() label = '';
 
   /** Hides the fieldset and legend that surrounds the radio group. The label will still be read by screen readers. */
   @property({ type: Boolean, attribute: 'no-fieldset' }) noFieldset = false;
 
+  handleFocusIn() {
+    // When focusing into the fieldset, make sure it lands on the checked radio
+    const checkedRadio = [...this.defaultSlot.assignedElements({ flatten: true })].find(
+      el => el.tagName.toLowerCase() === 'sl-radio' && (el as SlRadio).checked
+    ) as SlRadio;
+
+    if (checkedRadio) {
+      checkedRadio.focus();
+    }
+  }
+
   render() {
     return html`
       <fieldset
@@ -32,6 +46,7 @@ export default class SlRadioGroup extends LitElement {
           'radio-group--no-fieldset': this.noFieldset
         })}
         role="radiogroup"
+        @focusin=${this.handleFocusIn}
       >
         <legend part="label" class="radio-group__label">
           <slot name="label">${this.label}</slot>