pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 10:31:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enhance website accessibility and improve user interface elements

Browse Source 
Introduce ARIA attributes, improve focus management, and refine UI element styling for better accessibility and user experience across the application.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
2025-09-23 22:25:16 +00:00
parent d978217577
commit 6391b3d81c
9 changed files with 189 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
templates/parks/park_list.html
View File

@@ -5,46 +5,57 @@
{% block title %}Parks{% endblock %}
{% block content %}
{# Enhanced Mobile-First Container with Better Spacing #}
{# Skip Navigation Links for Keyboard Users #}
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
Skip to main content
</a>
<a href="#search-form" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-32 z-50 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
Skip to search
</a>
{# Enhanced Mobile-First Container with Better Spacing and Landmarks #}
<div class="container mx-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6" x-data="parkListState()">
{# Enhanced Mobile-First Header Section #}
<div class="mb-6 sm:mb-8">
<header class="mb-6 sm:mb-8" aria-labelledby="page-title">
<div class="flex flex-col gap-4 sm:gap-6">
{# Enhanced Mobile-First Title Section #}
{# Enhanced Mobile-First Title Section with Proper Heading #}
<div class="text-center sm:text-left">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight">
<h1 id="page-title" class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight">
Theme Parks
</h1>
<p class="mt-1 sm:mt-2 text-base sm:text-lg text-gray-600 dark:text-gray-400">
<p class="mt-1 sm:mt-2 text-base sm:text-lg text-gray-600 dark:text-gray-400" id="page-description">
Discover amazing theme parks around the world
</p>
</div>
{# Enhanced Mobile-First Quick Stats with Better Touch Targets #}
<div class="grid grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
<div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white">{{ filter_counts.total_parks|default:0 }}</div>
{# Enhanced Mobile-First Quick Stats with Better Touch Targets and Landmarks #}
<section aria-labelledby="park-statistics" class="grid grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
<h2 id="park-statistics" class="sr-only">Park Statistics Summary</h2>
<div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50" role="img" aria-labelledby="total-parks-stat" tabindex="0">
<div id="total-parks-stat" class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white" aria-label="{{ filter_counts.total_parks|default:0 }} total parks in database">{{ filter_counts.total_parks|default:0 }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Total Parks</div>
</div>
<div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white">{{ filter_counts.operating_parks|default:0 }}</div>
<div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50" role="img" aria-labelledby="operating-parks-stat" tabindex="0">
<div id="operating-parks-stat" class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white" aria-label="{{ filter_counts.operating_parks|default:0 }} currently operating parks">{{ filter_counts.operating_parks|default:0 }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Operating</div>
</div>
<div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white">{{ filter_counts.parks_with_coasters|default:0 }}</div>
<div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50" role="img" aria-labelledby="coaster-parks-stat" tabindex="0">
<div id="coaster-parks-stat" class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white" aria-label="{{ filter_counts.parks_with_coasters|default:0 }} parks with roller coasters">{{ filter_counts.parks_with_coasters|default:0 }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">With Coasters</div>
</div>
</div>
</section>
</div>
</div>
</header>
{# Enhanced Mobile-First Search and Filter Bar #}
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6 mb-6 sm:mb-8">
{# Enhanced Mobile-First Search and Filter Bar with Proper Landmarks #}
<section class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6 mb-6 sm:mb-8" aria-labelledby="search-filters-heading" role="search">
<h2 id="search-filters-heading" class="sr-only">Search and Filter Parks</h2>
<div class="space-y-4 sm:space-y-6">
{# Enhanced Mobile-First Main Search Row #}
<div class="space-y-3 sm:space-y-0 sm:flex sm:flex-col lg:flex-row gap-4">
{# Enhanced Search Input with Better Mobile UX #}
<div class="flex-1">
{# Enhanced Search Input with Better Mobile UX and Form Landmark #}
<div class="flex-1" id="search-form">
<label for="park-search" class="sr-only">Search parks by name, location, or features</label>
<c-enhanced_search
placeholder="Search parks by name, location, or features..."
current_value="{{ search_query }}"
@@ -53,8 +64,8 @@
/>
</div>
{# Enhanced Mobile-First Controls Row with Better Touch Targets #}
<div class="flex items-center justify-between sm:justify-start gap-2 sm:gap-3">
{# Enhanced Mobile-First Controls Row with Better Touch Targets and Navigation #}
<nav class="flex items-center justify-between sm:justify-start gap-2 sm:gap-3" aria-label="View and sort controls">
{# Sort Controls with Mobile Optimization #}
<div class="flex-1 sm:flex-none min-w-0">
<c-sort_controls
@@ -88,7 +99,7 @@
<span class="ml-1 sm:ml-2 hidden sm:inline">Filters</span>
<span class="sr-only sm:hidden" x-text="showFilters ? 'Hide filters' : 'Show filters'"></span>
</button>
</div>
</nav>
</div>
{# Enhanced Mobile-First Advanced Filters with Better Touch Interaction #}