diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index ff80eef..0e95408 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -201,6 +201,19 @@ select:focus { outline-offset: 2px; } +/* Screen reader only - visually hidden but accessible */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + /* Reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, diff --git a/assets/js/ticket.js b/assets/js/ticket.js index dbbd415..16519ca 100644 --- a/assets/js/ticket.js +++ b/assets/js/ticket.js @@ -566,14 +566,17 @@ function showTab(tabName) { activityTab.style.display = 'none'; } - // Remove active class from all buttons + // Remove active class and aria-selected from all buttons document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.remove('active'); + btn.setAttribute('aria-selected', 'false'); }); // Show selected tab and activate its button document.getElementById(`${tabName}-tab`).style.display = 'block'; - document.querySelector(`.tab-btn[data-tab="${tabName}"]`).classList.add('active'); + const activeBtn = document.querySelector(`.tab-btn[data-tab="${tabName}"]`); + activeBtn.classList.add('active'); + activeBtn.setAttribute('aria-selected', 'true'); // Load attachments when tab is shown if (tabName === 'attachments') { diff --git a/views/DashboardView.php b/views/DashboardView.php index 30766a6..ef9dcf6 100644 --- a/views/DashboardView.php +++ b/views/DashboardView.php @@ -96,7 +96,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); - + @@ -284,8 +284,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
@@ -268,13 +268,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
Add Comment
Drag and drop files here or click to browse
Max file size:
- +Add Dependency