naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

complete story 9.10 with qa tests

Browse Source
This commit is contained in:
Naser Mansour
2026-01-03 02:50:16 +02:00
parent 9228921669
commit c96f31c702
12 changed files with 525 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+29
View File
@@ -702,3 +702,32 @@ img, video, iframe {
@apply text-lg sm:text-xl;
@apply font-semibold;
}
/* ==========================================================================
Accessibility Styles (Story 9.10)
WCAG 2.1 AA Compliance
========================================================================== */
/* Focus styles - visible gold outline for keyboard navigation */
:focus-visible {
@apply outline-2 outline-offset-2 outline-gold;
}
/* Skip link - hidden until focused, then appears at top-start */
.skip-link {
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md
focus:font-semibold focus:z-[100];
}
/* Reduced motion - respect user preference for reduced animations */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
resources/views/components/layouts/app/sidebar.blade.php
+8 -1
View File
@@ -4,6 +4,11 @@
@include('partials.head')
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<!-- Skip to content link for keyboard accessibility -->
<a href="#main-content" class="skip-link" data-test="skip-to-content">
{{ __('accessibility.skip_to_content') }}
</a>
<flux:sidebar sticky stashable class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
@@ -320,7 +325,9 @@
</flux:dropdown>
</flux:header>
{{ $slot }}
<main id="main-content" role="main" tabindex="-1">
{{ $slot }}
</main>
@fluxScripts
</body>
resources/views/components/layouts/auth/card.blade.php
+7 -2
View File
@@ -4,12 +4,17 @@
@include('partials.head')
</head>
<body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<!-- Skip to content link for keyboard accessibility -->
<a href="#main-content" class="skip-link" data-test="skip-to-content">
{{ __('accessibility.skip_to_content') }}
</a>
<!-- Language Toggle -->
<div class="absolute end-4 top-4">
<x-language-toggle />
</div>
<div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<main id="main-content" role="main" tabindex="-1" class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-md flex-col gap-6">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 items-center justify-center rounded-md">
@@ -25,7 +30,7 @@
</div>
</div>
</div>
</div>
</main>
@fluxScripts
</body>
</html>
resources/views/components/layouts/auth/simple.blade.php
+7 -2
View File
@@ -4,12 +4,17 @@
@include('partials.head')
</head>
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<!-- Skip to content link for keyboard accessibility -->
<a href="#main-content" class="skip-link" data-test="skip-to-content">
{{ __('accessibility.skip_to_content') }}
</a>
<!-- Language Toggle -->
<div class="absolute end-4 top-4">
<x-language-toggle />
</div>
<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<main id="main-content" role="main" tabindex="-1" class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-sm flex-col gap-2">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
@@ -21,7 +26,7 @@
{{ $slot }}
</div>
</div>
</div>
</main>
@fluxScripts
</body>
</html>
resources/views/components/layouts/auth/split.blade.php
+7 -2
View File
@@ -4,12 +4,17 @@
@include('partials.head')
</head>
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<!-- Skip to content link for keyboard accessibility -->
<a href="#main-content" class="skip-link" data-test="skip-to-content">
{{ __('accessibility.skip_to_content') }}
</a>
<!-- Language Toggle -->
<div class="absolute end-4 top-4 z-50">
<x-language-toggle />
</div>
<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
<main id="main-content" role="main" tabindex="-1" class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
<div class="absolute inset-0 bg-neutral-900"></div>
<a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
@@ -42,7 +47,7 @@
{{ $slot }}
</div>
</div>
</div>
</main>
@fluxScripts
</body>
</html>
resources/views/components/layouts/public.blade.php
+3 -7
View File
@@ -5,12 +5,8 @@
</head>
<body class="min-h-screen flex flex-col bg-cream" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<!-- Skip to content link for keyboard accessibility -->
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-[100] focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md focus:font-semibold"
data-test="skip-to-content"
>
{{ __('Skip to content') }}
<a href="#main-content" class="skip-link" data-test="skip-to-content">
{{ __('accessibility.skip_to_content') }}
</a>
<x-navigation />
@@ -18,7 +14,7 @@
<!-- Spacer for fixed navigation -->
<div class="h-16"></div>
<main id="main-content" class="flex-1" tabindex="-1">
<main id="main-content" role="main" class="flex-1" tabindex="-1">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
{{ $slot }}
</div>