Feed tabs say what they are

Below xl every feed tab but the selected one was a lone icon with no name, for a screen reader or a finger. DTab takes
an AccessibleName, which DTabs renders as the tab's label and tooltip, and FeedTabs names each tab; on a phone every
tab shows its name too. The strip is marked as one that scrolls sideways (data-scroll-x), says it holds the feeds, and
on a phone fades at the edge where more tabs wait (edge-fade-x, a scroll-driven animation where the browser has one);
the selected tab is brought into view when it changes (window.revealActive). Explore's tabs get the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Pages/Explore.razor

@@ -14,8 +14,9 @@
 			<h1 class="font-bold truncate">@Localizer["Explore"]</h1>
 		</div>
 
-		<div class="overflow-x-auto flex-none">
-			<DTabs Active="(int)tab" ActiveChanged="SelectTab" Variant="DTabsVariant.Box" Size="DSize.Sm" ContentClass="hidden" class="flex-nowrap w-max">
+		<div @ref="strip" class="overflow-x-auto flex-none max-md:edge-fade-x" data-scroll-x>
+			<DTabs Active="(int)tab" ActiveChanged="SelectTab" Variant="DTabsVariant.Box" Size="DSize.Sm" ContentClass="hidden" class="flex-nowrap w-max"
+				   aria-label="@Localizer["Explore"]">
 				<DTab><Header><i class="ion-md-pricetag"></i> @Localizer["Hashtags"]</Header></DTab>
 				<DTab><Header><i class="ion-md-flame"></i> @Localizer["Popular posts"]</Header></DTab>
 				<DTab><Header><i class="ion-md-link"></i> @Localizer["Shared links"]</Header></DTab>
@@ -139,6 +140,17 @@
 </section>
 
 @code {
+	ElementReference strip;
+	int revealed = -1;
+
+	protected override void OnAfterRender(bool firstRender)
+	{
+		if ((int)tab == revealed)
+			return;
+		revealed = (int)tab;
+		CascadingState.Status.RevealActive(strip);
+	}
+
 	enum ExploreTab
 	{
 		Hashtags,