From b98e1f6b2060dd709b01f2065a63723cdf8515c4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 12 Jul 2021 10:48:38 -0400
Subject: [PATCH] fix radio group tabbing

---
 docs/resources/changelog.md               |  1 +
 src/components/radio-group/radio-group.ts | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 448ab5a90..b2218df9a 100644
--- a/docs/resources/changelog.md
+++ b/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
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 83ef875a0..2d82e853f 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/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>