mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 01:31:11 -05:00
Enhance website accessibility and improve user interface elements
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
@@ -48,8 +48,8 @@ Features:
|
||||
|
||||
{% if park %}
|
||||
{% if view_mode == 'list' %}
|
||||
{# Enhanced List View Item with CloudFlare Images #}
|
||||
<article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] overflow-hidden {{ class }}">
|
||||
{# Enhanced List View Item with CloudFlare Images and Accessibility #}
|
||||
<article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] overflow-hidden {{ class }}" role="article" aria-labelledby="park-title-{{ park.id }}" aria-describedby="park-description-{{ park.id }}">
|
||||
<div class="p-4 sm:p-6">
|
||||
<div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
|
||||
{# Enhanced List View Image Section #}
|
||||
@@ -92,7 +92,7 @@ Features:
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# List View Status Badge Overlay #}
|
||||
{# List View Status Badge Overlay with Accessibility #}
|
||||
<div class="absolute top-1.5 right-1.5 sm:top-2 sm:right-2">
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full text-xs font-semibold border shrink-0 bg-white/95 backdrop-blur-sm shadow-sm
|
||||
{% if park.status == 'operating' or park.status == 'OPERATING' %}text-green-700 border-green-200
|
||||
@@ -102,9 +102,12 @@ Features:
|
||||
{% elif park.status == 'under_construction' or park.status == 'UNDER_CONSTRUCTION' %}text-blue-700 border-blue-200
|
||||
{% elif park.status == 'demolished' or park.status == 'DEMOLISHED' %}text-gray-700 border-gray-200
|
||||
{% elif park.status == 'relocated' or park.status == 'RELOCATED' %}text-purple-700 border-purple-200
|
||||
{% else %}text-gray-700 border-gray-200{% endif %}">
|
||||
<span class="hidden sm:inline">{{ park.get_status_display }}</span>
|
||||
<span class="sm:hidden">{{ park.get_status_display|truncatechars:3 }}</span>
|
||||
{% else %}text-gray-700 border-gray-200{% endif %}"
|
||||
role="img"
|
||||
aria-label="Park status: {{ park.get_status_display }}"
|
||||
title="Park status: {{ park.get_status_display }}">
|
||||
<span class="hidden sm:inline" aria-hidden="true">{{ park.get_status_display }}</span>
|
||||
<span class="sm:hidden" aria-hidden="true">{{ park.get_status_display|truncatechars:3 }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,9 +116,9 @@ Features:
|
||||
{# Enhanced Main Content Section with Better Mobile Layout #}
|
||||
<div class="flex-1 min-w-0 flex flex-col justify-between">
|
||||
<div class="space-y-2 sm:space-y-3">
|
||||
{# Enhanced Title with Better Mobile Typography #}
|
||||
{# Enhanced Title with Better Mobile Typography and Accessibility #}
|
||||
<div class="flex items-start justify-between">
|
||||
<h2 class="text-lg sm:text-xl lg:text-2xl font-bold line-clamp-2 leading-tight">
|
||||
<h3 id="park-title-{{ park.id }}" class="text-lg sm:text-xl lg:text-2xl font-bold line-clamp-2 leading-tight">
|
||||
{% if park.slug %}
|
||||
<a href="{% url 'parks:park_detail' park.slug %}"
|
||||
class="bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-400 dark:hover:to-purple-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-sm"
|
||||
@@ -127,7 +130,7 @@ Features:
|
||||
{{ park.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
</h3>
|
||||
|
||||
{# View Details Arrow for Mobile #}
|
||||
<div class="sm:hidden text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 ml-2 flex-shrink-0">
|
||||
@@ -147,9 +150,9 @@ Features:
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Enhanced Description #}
|
||||
{# Enhanced Description with Accessibility #}
|
||||
{% if park.description %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
|
||||
<p id="park-description-{{ park.id }}" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
|
||||
{{ park.description|truncatewords:30 }}
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -160,21 +163,27 @@ Features:
|
||||
<div class="flex items-center justify-between pt-3 border-t border-gray-200/50 dark:border-gray-600/50 mt-3">
|
||||
<div class="flex items-center space-x-3 sm:space-x-6 text-sm">
|
||||
{% if park.ride_count %}
|
||||
<div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50" title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50"
|
||||
role="img"
|
||||
aria-label="{{ park.ride_count }} ride{{ park.ride_count|pluralize }} available"
|
||||
title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
<span class="font-semibold text-blue-700 dark:text-blue-300">{{ park.ride_count }}</span>
|
||||
<span class="text-blue-600 dark:text-blue-400 hidden sm:inline">rides</span>
|
||||
<span class="font-semibold text-blue-700 dark:text-blue-300" aria-hidden="true">{{ park.ride_count }}</span>
|
||||
<span class="text-blue-600 dark:text-blue-400 hidden sm:inline" aria-hidden="true">rides</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.coaster_count %}
|
||||
<div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200/50 dark:border-purple-800/50" title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-purple-600 dark:text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200/50 dark:border-purple-800/50"
|
||||
role="img"
|
||||
aria-label="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }} available"
|
||||
title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-purple-600 dark:text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
<span class="font-semibold text-purple-700 dark:text-purple-300">{{ park.coaster_count }}</span>
|
||||
<span class="text-purple-600 dark:text-purple-400 hidden sm:inline">coasters</span>
|
||||
<span class="font-semibold text-purple-700 dark:text-purple-300" aria-hidden="true">{{ park.coaster_count }}</span>
|
||||
<span class="text-purple-600 dark:text-purple-400 hidden sm:inline" aria-hidden="true">coasters</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -201,8 +210,8 @@ Features:
|
||||
</div>
|
||||
</article>
|
||||
{% else %}
|
||||
{# Enhanced Grid View Item #}
|
||||
<article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1 overflow-hidden {{ class }}">
|
||||
{# Enhanced Grid View Item with Accessibility #}
|
||||
<article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1 overflow-hidden {{ class }}" role="article" aria-labelledby="park-title-grid-{{ park.id }}" aria-describedby="park-description-grid-{{ park.id }}">
|
||||
{# Enhanced Park Image with CloudFlare Images Integration #}
|
||||
<div class="relative aspect-[4/3] bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 overflow-hidden">
|
||||
{% if park.card_image.image or park.photos.first.image %}
|
||||
@@ -258,7 +267,7 @@ Features:
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Enhanced Status Badge Overlay with Better Mobile Touch Targets #}
|
||||
{# Enhanced Status Badge Overlay with Better Mobile Touch Targets and Accessibility #}
|
||||
<div class="absolute top-2 right-2 sm:top-3 sm:right-3">
|
||||
<span class="inline-flex items-center px-2 py-1 sm:px-2.5 sm:py-1 rounded-full text-xs font-semibold border shrink-0 bg-white/95 backdrop-blur-sm shadow-sm
|
||||
{% if park.status == 'operating' or park.status == 'OPERATING' %}text-green-700 border-green-200
|
||||
@@ -268,8 +277,11 @@ Features:
|
||||
{% elif park.status == 'under_construction' or park.status == 'UNDER_CONSTRUCTION' %}text-blue-700 border-blue-200
|
||||
{% elif park.status == 'demolished' or park.status == 'DEMOLISHED' %}text-gray-700 border-gray-200
|
||||
{% elif park.status == 'relocated' or park.status == 'RELOCATED' %}text-purple-700 border-purple-200
|
||||
{% else %}text-gray-700 border-gray-200{% endif %}">
|
||||
{{ park.get_status_display }}
|
||||
{% else %}text-gray-700 border-gray-200{% endif %}"
|
||||
role="img"
|
||||
aria-label="Park status: {{ park.get_status_display }}"
|
||||
title="Park status: {{ park.get_status_display }}">
|
||||
<span aria-hidden="true">{{ park.get_status_display }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -280,8 +292,8 @@ Features:
|
||||
{# Enhanced Content Area with Better Mobile Optimization #}
|
||||
<div class="p-4 sm:p-6">
|
||||
<div class="mb-3 sm:mb-4">
|
||||
{# Enhanced Title with Better Mobile Typography #}
|
||||
<h2 class="text-lg sm:text-xl font-bold line-clamp-2 mb-2 leading-tight">
|
||||
{# Enhanced Title with Better Mobile Typography and Accessibility #}
|
||||
<h3 id="park-title-grid-{{ park.id }}" class="text-lg sm:text-xl font-bold line-clamp-2 mb-2 leading-tight">
|
||||
{% if park.slug %}
|
||||
<a href="{% url 'parks:park_detail' park.slug %}"
|
||||
class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-sm"
|
||||
@@ -293,7 +305,7 @@ Features:
|
||||
{{ park.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{# Enhanced Operator Display with Better Mobile Layout #}
|
||||
@@ -306,9 +318,9 @@ Features:
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Enhanced Description with Better Mobile Readability #}
|
||||
{# Enhanced Description with Better Mobile Readability and Accessibility #}
|
||||
{% if park.description %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 mb-4 leading-relaxed">
|
||||
<p id="park-description-grid-{{ park.id }}" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 mb-4 leading-relaxed">
|
||||
{{ park.description|truncatewords:15 }}
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -318,21 +330,27 @@ Features:
|
||||
<div class="flex items-center justify-between pt-3 sm:pt-4 border-t border-gray-200/50 dark:border-gray-600/50">
|
||||
<div class="flex items-center space-x-3 sm:space-x-4 text-sm">
|
||||
{% if park.ride_count %}
|
||||
<div class="flex items-center space-x-1.5 text-blue-600 dark:text-blue-400" title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="flex items-center space-x-1.5 text-blue-600 dark:text-blue-400"
|
||||
role="img"
|
||||
aria-label="{{ park.ride_count }} ride{{ park.ride_count|pluralize }} available"
|
||||
title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
<span class="font-semibold">{{ park.ride_count }}</span>
|
||||
<span class="hidden sm:inline text-xs opacity-75">rides</span>
|
||||
<span class="font-semibold" aria-hidden="true">{{ park.ride_count }}</span>
|
||||
<span class="hidden sm:inline text-xs opacity-75" aria-hidden="true">rides</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.coaster_count %}
|
||||
<div class="flex items-center space-x-1.5 text-purple-600 dark:text-purple-400" title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="flex items-center space-x-1.5 text-purple-600 dark:text-purple-400"
|
||||
role="img"
|
||||
aria-label="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }} available"
|
||||
title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
<span class="font-semibold">{{ park.coaster_count }}</span>
|
||||
<span class="hidden sm:inline text-xs opacity-75">coasters</span>
|
||||
<span class="font-semibold" aria-hidden="true">{{ park.coaster_count }}</span>
|
||||
<span class="hidden sm:inline text-xs opacity-75" aria-hidden="true">coasters</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user