rob
/
smarttools
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Fix additional accessibility issues on tools and search pages 

- 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>
This commit is contained in:
rob 2025-12-31 23:23:04 -04:00
parent 26ae319815
commit e7937361f3
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/smarttools/web/templates/pages/search.html
View File

@ -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">

16
src/smarttools/web/templates/pages/tools.html
View File

@ -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">
<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 -->