From 12c438f99c3c2fbedf6a9f727bbdd37a7a581a9f Mon Sep 17 00:00:00 2001
From: Chris Oliver <excid3@gmail.com>
Date: Fri, 15 Mar 2024 14:10:15 -0500
Subject: [PATCH] Set aria-selected="true" on tabs and scroll active tab into
 view Closes #125

Co-Authored-By: Georg Ledermann <georg@ledermann.dev>
---
 src/tabs.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/tabs.js b/src/tabs.js
index 0f23b5e..f315e98 100644
--- a/src/tabs.js
+++ b/src/tabs.js
@@ -77,10 +77,12 @@ export default class extends Controller {
 
       if (index === this.indexValue) {
         panel.classList.remove('hidden')
+        tab.ariaSelected = 'true'
         if (this.hasInactiveTabClass) tab?.classList?.remove(...this.inactiveTabClasses)
         if (this.hasActiveTabClass) tab?.classList?.add(...this.activeTabClasses)
       } else {
         panel.classList.add('hidden')
+        tab.ariaSelected = null
         if (this.hasActiveTabClass) tab?.classList?.remove(...this.activeTabClasses)
         if (this.hasInactiveTabClass) tab?.classList?.add(...this.inactiveTabClasses)
       }
@@ -89,6 +91,18 @@ export default class extends Controller {
     if (this.hasSelectTarget) {
       this.selectTarget.selectedIndex = this.indexValue
     }
+
+    this.scrollActiveTabIntoView()
+  }
+
+  // If tabs have horizontal scrolling, the active tab may be out of sight.
+  // Make sure the active tab is visible by scrolling it into the view.
+  scrollActiveTabIntoView() {
+    const activeTab = this.element.querySelector('[aria-selected]');
+    if (activeTab)
+      activeTab.scrollIntoView({
+        inline: 'center',
+      });
   }
 
   get tabsCount() {