From 4fb229858f0df04b1328263beb7e48b5b1bcd2e7 Mon Sep 17 00:00:00 2001
From: rob <robdickson444@hotmail.com>
Date: Wed, 31 Dec 2025 23:25:16 -0400
Subject: [PATCH] Fix select element accessibility labels on tools page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/smarttools/web/templates/pages/tools.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/smarttools/web/templates/pages/tools.html b/src/smarttools/web/templates/pages/tools.html
index 106cfc3..4756a52 100644
--- a/src/smarttools/web/templates/pages/tools.html
+++ b/src/smarttools/web/templates/pages/tools.html
@@ -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>