Convert invalid <div> child of <summary> to <span> (#3422)

Co-authored-by: Chris Swithinbank <[email protected]>

Author: andersk

.changeset/smart-rocks-battle.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Refactors collapsible sidebar sections and “on this page” dropdown to use `<span>` instead of `<div>`

packages/starlight/components/MobileTableOfContents.astro

@@ -11,10 +11,10 @@ const { toc } = Astro.locals.starlightRoute;
 			<nav aria-labelledby="starlight__on-this-page--mobile">
 				<details id="starlight__mobile-toc">
 					<summary id="starlight__on-this-page--mobile" class="sl-flex">
-						<div class="toggle sl-flex">
+						<span class="toggle sl-flex">
 							{Astro.locals.t('tableOfContents.onThisPage')}
 							<Icon name={'right-caret'} class="caret" size="1rem" />
-						</div>
+						</span>
 						<span class="display-current" />
 					</summary>
 					<div class="dropdown">

packages/starlight/components/SidebarSublist.astro

@@ -39,7 +39,7 @@ const { sublist, nested } = Astro.props;
 					>
 						<SidebarRestorePoint />
 						<summary>
-							<div class="group-label">
+							<span class="group-label">
 								<span class="large">{entry.label}</span>
 								{entry.badge && (
 									<Badge
@@ -48,7 +48,7 @@ const { sublist, nested } = Astro.props;
 										text={entry.badge.text}
 									/>
 								)}
-							</div>
+							</span>
 							<Icon name="right-caret" class="caret" size="1.25rem" />
 						</summary>
 						<Astro.self sublist={entry.entries} nested />