113 - Cover route eyebrow ordering and fix accordion labelling and filter width

This commit is contained in:
myrmidex 2026-08-09 13:14:17 +02:00
parent 36b46b4d2e
commit 798ddf9862
2 changed files with 31 additions and 2 deletions

View file

@ -44,7 +44,7 @@ class="whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm {{ $tab === 'a
<select <select
wire:model.live="feedId" wire:model.live="feedId"
aria-label="Filter by feed" 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> <option value="">All feeds</option>
@foreach ($feedOptions as $feedOption) @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 }})" wire:click="toggleFeed({{ $group->feed->id }})"
type="button" 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" 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-expanded="{{ $isExpanded ? 'true' : 'false' }}"
aria-controls="feed-panel-{{ $group->feed->id }}"
> >
<svg <svg
class="h-4 w-4 shrink-0 text-gray-400 transition-transform {{ $isExpanded ? 'rotate-90' : '' }}" 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> </span>
</button> </button>
@if ($isExpanded) @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) @foreach ($group->routeArticles as $routeArticle)
<x-route-article-card :route-article="$routeArticle" :tab="$tab" /> <x-route-article-card :route-article="$routeArticle" :tab="$tab" />
@endforeach @endforeach

View file

@ -274,6 +274,28 @@ public function test_shows_route_name_in_listing(): void
->assertSee('VRT News'); ->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 public function test_pending_tab_lists_feeds_collapsed_without_articles(): void
{ {
$vrt = Feed::factory()->create(['name' => 'VRT News']); $vrt = Feed::factory()->create(['name' => 'VRT News']);