Enhance UI and Accessibility (WCAG)

- 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:
2025-11-28 00:13:04 +08:00
parent 83602b1ed1
commit 86f22f2a76
14 changed files with 444 additions and 196 deletions

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>