From 105bb08ee1ba2a03d546d62cbe18acb9f1c5e304 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 25 Aug 2022 09:37:20 -0400
Subject: [PATCH] fixes #872

---
 docs/resources/changelog.md           | 1 +
 src/components/tab-group/tab-group.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index f4b99163a..c29629cac 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -21,6 +21,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that caused concurrent animations to work incorrectly when the durations were different [#867](https://github.com/shoelace-style/shoelace/issues/867)
 - Fixed a bug in `<sl-color-picker>` that caused the trigger and color preview to ignore opacity on first render [#869](https://github.com/shoelace-style/shoelace/issues/869)
 - Fixed a bug in `<sl-tree>` that prevented the keyboard from working when the component was nested in a shadow root [#871](https://github.com/shoelace-style/shoelace/issues/871)
+- Fixed a bug in `<sl-tab-group>` that prevented the keyboard from working when the component was nested in a shadow root [#872](https://github.com/shoelace-style/shoelace/issues/872)
 - Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label
 - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `<sl-tree>` and `<sl-tree-item>` components
 - Improved RTL support for `<sl-image-comparer>`
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 297bbf1a3..03d43df54 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -174,11 +174,11 @@ export default class SlTabGroup extends ShoelaceElement {
 
     // Move focus left or right
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      const activeEl = document.activeElement;
+      const activeEl = this.tabs.find(t => t.matches(':focus'));
       const isRtl = this.localize.dir() === 'rtl';
 
       if (activeEl?.tagName.toLowerCase() === 'sl-tab') {
-        let index = this.tabs.indexOf(activeEl as SlTab);
+        let index = this.tabs.indexOf(activeEl);
 
         if (event.key === 'Home') {
           index = 0;