From 3b29b3ab824f538f27e20310cb08786a92c7bd65 Mon Sep 17 00:00:00 2001
From: Oliver Speir
Date: Mon, 8 Apr 2024 07:47:34 -0600
Subject: Tab aria selected (#1723)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
---
 .changeset/late-onions-jog.md                 | 5 +++++
 packages/starlight/user-components/Tabs.astro | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/late-onions-jog.md

diff --git a/.changeset/late-onions-jog.md b/.changeset/late-onions-jog.md
new file mode 100644
index 00000000..360668ec
--- /dev/null
+++ b/.changeset/late-onions-jog.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes accessibility by using `aria-selected="false"` for inactive tabs instead of removing `aria-selected="true"` in the tablist of Starlight’s `<Tabs>` component
diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro
index 554be0e4..c163b2bd 100644
--- a/packages/starlight/user-components/Tabs.astro
+++ b/packages/starlight/user-components/Tabs.astro
@@ -17,7 +17,7 @@ const { html, panels } = processPanels(panelHtml);
 								role="tab"
 								href={'#' + panelId}
 								id={tabId}
-								aria-selected={idx === 0 && 'true'}
+								aria-selected={idx === 0 ? 'true' : 'false'}
 								tabindex={idx !== 0 ? -1 : 0}
 							>
 								{icon && <Icon name={icon} />}
@@ -61,7 +61,7 @@ const { html, panels } = processPanels(panelHtml);
 		color: var(--sl-color-gray-3);
 		outline-offset: var(--sl-outline-offset-inside);
 	}
-	.tab [role='tab'][aria-selected] {
+	.tab [role='tab'][aria-selected="true"] {
 		color: var(--sl-color-white);
 		border-color: var(--sl-color-text-accent);
 		font-weight: 600;
@@ -87,7 +87,7 @@ const { html, panels } = processPanels(panelHtml);
 				// Handle clicks for mouse users
 				tab.addEventListener('click', (e) => {
 					e.preventDefault();
-					const currentTab = tablist.querySelector('[aria-selected]');
+					const currentTab = tablist.querySelector('[aria-selected="true"]');
 					if (e.currentTarget !== currentTab) {
 						this.switchTab(e.currentTarget as HTMLAnchorElement, i);
 					}
@@ -122,7 +122,7 @@ const { html, panels } = processPanels(panelHtml);
 
 			// Mark all tabs as unselected and hide all tab panels.
 			this.tabs.forEach((tab) => {
-				tab.removeAttribute('aria-selected');
+				tab.setAttribute('aria-selected', 'false');
 				tab.setAttribute('tabindex', '-1');
 			});
 			this.panels.forEach((oldPanel) => {
-- 
cgit