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

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

No files matched your search

@@ -32,7 +32,11 @@ class RegisteredUserController extends Controller
'name' => ['required', 'string', 'max:255', new ReservedIdentifier('name')], 'name' => ['required', 'string', 'max:255', new ReservedIdentifier('name')],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users', new NotDisposableEmail, new ReservedIdentifier('email')], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users', new NotDisposableEmail, new ReservedIdentifier('email')],
'password' => ['required', 'confirmed', Password::defaults()], 'password' => ['required', 'confirmed', Password::defaults()],
'birthday' => ['required', 'date', 'before:today'], // Age gate: must be at least 13 on sign-up day. The front-end
// date picker already caps the year dropdown, but the server
// must enforce it so a client bypass doesn't let a 10-year-old
// through.
'birthday' => ['required', 'date', 'before:' . now()->subYears(13)->toDateString()],
'gender' => ['required', 'in:male,female'], 'gender' => ['required', 'in:male,female'],
'nationality' => ['required', 'string', 'size:2'], 'nationality' => ['required', 'string', 'size:2'],
]); ]);
+5 -2
View File
@@ -292,13 +292,16 @@
{{-- Ready Videos --}} {{-- Ready Videos --}}
<div class="col-6 col-lg-4 col-xl-2"> <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-accent" style="background: linear-gradient(90deg,#22c55e,#4ade80);"></div>
<div class="stat-card-top"> <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 class="stat-icon" style="background:rgba(34,197,94,.15);color:#4ade80;"><i class="bi bi-check-circle-fill"></i></div>
</div> </div>
<div class="stat-value">{{ number_format($videosByStatus->get('ready', 0)) }}</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 @php $failPct = $stats['totalVideos'] > 0 ? round(($failedCount/$stats['totalVideos'])*100,1) : 0; @endphp
<div class="stat-growth {{ $failPct > 5 ? 'down' : 'flat' }}"> <div class="stat-growth {{ $failPct > 5 ? 'down' : 'flat' }}">
<i class="bi bi-x-circle"></i> {{ $failedCount }} failed <i class="bi bi-x-circle"></i> {{ $failedCount }} failed
+4 -1
View File
@@ -38,7 +38,10 @@
</div> </div>
<div class="form-group"> <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>
<div class="form-group"> <div class="form-group">
+14
View File
@@ -1218,6 +1218,20 @@
<script src="{{ asset('fp.js') }}" async></script> <script src="{{ asset('fp.js') }}" async></script>
</head> </head>
<body class="{{ $bodyClass ?? '' }} {{ session('impersonator_id') ? 'has-impersonate-bar' : '' }}"> <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 --> <!-- Header -->
@include('layouts.partials.header') @include('layouts.partials.header')
@@ -1,8 +1,8 @@
<!-- Header --> <!-- Header -->
<header class="yt-header"> <header class="yt-header">
<div class="yt-header-left"> <div class="yt-header-left">
<button class="yt-menu-btn" onclick="toggleSidebar()"> <button class="yt-menu-btn" onclick="toggleSidebar()" aria-label="Toggle sidebar menu" aria-controls="sidebar">
<i class="bi bi-list fs-5"></i> <i class="bi bi-list fs-5" aria-hidden="true"></i>
</button> </button>
<a href="{{ route('home') }}" class="yt-logo"> <a href="{{ route('home') }}" class="yt-logo">
{{-- Two responsive logos. The visible one at a given viewport {{-- Two responsive logos. The visible one at a given viewport
@@ -25,8 +25,8 @@
<div class="yt-header-right"> <div class="yt-header-right">
<!-- Mobile search --> <!-- Mobile search -->
<button type="button" class="yt-icon-btn d-md-none" onclick="toggleMobileSearch()"> <button type="button" class="yt-icon-btn d-md-none" onclick="toggleMobileSearch()" aria-label="Open search">
<i class="bi bi-search"></i> <i class="bi bi-search" aria-hidden="true"></i>
</button> </button>
@auth @auth
@@ -60,9 +60,10 @@
<!-- User dropdown --> <!-- User dropdown -->
<div class="yt-user-dropdown" id="headerUserDropdown"> <div class="yt-user-dropdown" id="headerUserDropdown">
<button class="yt-icon-btn" id="headerUserBtn" <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 }}" <img src="{{ Auth::user()->avatar_url }}"
class="yt-user-avatar" alt="{{ Auth::user()->name }}"> class="yt-user-avatar" alt="">
</button> </button>
<div class="yt-user-panel" id="headerUserPanel" role="menu"> <div class="yt-user-panel" id="headerUserPanel" role="menu">
+7 -1
View File
@@ -1205,7 +1205,13 @@ if ($oldLinks) {
<div class="ch-settings-field"> <div class="ch-settings-field">
<label class="ch-settings-label">Gender</label> <label class="ch-settings-label">Gender</label>
<select name="gender" class="ch-settings-input" style="cursor:pointer;"> <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="male" {{ old('gender', $user->gender) === 'male' ? 'selected' : '' }}>Male</option>
<option value="female" {{ old('gender', $user->gender) === 'female' ? 'selected' : '' }}>Female</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> <option value="prefer_not_to_say" {{ old('gender', $user->gender) === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Watch History | TAKEONE') @section('title', 'Watch History | ' . config('app.name'))
@section('extra_styles') @section('extra_styles')
<style> <style>
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Liked Videos | TAKEONE') @section('title', 'Liked Videos | ' . config('app.name'))
@section('extra_styles') @section('extra_styles')
<style> <style>
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Profile | TAKEONE') @section('title', 'Profile | ' . config('app.name'))
@section('extra_styles') @section('extra_styles')
<style> <style>
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Settings | TAKEONE') @section('title', 'Settings | ' . config('app.name'))
@section('extra_styles') @section('extra_styles')
<style> <style>
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Shorts - ' . config('app.name')) @section('title', 'Shorts | ' . config('app.name'))
@section('main_class', 'shorts-view-page') @section('main_class', 'shorts-view-page')
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Welcome - ' . config('app.name')) @section('title', 'Welcome | ' . config('app.name'))
@section('content') @section('content')
<div class="welcome-container"> <div class="welcome-container">