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/credentials.html
+14 -13
View File
@@ -7,7 +7,7 @@
<!-- Page Header -->
<div class="mb-8">
<div class="flex items-center gap-3 mb-2">
<i class="fas fa-key text-yellow-500 text-2xl"></i>
<i class="fas fa-key text-yellow-500 text-2xl" aria-hidden="true"></i>
<h1 class="text-3xl font-bold">Credential Audit</h1>
</div>
<p class="text-gray-600">
@@ -20,7 +20,7 @@
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
<div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
<span class="inline-flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 text-xl">
<i class="fas fa-list"></i>
<i class="fas fa-list" aria-hidden="true"></i>
</span>
<div>
<div class="text-2xl font-bold text-gray-800">{{ total }}</div>
@@ -29,7 +29,7 @@
</div>
<div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
<span class="inline-flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600 text-xl">
<i class="fas fa-check-circle"></i>
<i class="fas fa-check-circle" aria-hidden="true"></i>
</span>
<div>
<div class="text-2xl font-bold text-green-700">{{ configured_count }}</div>
@@ -38,7 +38,7 @@
</div>
<div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
<span class="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 text-gray-500 text-xl">
<i class="fas fa-circle-question"></i>
<i class="fas fa-circle-question" aria-hidden="true"></i>
</span>
<div>
<div class="text-2xl font-bold text-gray-600">{{ unconfigured_count }}</div>
@@ -49,7 +49,7 @@
<!-- Legend -->
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-800 p-4 mb-6 rounded-r-md">
<p class="font-semibold mb-2"><i class="fas fa-circle-info mr-1"></i> Legend</p>
<p class="font-semibold mb-2"><i class="fas fa-circle-info mr-1" aria-hidden="true"></i> Legend</p>
<div class="flex flex-wrap gap-4 text-sm">
<span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-1">DB</span>
@@ -85,7 +85,7 @@
<!-- Credentials Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<table class="min-w-full divide-y divide-gray-200" aria-label="Credentials for {{ category }}">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-56">
@@ -130,11 +130,11 @@
<td class="px-6 py-4 whitespace-nowrap">
{% if cred.configured %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
<i class="fas fa-check mr-1"></i> Configured
<i class="fas fa-check mr-1" aria-hidden="true"></i> Configured
</span>
{% else %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
<i class="fas fa-circle-exclamation mr-1"></i> Missing
<i class="fas fa-circle-exclamation mr-1" aria-hidden="true"></i> Missing
</span>
{% endif %}
</td>
@@ -143,11 +143,11 @@
<td class="px-6 py-4 whitespace-nowrap">
{% if cred.source == 'db' %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800" title="Stored in database (encrypted)">
<i class="fas fa-database mr-1 text-xs"></i> DB
<i class="fas fa-database mr-1 text-xs" aria-hidden="true"></i> DB
</span>
{% elif cred.source == 'env' %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800" title="From environment variable">
<i class="fas fa-terminal mr-1 text-xs"></i> ENV
<i class="fas fa-terminal mr-1 text-xs" aria-hidden="true"></i> ENV
</span>
{% else %}
<span class="text-gray-400 text-xs">—</span>
@@ -158,9 +158,10 @@
<td class="px-6 py-4 whitespace-nowrap text-center">
<a href="/settings#{{ cred.key }}"
title="Edit in Settings"
aria-label="Edit {{ cred.key }}"
class="inline-flex items-center justify-center w-7 h-7 rounded text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
>
<i class="fas fa-pen-to-square text-sm"></i>
<i class="fas fa-pen-to-square text-sm" aria-hidden="true"></i>
</a>
</td>
@@ -177,13 +178,13 @@
<a href="/settings"
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
>
<i class="fas fa-cog"></i> Manage Settings
<i class="fas fa-cog" aria-hidden="true"></i> Manage Settings
</a>
<a href="/api/settings/credentials"
target="_blank"
class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 text-sm font-medium"
>
<i class="fas fa-code"></i> Raw JSON (API)
<i class="fas fa-code" aria-hidden="true"></i> Raw JSON (API)
</a>
</div>