Barrierefreiheit und mobile Darstellung
- Kontrast: gedämpfter Text war mit 3,1:1 unter WCAG AA, jetzt 4,9:1 (hell) bzw. 6,4:1 (dunkel) - Sprungmarke „Zum Inhalt springen" in Admin-Shell und Voucher-Seite - aria-label für alle reinen Icon-Schaltflächen (Theme, Menü, Abmelden, Zeilenaktionen), aria-current auf dem aktiven Navigationspunkt, role="group" für den Sprachumschalter - 194 dekorative Icons mit aria-hidden versehen, damit Screenreader sie nicht vorlesen - Toast-Container als aria-live-Bereich ausgezeichnet - prefers-reduced-motion schaltet Animationen und Übergänge ab Tabellen (Benutzer, Vouchers, Profile, Audit-Log, Dashboard, API-Keys) werden unter 720 px zu Karten: die Spaltenüberschrift steht per data-label vor dem Wert, statt horizontal zu scrollen. Datums- und Zeitformat in der Voucher-Liste folgen jetzt der gewählten Sprache statt fest de-DE. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
850a04d628
commit
7f1d93debd
21 changed files with 716 additions and 632 deletions
|
|
@ -105,20 +105,20 @@ $currentPage = 'sites';
|
|||
<div class="page-header">
|
||||
<h1 class="page-title"><?= __('sites_title') ?></h1>
|
||||
<button onclick="openModal()" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> <?= __('sites_add') ?>
|
||||
<i class="fas fa-plus" aria-hidden="true"></i> <?= __('sites_add') ?>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> <?= htmlspecialchars($error) ?></div>
|
||||
<div class="alert alert-error"><i class="fas fa-exclamation-circle" aria-hidden="true"></i> <?= htmlspecialchars($error) ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if ($success): ?>
|
||||
<div class="alert alert-success"><i class="fas fa-check-circle"></i> <?= htmlspecialchars($success) ?></div>
|
||||
<div class="alert alert-success"><i class="fas fa-check-circle" aria-hidden="true"></i> <?= htmlspecialchars($success) ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (empty($sites)): ?>
|
||||
<div class="empty-card">
|
||||
<i class="fas fa-map-marker-alt" style="font-size:48px;margin-bottom:20px;opacity:.3;display:block;"></i>
|
||||
<i class="fas fa-map-marker-alt" style="font-size:48px;margin-bottom:20px;opacity:.3;display:block;" aria-hidden="true"></i>
|
||||
<p><?= __('sites_none') ?></p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
|
|
@ -132,43 +132,43 @@ $currentPage = 'sites';
|
|||
</div>
|
||||
<div>
|
||||
<?php if ($site['is_active']): ?>
|
||||
<span class="badge badge-success"><i class="fas fa-check"></i> <?= __('status_active') ?></span>
|
||||
<span class="badge badge-success"><i class="fas fa-check" aria-hidden="true"></i> <?= __('status_active') ?></span>
|
||||
<?php else: ?>
|
||||
<span class="badge badge-warning"><i class="fas fa-pause"></i> <?= __('status_inactive') ?></span>
|
||||
<span class="badge badge-warning"><i class="fas fa-pause" aria-hidden="true"></i> <?= __('status_inactive') ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($site['public_access']): ?>
|
||||
<span class="badge badge-info"><i class="fas fa-globe"></i> <?= __('status_public') ?></span>
|
||||
<span class="badge badge-info"><i class="fas fa-globe" aria-hidden="true"></i> <?= __('status_public') ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-info">
|
||||
<div class="site-info-item">
|
||||
<i class="fas fa-server" style="color:var(--accent);width:16px;"></i>
|
||||
<i class="fas fa-server" style="color:var(--accent);width:16px;" aria-hidden="true"></i>
|
||||
<span style="word-break:break-all;"><?= htmlspecialchars($site['unifi_controller_url']) ?></span>
|
||||
</div>
|
||||
<div class="site-info-item">
|
||||
<i class="fas fa-user" style="color:var(--accent);width:16px;"></i>
|
||||
<i class="fas fa-user" style="color:var(--accent);width:16px;" aria-hidden="true"></i>
|
||||
<span><?= htmlspecialchars($site['unifi_username']) ?></span>
|
||||
</div>
|
||||
<div class="site-info-item">
|
||||
<i class="fas fa-clock" style="color:var(--text-muted);width:16px;"></i>
|
||||
<i class="fas fa-clock" style="color:var(--text-muted);width:16px;" aria-hidden="true"></i>
|
||||
<span style="color:var(--text-muted);"><?= date('d.m.Y', strtotime($site['created_at'])) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-actions">
|
||||
<button onclick="openEditModal(<?= $site['id'] ?>, '<?= htmlspecialchars($site['name'], ENT_QUOTES) ?>', '<?= htmlspecialchars($site['site_id'], ENT_QUOTES) ?>', '<?= htmlspecialchars($site['unifi_controller_url'], ENT_QUOTES) ?>', '<?= htmlspecialchars($site['unifi_username'], ENT_QUOTES) ?>', <?= $site['public_access'] ?>)"
|
||||
class="btn btn-secondary btn-sm">
|
||||
<i class="fas fa-edit"></i> <?= __('btn_edit') ?>
|
||||
<i class="fas fa-edit" aria-hidden="true"></i> <?= __('btn_edit') ?>
|
||||
</button>
|
||||
<a href="?toggle=<?= $site['id'] ?>&token=<?= $auth->getCsrfToken() ?>"
|
||||
class="btn btn-secondary btn-sm">
|
||||
<i class="fas fa-<?= $site['is_active'] ? 'pause' : 'play' ?>"></i>
|
||||
<i class="fas fa-<?= $site['is_active'] ? 'pause' : 'play' ?>" aria-hidden="true"></i>
|
||||
<?= $site['is_active'] ? __('sites_deactivate') : __('sites_activate') ?>
|
||||
</a>
|
||||
<a href="?delete=<?= $site['id'] ?>&token=<?= $auth->getCsrfToken() ?>"
|
||||
class="btn btn-danger-soft btn-sm"
|
||||
onclick="return confirm('<?= __('js_confirm_delete_site') ?>')">
|
||||
<i class="fas fa-trash"></i>
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,7 +219,7 @@ $currentPage = 'sites';
|
|||
</div>
|
||||
<div style="display:flex;gap:10px;margin-top:20px;">
|
||||
<button type="submit" class="btn btn-primary" style="flex:1;" id="addSiteSubmitBtn">
|
||||
<i class="fas fa-save"></i> <?= __('sites_add') ?>
|
||||
<i class="fas fa-save" aria-hidden="true"></i> <?= __('sites_add') ?>
|
||||
</button>
|
||||
<button type="button" onclick="closeModal('addSiteModal')" class="btn btn-secondary"><?= __('btn_cancel') ?></button>
|
||||
</div>
|
||||
|
|
@ -269,7 +269,7 @@ $currentPage = 'sites';
|
|||
</div>
|
||||
<div style="display:flex;gap:10px;margin-top:20px;">
|
||||
<button type="submit" class="btn btn-primary" style="flex:1;" id="editSiteSubmitBtn">
|
||||
<i class="fas fa-save"></i> <?= __('btn_save') ?>
|
||||
<i class="fas fa-save" aria-hidden="true"></i> <?= __('btn_save') ?>
|
||||
</button>
|
||||
<button type="button" onclick="closeModal('editSiteModal')" class="btn btn-secondary"><?= __('btn_cancel') ?></button>
|
||||
</div>
|
||||
|
|
@ -278,7 +278,7 @@ $currentPage = 'sites';
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast-container"></div>
|
||||
<div id="toast-container" role="status" aria-live="polite"></div>
|
||||
<script src="../assets/global.js"></script>
|
||||
<script>
|
||||
function openModal() { document.getElementById('addSiteModal').classList.add('active'); }
|
||||
|
|
@ -298,12 +298,12 @@ function openEditModal(id, name, siteIdStr, controllerUrl, username, publicAcces
|
|||
document.getElementById('addSiteForm').addEventListener('submit', function() {
|
||||
const btn = document.getElementById('addSiteSubmitBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <?= addslashes(__('sites_testing')) ?>';
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i> <?= addslashes(__('sites_testing')) ?>';
|
||||
});
|
||||
document.getElementById('editSiteForm').addEventListener('submit', function() {
|
||||
const btn = document.getElementById('editSiteSubmitBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <?= addslashes(__('sites_testing')) ?>';
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i> <?= addslashes(__('sites_testing')) ?>';
|
||||
});
|
||||
|
||||
['addSiteModal','editSiteModal'].forEach(id => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue