Fix select element accessibility labels on tools page

Add proper label associations with for/id attributes to all select
elements on the tools page for screen reader compatibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rob 2025-12-31 23:25:16 -04:00
parent e7937361f3
commit 4fb229858f
1 changed files with 7 additions and 5 deletions

View File

@ -69,7 +69,7 @@
<!-- Sort -->
<div>
<h3 class="text-sm font-medium text-gray-700 mb-3">Sort By</h3>
<label for="sort-select" class="block text-sm font-medium text-gray-700 mb-3">Sort By</label>
<select id="sort-select"
onchange="updateSort(this.value)"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white">
@ -109,8 +109,9 @@
<!-- Mobile Categories -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
<select onchange="window.location.href=this.value"
<label for="mobile-category-select" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
<select id="mobile-category-select"
onchange="window.location.href=this.value"
class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white">
<option value="{{ url_for('web.tools') }}" {{ 'selected' if not current_category }}>All Tools</option>
{% for cat in categories %}
@ -123,8 +124,9 @@
<!-- Mobile Sort -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
<select onchange="updateSort(this.value)"
<label for="mobile-sort-select" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
<select id="mobile-sort-select"
onchange="updateSort(this.value)"
class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white">
<option value="downloads" {{ 'selected' if sort == 'downloads' }}>Most Downloads</option>
<option value="published_at" {{ 'selected' if sort == 'published_at' }}>Recently Published</option>