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

feat(a11y,admin): skip link, aria-labels, Ready label, title + age fixes

Browse Source 
A11y:
- Skip-to-content link lands first in the body and jumps to #main
  past the header + sidebar for keyboard users.
- aria-label on the icon buttons that previously carried only an
  icon: hamburger menu (+ aria-controls="sidebar"), mobile search
  toggle, account menu (also drops the duplicate alt on the avatar
  since the button name already speaks the user's name).

Admin:
- Dashboard stat card renamed "Live Videos" → "Ready" (matches the
  DB status column; nothing on this card is actually live).

Settings:
- Duplicate "Prefer not to say" option on the Gender select — the
  empty placeholder shared the same label as the real option.
  Placeholder is now "Select…"; the real "Prefer not to say" option
  stays unchanged.
- Birthday picker caps the Year dropdown at (this year − 13) and
  the server-side register validation requires the same, so a
  client bypass can't let a <13 user through.

Titles:
- Admin layout uses "{Page} | TAKEONE" to match the frontend format
  (was "{Page} — TAKEONE"). User pages that said "| TAKEONE" literal
  now interpolate config('app.name'). Shorts and Welcome moved from
  " - " to " | " separator.

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:53:23 +03:00
1 parent 1b2377f20f
commit 7dd92aaeb2
12 files changed
+48 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/admin/dashboard.blade.php
+5 -2
View File
@@ -292,13 +292,16 @@
{{-- Ready Videos --}}
<div class="col-6 col-lg-4 col-xl-2">
<div class="stat-card clickable-card" onclick="openDashModal('Live Videos','videos',{status:'ready'},'bi-check-circle-fill')" title="Click to view live videos">
<div class="stat-card clickable-card" onclick="openDashModal('Ready','videos',{status:'ready'},'bi-check-circle-fill')" title="Click to view ready videos">
<div class="stat-card-accent" style="background: linear-gradient(90deg,#22c55e,#4ade80);"></div>
<div class="stat-card-top">
<div class="stat-icon" style="background:rgba(34,197,94,.15);color:#4ade80;"><i class="bi bi-check-circle-fill"></i></div>
</div>
<div class="stat-value">{{ number_format($videosByStatus->get('ready', 0)) }}</div>
<div class="stat-label">Live Videos</div>
{{-- "Ready" matches the DB status column; "Live Videos" was misleading
— nothing streams live from this card, it just counts videos that
finished processing successfully. --}}
<div class="stat-label">Ready</div>
@php $failPct = $stats['totalVideos'] > 0 ? round(($failedCount/$stats['totalVideos'])*100,1) : 0; @endphp
<div class="stat-growth {{ $failPct > 5 ? 'down' : 'flat' }}">
<i class="bi bi-x-circle"></i> {{ $failedCount }} failed
resources/views/auth/register.blade.php
+4 -1
View File
@@ -38,7 +38,10 @@
</div>
<div class="form-group">
<x-date-picker name="birthday" label="Date of Birth" :value="old('birthday')" required />
{{-- COPPA / platform minimum age: 13 at sign-up. maxYear caps
the year dropdown at (this year − 13). --}}
<x-date-picker name="birthday" label="Date of Birth" :value="old('birthday')"
:max-year="(int) date('Y') - 13" required />
</div>
<div class="form-group">
resources/views/layouts/app.blade.php
+14
View File
@@ -1218,6 +1218,20 @@
<script src="{{ asset('fp.js') }}" async></script>
</head>
<body class="{{ $bodyClass ?? '' }} {{ session('impersonator_id') ? 'has-impersonate-bar' : '' }}">
{{-- Skip link: keyboard users land here first and can jump straight to
the main content region, past the header + sidebar nav. Hidden
off-screen until focused. --}}
<a href="#main" class="skip-to-content">Skip to content</a>
<style>
.skip-to-content {
position: absolute; top: -40px; left: 8px;
padding: 8px 14px; z-index: 10000;
background: #ef4444; color: #fff; border-radius: 0 0 8px 8px;
text-decoration: none; font-weight: 600;
transition: top .15s ease;
}
.skip-to-content:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }
</style>
<!-- Header -->
@include('layouts.partials.header')
resources/views/layouts/partials/header.blade.php
+7 -6
View File
@@ -1,8 +1,8 @@
<!-- Header -->
<header class="yt-header">
<div class="yt-header-left">
<button class="yt-menu-btn" onclick="toggleSidebar()">
<i class="bi bi-list fs-5"></i>
<button class="yt-menu-btn" onclick="toggleSidebar()" aria-label="Toggle sidebar menu" aria-controls="sidebar">
<i class="bi bi-list fs-5" aria-hidden="true"></i>
</button>
<a href="{{ route('home') }}" class="yt-logo">
{{-- Two responsive logos. The visible one at a given viewport
@@ -25,8 +25,8 @@
<div class="yt-header-right">
<!-- Mobile search -->
<button type="button" class="yt-icon-btn d-md-none" onclick="toggleMobileSearch()">
<i class="bi bi-search"></i>
<button type="button" class="yt-icon-btn d-md-none" onclick="toggleMobileSearch()" aria-label="Open search">
<i class="bi bi-search" aria-hidden="true"></i>
</button>
@auth
@@ -60,9 +60,10 @@
<!-- User dropdown -->
<div class="yt-user-dropdown" id="headerUserDropdown">
<button class="yt-icon-btn" id="headerUserBtn"
onclick="toggleHeaderDropdown()" aria-expanded="false" aria-haspopup="true">
onclick="toggleHeaderDropdown()" aria-expanded="false" aria-haspopup="true"
aria-label="Account menu for {{ Auth::user()->name }}">
<img src="{{ Auth::user()->avatar_url }}"
class="yt-user-avatar" alt="{{ Auth::user()->name }}">
class="yt-user-avatar" alt="">
</button>
<div class="yt-user-panel" id="headerUserPanel" role="menu">
resources/views/user/channel.blade.php
+7 -1
View File
@@ -1205,7 +1205,13 @@ if ($oldLinks) {
<div class="ch-settings-field">
<label class="ch-settings-label">Gender</label>
<select name="gender" class="ch-settings-input" style="cursor:pointer;">
<option value="">Prefer not to say</option>
{{-- Empty value stands for "not chosen yet"
— different from the explicit "prefer not
to say" option. Previously both rendered
the same label, so users saw two
identical choices and the stats grouping
ambiguously bucketed one of them. --}}
<option value="">Select…</option>
<option value="male" {{ old('gender', $user->gender) === 'male' ? 'selected' : '' }}>Male</option>
<option value="female" {{ old('gender', $user->gender) === 'female' ? 'selected' : '' }}>Female</option>
<option value="prefer_not_to_say" {{ old('gender', $user->gender) === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
resources/views/user/history.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app')
@section('title', 'Watch History | TAKEONE')
@section('title', 'Watch History | ' . config('app.name'))
@section('extra_styles')
<style>
resources/views/user/liked.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app')
@section('title', 'Liked Videos | TAKEONE')
@section('title', 'Liked Videos | ' . config('app.name'))
@section('extra_styles')
<style>
resources/views/user/profile.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app')
@section('title', 'Profile | TAKEONE')
@section('title', 'Profile | ' . config('app.name'))
@section('extra_styles')
<style>
resources/views/user/settings.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app')
@section('title', 'Settings | TAKEONE')
@section('title', 'Settings | ' . config('app.name'))
@section('extra_styles')
<style>
resources/views/videos/shorts.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app')
@section('title', 'Shorts - ' . config('app.name'))
@section('title', 'Shorts | ' . config('app.name'))
@section('main_class', 'shorts-view-page')
resources/views/welcome.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app')
@section('title', 'Welcome - ' . config('app.name'))
@section('title', 'Welcome | ' . config('app.name'))
@section('content')
<div class="welcome-container">