ghassan/takeone-youtube-clone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(filter-bar): rename 'New to You' to 'Recent', add aria-current

Browse Source 
- 'New to You' promised personalised recommendations the chip did not
  deliver — it was simply filter=latest, the newest videos regardless
  of viewer. Renamed to 'Recent' so the label matches the behaviour.
- Every active chip now carries aria-current='page' so a screen reader
  knows which filter is live without having to infer from the visual
  'active' class. role='navigation' + aria-label on the bar.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.7 committed 2026-10-21 10:07:44 +03:00
1 parent 4b21886cb9
commit 6b2a67c4cd
1 file changed
+22 -8
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/videos/index.blade.php
+22 -8
View File
@@ -59,21 +59,34 @@
<div class="yt-filter-bar-wrap"> <div class="yt-filter-bar-wrap">
<button type="button" class="yt-filter-nav left" aria-label="Scroll left" onclick="scrollFilterBar(-1)"><i class="bi bi-chevron-left"></i></button> <button type="button" class="yt-filter-nav left" aria-label="Scroll left" onclick="scrollFilterBar(-1)"><i class="bi bi-chevron-left"></i></button>
<button type="button" class="yt-filter-nav right" aria-label="Scroll right" onclick="scrollFilterBar(1)"><i class="bi bi-chevron-right"></i></button> <button type="button" class="yt-filter-nav right" aria-label="Scroll right" onclick="scrollFilterBar(1)"><i class="bi bi-chevron-right"></i></button>
<div class="yt-filter-bar"> <div class="yt-filter-bar" role="navigation" aria-label="Browse filters">
{{-- aria-current="page" on the active chip so assistive tech can read
the current filter. "New to You" was renamed to "Recent" — it was
just the latest filter, not a personalised recommendation, so the
old label overpromised. --}}
@php
$isAll = $activeFilter === 'all';
$isTrending = request()->is('trending');
$isMusic = $activeFilter === 'music';
$isMatch = $activeFilter === 'match';
$isShorts = request()->is('shorts');
$isPlaylists = $activeFilter === 'playlists';
$isRecent = $activeFilter === 'latest';
@endphp
<a href="{{ route('videos.index') }}" <a href="{{ route('videos.index') }}"
class="yt-chip {{ $activeFilter === 'all' ? 'active' : '' }}">All</a> class="yt-chip {{ $isAll ? 'active' : '' }}" @if($isAll) aria-current="page"@endif>All</a>
<a href="{{ route('videos.trending') }}" <a href="{{ route('videos.trending') }}"
class="yt-chip {{ request()->is('trending') ? 'active' : '' }}">Trending</a> class="yt-chip {{ $isTrending ? 'active' : '' }}" @if($isTrending) aria-current="page"@endif>Trending</a>
<a href="{{ route('videos.index', ['filter' => 'music']) }}" <a href="{{ route('videos.index', ['filter' => 'music']) }}"
class="yt-chip {{ $activeFilter === 'music' ? 'active' : '' }}">Music</a> class="yt-chip {{ $isMusic ? 'active' : '' }}" @if($isMusic) aria-current="page"@endif>Music</a>
<a href="{{ route('videos.index', ['filter' => 'match']) }}" <a href="{{ route('videos.index', ['filter' => 'match']) }}"
class="yt-chip {{ $activeFilter === 'match' ? 'active' : '' }}">Sports</a> class="yt-chip {{ $isMatch ? 'active' : '' }}" @if($isMatch) aria-current="page"@endif>Sports</a>
<a href="{{ route('videos.shorts') }}" <a href="{{ route('videos.shorts') }}"
class="yt-chip {{ request()->is('shorts') ? 'active' : '' }}">Shorts</a> class="yt-chip {{ $isShorts ? 'active' : '' }}" @if($isShorts) aria-current="page"@endif>Shorts</a>
<a href="{{ route('videos.index', ['filter' => 'playlists']) }}" <a href="{{ route('videos.index', ['filter' => 'playlists']) }}"
class="yt-chip {{ $activeFilter === 'playlists' ? 'active' : '' }}">Playlists</a> class="yt-chip {{ $isPlaylists ? 'active' : '' }}" @if($isPlaylists) aria-current="page"@endif>Playlists</a>
<a href="{{ route('videos.index', ['filter' => 'latest']) }}" <a href="{{ route('videos.index', ['filter' => 'latest']) }}"
class="yt-chip {{ $activeFilter === 'latest' ? 'active' : '' }}">New to You</a> class="yt-chip {{ $isRecent ? 'active' : '' }}" @if($isRecent) aria-current="page"@endif>Recent</a>
@if(!empty($langChips ?? [])) @if(!empty($langChips ?? []))
@php $activeLang = str_starts_with($activeFilter, 'lang:') ? substr($activeFilter, 5) : null; @endphp @php $activeLang = str_starts_with($activeFilter, 'lang:') ? substr($activeFilter, 5) : null; @endphp
@@ -81,6 +94,7 @@
@foreach($langChips as $chip) @foreach($langChips as $chip)
<a href="{{ route('videos.index', ['filter' => 'lang:' . $chip['code']]) }}" <a href="{{ route('videos.index', ['filter' => 'lang:' . $chip['code']]) }}"
class="yt-chip yt-chip-lang {{ $activeLang === $chip['code'] ? 'active' : '' }}" class="yt-chip yt-chip-lang {{ $activeLang === $chip['code'] ? 'active' : '' }}"
@if($activeLang === $chip['code']) aria-current="page"@endif
title="{{ $chip['name'] }} ({{ $chip['count'] }})"> title="{{ $chip['name'] }} ({{ $chip['count'] }})">
<span class="fi fi-{{ $chip['flag'] }}"></span> <span class="fi fi-{{ $chip['flag'] }}"></span>
<span>{{ $chip['name'] }}</span> <span>{{ $chip['name'] }}</span>