resources/views/livewire/articles.blade.php

@@ -44,7 +44,7 @@ class="whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm {{ $tab === 'a
             <select
                 wire:model.live="feedId"
                 aria-label="Filter by feed"
-                class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                class="w-56 shrink-0 pl-3 pr-10 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             >
                 <option value="">All feeds</option>
                 @foreach ($feedOptions as $feedOption)
@@ -86,7 +86,9 @@ class="inline-flex items-center px-3 py-2 border border-transparent text-sm lead
                         wire:click="toggleFeed({{ $group->feed->id }})"
                         type="button"
                         class="w-full flex items-center gap-x-3 px-5 py-4 text-left hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                        id="feed-toggle-{{ $group->feed->id }}"
                         aria-expanded="{{ $isExpanded ? 'true' : 'false' }}"
+                        aria-controls="feed-panel-{{ $group->feed->id }}"
                     >
                         <svg
                             class="h-4 w-4 shrink-0 text-gray-400 transition-transform {{ $isExpanded ? 'rotate-90' : '' }}"
@@ -101,7 +103,12 @@ class="h-4 w-4 shrink-0 text-gray-400 transition-transform {{ $isExpanded ? 'rot
                         </span>
                     </button>
                     @if ($isExpanded)
-                        <div class="border-t border-gray-100 bg-gray-50 p-4 space-y-4">
+                        <div
+                            class="border-t border-gray-100 bg-gray-50 p-4 space-y-4"
+                            id="feed-panel-{{ $group->feed->id }}"
+                            role="region"
+                            aria-labelledby="feed-toggle-{{ $group->feed->id }}"
+                        >
                             @foreach ($group->routeArticles as $routeArticle)
                                 <x-route-article-card :route-article="$routeArticle" :tab="$tab" />
                             @endforeach

tests/Feature/Livewire/ArticlesTest.php

@@ -274,6 +274,28 @@ public function test_shows_route_name_in_listing(): void
             ->assertSee('VRT News');
     }
 
+    public function test_route_eyebrow_renders_above_the_headline(): void
+    {
+        $feed = Feed::factory()->create(['name' => 'VRT News']);
+
+        $this->createRouteArticleForFeed($feed, 'The Headline');
+
+        Livewire::test(Articles::class)
+            ->call('toggleFeed', $feed->id)
+            ->assertSeeInOrder(['Routed from VRT News to', 'The Headline']);
+    }
+
+    public function test_route_eyebrow_shows_the_feed_colour_dot(): void
+    {
+        $feed = Feed::factory()->create(['name' => 'VRT News']);
+
+        $this->createRouteArticleForFeed($feed, 'The Headline');
+
+        Livewire::test(Articles::class)
+            ->call('toggleFeed', $feed->id)
+            ->assertSeeHtml($feed->displayColor()->dotClass());
+    }
+
     public function test_pending_tab_lists_feeds_collapsed_without_articles(): void
     {
         $vrt = Feed::factory()->create(['name' => 'VRT News']);