pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 09:51: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

57
templates/cotton/enhanced_search.html
View File

@@ -90,16 +90,17 @@ Features:
@click.away="open = false">
<div class="relative">
<!-- Search Icon -->
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<!-- Search Icon with ARIA -->
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" aria-hidden="true">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- Search Input -->
<!-- Search Input with Enhanced Accessibility -->
<input
x-ref="searchInput"
id="park-search"
type="text"
name="search"
x-model="search"
@@ -136,32 +137,40 @@ Features:
}
"
autocomplete="off"
role="combobox"
aria-expanded="false"
:aria-expanded="open"
aria-autocomplete="list"
aria-controls="search-suggestions"
aria-describedby="search-help-text search-live-region"
:aria-activedescendant="selectedIndex >= 0 ? `suggestion-${selectedIndex}` : null"
/>
<!-- Loading Spinner -->
<div id="search-spinner" class="absolute inset-y-0 right-0 pr-3 flex items-center htmx-indicator">
<svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
<!-- Loading Spinner with ARIA -->
<div id="search-spinner" class="absolute inset-y-0 right-0 pr-3 flex items-center htmx-indicator" aria-hidden="true">
<svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" aria-hidden="true">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<!-- Clear Button -->
<!-- Clear Button with Enhanced Accessibility -->
<button
x-show="search.length > 0"
@click="clearSearch()"
type="button"
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors htmx-indicator:hidden"
aria-label="Clear search"
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors htmx-indicator:hidden min-w-[44px] min-h-[44px] justify-center"
aria-label="Clear search input"
title="Clear search"
tabindex="0"
>
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Autocomplete Dropdown -->
<!-- Autocomplete Dropdown with ARIA -->
<div
x-show="open && suggestions.length > 0"
x-transition:enter="transition ease-out duration-100"
@@ -172,15 +181,22 @@ Features:
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700 max-h-60 overflow-y-auto"
style="display: none;"
role="listbox"
aria-label="Search suggestions"
id="search-suggestions"
>
<div class="py-1">
<template x-for="(suggestion, index) in suggestions" :key="index">
<button
type="button"
class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 flex items-center justify-between"
class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 flex items-center justify-between min-h-[44px] focus:outline-none focus:ring-2 focus:ring-blue-500"
:class="{ 'bg-gray-100 dark:bg-gray-700': selectedIndex === index }"
@click="selectSuggestion(suggestion)"
@mouseenter="selectedIndex = index"
role="option"
:id="`suggestion-${index}`"
:aria-selected="selectedIndex === index"
:aria-label="`Select ${suggestion.name || suggestion}${suggestion.type ? ' - ' + suggestion.type : ''}`"
>
<span x-text="suggestion.name || suggestion"></span>
<template x-if="suggestion.type">
@@ -229,4 +245,19 @@ Features:
</div>
{% endif %}
</div>
<!-- Screen Reader Support Elements -->
<div id="search-help-text" class="sr-only">
Type to search parks. Use arrow keys to navigate suggestions, Enter to select, or Escape to close.
</div>
<!-- Live Region for Screen Reader Announcements -->
<div id="search-live-region"
aria-live="polite"
aria-atomic="true"
class="sr-only"
x-text="open && suggestions.length > 0 ?
`${suggestions.length} suggestion${suggestions.length !== 1 ? 's' : ''} available. Use arrow keys to navigate.` :
(search.length >= 2 && !loading && suggestions.length === 0 ? 'No suggestions found.' : '')">
</div>
</div>