gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add ARIA attributes for accessibility improvements

Browse Source 
Add aria-hidden="true" to decorative Font Awesome icons across templates,
aria-label to icon-only buttons, aria-live to dynamic content regions,
aria-labelledby to modals, aria-expanded to toggle buttons, scope="col"
to table headers, and aria-label to tables. Also improve alt text on
500.html error image and add aria-label to password toggle buttons.

Templates updated: settings.html, credentials.html, status_dashboard.html,
file_view.html, file_detail.html, index.html, queue_dashboard.html,
audit_log.html, 500.html

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-28 16:04:33 +00:00
parent bf6bbe3512
commit 0969436abd
9 changed files with 122 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/queue_dashboard.html
+12 -12
View File
@@ -11,14 +11,14 @@
<!-- Header -->
<div class="mb-6">
<h1 class="text-3xl font-bold mb-2">
<i class="fas fa-stream mr-2 text-blue-500"></i>Queue Monitor
<i class="fas fa-stream mr-2 text-blue-500" aria-hidden="true"></i>Queue Monitor
</h1>
<p class="text-gray-600">Real-time view of the document processing pipeline and Celery task queues.</p>
</div>
<!-- Loading state -->
<div id="queueLoading" class="text-center py-12">
<i class="fas fa-spinner fa-spin fa-2x text-blue-400"></i>
<i class="fas fa-spinner fa-spin fa-2x text-blue-400" aria-hidden="true"></i>
<p class="mt-2 text-gray-500">Loading queue statistics&hellip;</p>
</div>
@@ -31,12 +31,12 @@
<div id="queueContent" class="hidden">
<!-- Summary Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8" aria-live="polite">
<!-- Queued -->
<div class="bg-white rounded-lg shadow p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-yellow-100 rounded-full p-3">
<i class="fas fa-inbox text-yellow-600 text-xl"></i>
<i class="fas fa-inbox text-yellow-600 text-xl" aria-hidden="true"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Queued Tasks</p>
@@ -48,7 +48,7 @@
<div class="bg-white rounded-lg shadow p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-100 rounded-full p-3">
<i class="fas fa-cogs text-blue-600 text-xl"></i>
<i class="fas fa-cogs text-blue-600 text-xl" aria-hidden="true"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Active Tasks</p>
@@ -60,7 +60,7 @@
<div class="bg-white rounded-lg shadow p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-100 rounded-full p-3">
<i class="fas fa-file-alt text-indigo-600 text-xl"></i>
<i class="fas fa-file-alt text-indigo-600 text-xl" aria-hidden="true"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Files Processing</p>
@@ -72,7 +72,7 @@
<div class="bg-white rounded-lg shadow p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<i class="fas fa-server text-green-600 text-xl"></i>
<i class="fas fa-server text-green-600 text-xl" aria-hidden="true"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Workers Online</p>
@@ -89,7 +89,7 @@
<div class="bg-white rounded-lg shadow">
<div class="px-5 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">
<i class="fas fa-list-ol mr-2 text-gray-500"></i>Redis Queues
<i class="fas fa-list-ol mr-2 text-gray-500" aria-hidden="true"></i>Redis Queues
</h2>
</div>
<div class="p-5">
@@ -111,7 +111,7 @@
<div class="bg-white rounded-lg shadow">
<div class="px-5 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">
<i class="fas fa-database mr-2 text-gray-500"></i>Processing Pipeline
<i class="fas fa-database mr-2 text-gray-500" aria-hidden="true"></i>Processing Pipeline
</h2>
</div>
<div class="p-5">
@@ -134,7 +134,7 @@
<div class="bg-white rounded-lg shadow mb-8">
<div class="px-5 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">
<i class="fas fa-play-circle mr-2 text-blue-500"></i>Active Tasks
<i class="fas fa-play-circle mr-2 text-blue-500" aria-hidden="true"></i>Active Tasks
<span id="activeCount" class="ml-1 text-sm font-normal text-gray-500">(0)</span>
</h2>
</div>
@@ -158,7 +158,7 @@
<div class="bg-white rounded-lg shadow mb-8">
<div class="px-5 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">
<i class="fas fa-file-medical-alt mr-2 text-indigo-500"></i>Recently Processing Files
<i class="fas fa-file-medical-alt mr-2 text-indigo-500" aria-hidden="true"></i>Recently Processing Files
</h2>
</div>
<div class="p-5 overflow-x-auto">
@@ -179,7 +179,7 @@
<!-- Auto-refresh info -->
<div class="text-center text-gray-400 text-xs mb-4">
<i class="fas fa-sync-alt mr-1"></i>
<i class="fas fa-sync-alt mr-1" aria-hidden="true"></i>
Auto-refreshes every <span id="refreshInterval">10</span> seconds &mdash;
Last updated: <span id="lastUpdated">—</span>
</div>