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:
1 parent
1b2377f20f
commit
7dd92aaeb2
12 files changed
+48
-17
No files matched your search
@@ -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')
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user