From e7937361f34310c25ca43e0b993910ce3cd5c027 Mon Sep 17 00:00:00 2001
From: rob <robdickson444@hotmail.com>
Date: Wed, 31 Dec 2025 23:23:04 -0400
Subject: [PATCH] Fix additional accessibility issues on tools and search pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add submit button to search forms for keyboard accessibility
- Fix category count text contrast (text-gray-400 → text-gray-600)
- Add aria-label to search inputs
- Add visible Search button on mobile filters

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../web/templates/pages/search.html           |  1 +
 src/smarttools/web/templates/pages/tools.html | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/smarttools/web/templates/pages/search.html b/src/smarttools/web/templates/pages/search.html
index b228f44..38f8464 100644
--- a/src/smarttools/web/templates/pages/search.html
+++ b/src/smarttools/web/templates/pages/search.html
@@ -16,6 +16,7 @@
                            name="q"
                            value="{{ query or '' }}"
                            placeholder="Search for tools..."
+                           aria-label="Search for tools"
                            autofocus
                            class="w-full pl-12 pr-4 py-4 text-lg border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                     <svg class="absolute left-4 top-4.5 w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/smarttools/web/templates/pages/tools.html b/src/smarttools/web/templates/pages/tools.html
index 19ec912..106cfc3 100644
--- a/src/smarttools/web/templates/pages/tools.html
+++ b/src/smarttools/web/templates/pages/tools.html
@@ -35,9 +35,11 @@
                                        value="{{ query or '' }}"
                                        placeholder="Search tools..."
                                        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
-                                <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <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"/>
-                                </svg>
+                                <button type="submit" class="absolute left-3 top-2.5" aria-label="Search">
+                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <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"/>
+                                    </svg>
+                                </button>
                             </div>
                         </form>
                     </div>
@@ -50,7 +52,7 @@
                                 <a href="{{ url_for('web.tools') }}"
                                    class="flex items-center justify-between px-3 py-2 rounded-lg {{ 'bg-indigo-50 text-indigo-600 font-medium' if not current_category else 'text-gray-600 hover:bg-gray-100' }}">
                                     <span>All Tools</span>
-                                    <span class="text-sm text-gray-400">{{ total_count }}</span>
+                                    <span class="text-sm text-gray-600">{{ total_count }}</span>
                                 </a>
                             </li>
                             {% for cat in categories %}
@@ -58,7 +60,7 @@
                                 <a href="{{ url_for('web.category', name=cat.name) }}"
                                    class="flex items-center justify-between px-3 py-2 rounded-lg {{ 'bg-indigo-50 text-indigo-600 font-medium' if current_category == cat.name else 'text-gray-600 hover:bg-gray-100' }}">
                                     <span>{{ cat.display_name }}</span>
-                                    <span class="text-sm text-gray-400">{{ cat.count }}</span>
+                                    <span class="text-sm text-gray-600">{{ cat.count }}</span>
                                 </a>
                             </li>
                             {% endfor %}
@@ -93,12 +95,16 @@
                 <!-- Mobile Filters Panel -->
                 <div id="mobile-filters" class="hidden mt-4 p-4 bg-white border border-gray-200 rounded-lg space-y-4">
                     <!-- Mobile Search -->
-                    <form action="{{ url_for('web.search') }}" method="GET">
+                    <form action="{{ url_for('web.search') }}" method="GET" class="flex gap-2">
                         <input type="text"
                                name="q"
                                value="{{ query or '' }}"
                                placeholder="Search tools..."
-                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
+                               aria-label="Search tools"
+                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
+                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700" aria-label="Search">
+                            Search
+                        </button>
                     </form>
 
                     <!-- Mobile Categories -->