gbanyan/usher-manage-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance UI and Accessibility (WCAG)

Browse Source 
- Add 'Skip to main content' links to App and Guest layouts.
- Add aria-current to navigation links for active page indication.
- Add aria-label to mobile menu button.
- Include pending UI updates for Dashboard and Welcome pages with improved structure.
This commit is contained in:
Gbanyan
2025-11-28 00:13:04 +08:00
parent 83602b1ed1
commit 86f22f2a76
14 changed files with 444 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/layouts/app.blade.php
View File

@@ -15,6 +15,9 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased bg-gray-50 text-slate-900 transition-colors duration-300 dark:bg-slate-900 dark:text-slate-100">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-white focus:text-black focus:outline-none focus:ring-2 focus:ring-indigo-500">
{{ __('Skip to main content') }}
</a>
<div class="min-h-screen">
@include('layouts.navigation')
@@ -28,7 +31,7 @@
@endif
<!-- Page Content -->
<main class="bg-gray-50 dark:bg-slate-900">
<main id="main-content" class="bg-gray-50 dark:bg-slate-900">
{{ $slot }}
</main>
</div>

5
resources/views/layouts/guest.blade.php
View File

@@ -15,6 +15,9 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans text-gray-900 antialiased">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-white focus:text-black focus:outline-none focus:ring-2 focus:ring-indigo-500">
{{ __('Skip to main content') }}
</a>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
<div>
<a href="/">
@@ -22,7 +25,7 @@
</a>
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
<div id="main-content" class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{{ $slot }}
</div>
</div>

6
resources/views/layouts/navigation.blade.php
View File

@@ -24,7 +24,7 @@
{{ __('Documents') }}
</x-nav-link>
@if(Auth::user() && (Auth::user()->is_admin || Auth::user()->hasRole('admin')))
@if(Auth::user())
<x-nav-link :href="route('admin.members.index')" :active="request()->routeIs('admin.members.*')">
{{ __('Admin: Members') }}
</x-nav-link>
@@ -113,7 +113,7 @@
<!-- Hamburger -->
<div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="{{ __('Main menu') }}">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -138,7 +138,7 @@
{{ __('Documents') }}
</x-responsive-nav-link>
@if(Auth::user() && (Auth::user()->is_admin || Auth::user()->hasRole('admin')))
@if(Auth::user())
<x-responsive-nav-link :href="route('admin.members.index')" :active="request()->routeIs('admin.members.*')">
{{ __('Admin: Members') }}
</x-responsive-nav-link>