Accessibility pass: ARIA roles, label associations, CSS class migrations
- Add role=dialog/aria-modal/aria-labelledby to all 12 modal overlays (JS + PHP)
- Add aria-label="Close" to all 14 modal close buttons
- Add full ARIA combobox pattern to @mention autocomplete (listbox, option, aria-selected, aria-expanded)
- Add for= attributes to admin filter form labels (AuditLog, UserActivity, ApiKeys)
- Remove dead closeOnAdvancedSearchBackdropClick() from advanced-search.js
CSS/JS style cleanup:
- Move .ascii-banner static styles from JS inline to CSS class; add .ascii-banner--glow
- Add .ascii-banner-cursor, .loading-overlay--hiding, .has-overlay, tr[data-clickable]
- Add .animate-fadein/.animate-fadeout/.comment--deleting to ticket.css
- Add .lt-toast--hiding to base.css; remove opacity/transition inline JS
- Remove redundant cursor:pointer JS (already in th{} CSS rule)
- Remove trailing space in lt-select class attributes
Bug fixes:
- base.js: boot overlay opacity inline style was overriding .fade-out class opacity via
specificity (1000 vs 20), preventing the fade-out animation — removed
- ascii-banner.js: cursor used blink-caret (border-color only) instead of blink-cursor
(opacity-based), so the █ cursor never actually blinked — fixed
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -261,7 +261,6 @@ function clearAllFilters() {
|
||||
function initTableSorting() {
|
||||
const tableHeaders = document.querySelectorAll('th');
|
||||
tableHeaders.forEach((header, index) => {
|
||||
header.style.cursor = 'pointer';
|
||||
header.addEventListener('click', () => {
|
||||
const table = header.closest('table');
|
||||
sortTable(table, index);
|
||||
@@ -764,15 +763,15 @@ function showBulkAssignModal() {
|
||||
|
||||
// Create modal HTML
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="bulkAssignModal" aria-hidden="true">
|
||||
<div class="lt-modal-overlay" id="bulkAssignModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="bulkAssignModalTitle">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Assign ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="bulkAssignModalTitle">Assign ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="bulkAssignUser">Assign to:</label>
|
||||
<select id="bulkAssignUser" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<select id="bulkAssignUser" class="lt-select">
|
||||
<option value="">Select User...</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -852,15 +851,15 @@ function showBulkPriorityModal() {
|
||||
}
|
||||
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="bulkPriorityModal" aria-hidden="true">
|
||||
<div class="lt-modal-overlay" id="bulkPriorityModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="bulkPriorityModalTitle">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Change Priority for ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="bulkPriorityModalTitle">Change Priority for ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="bulkPriority">Priority:</label>
|
||||
<select id="bulkPriority" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<select id="bulkPriority" class="lt-select">
|
||||
<option value="">Select Priority...</option>
|
||||
<option value="1">P1 - Critical Impact</option>
|
||||
<option value="2">P2 - High Impact</option>
|
||||
@@ -927,7 +926,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
if (row.dataset.clickable) return;
|
||||
|
||||
row.dataset.clickable = 'true';
|
||||
row.style.cursor = 'pointer';
|
||||
|
||||
row.addEventListener('click', function(e) {
|
||||
// Don't navigate if clicking on a link, button, checkbox, or select
|
||||
@@ -960,15 +958,15 @@ function showBulkStatusModal() {
|
||||
}
|
||||
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="bulkStatusModal" aria-hidden="true">
|
||||
<div class="lt-modal-overlay" id="bulkStatusModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="bulkStatusModalTitle">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Change Status for ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="bulkStatusModalTitle">Change Status for ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="bulkStatus">New Status:</label>
|
||||
<select id="bulkStatus" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<select id="bulkStatus" class="lt-select">
|
||||
<option value="">Select Status...</option>
|
||||
<option value="Open">Open</option>
|
||||
<option value="Pending">Pending</option>
|
||||
@@ -1036,18 +1034,18 @@ function showBulkDeleteModal() {
|
||||
}
|
||||
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="bulkDeleteModal" aria-hidden="true">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header" style="color: var(--status-closed);">
|
||||
<span class="lt-modal-title">[ ! ] DELETE ${ticketIds.length} TICKET(S)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<div class="lt-modal-overlay" id="bulkDeleteModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="bulkDeleteModalTitle">
|
||||
<div class="lt-modal lt-modal-sm">
|
||||
<div class="lt-modal-header lt-modal-header--danger">
|
||||
<span class="lt-modal-title" id="bulkDeleteModalTitle">[ ! ] DELETE ${ticketIds.length} TICKET(S)</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body" style="text-align:center;">
|
||||
<p style="color: var(--terminal-amber); font-size: 1.1rem; margin-bottom: 1rem;">This action cannot be undone!</p>
|
||||
<p style="color: var(--terminal-green);">You are about to permanently delete ${ticketIds.length} ticket(s).<br>All associated comments and history will be lost.</p>
|
||||
<div class="lt-modal-body text-center">
|
||||
<p class="modal-warning-text">This action cannot be undone!</p>
|
||||
<p class="text-green">You are about to permanently delete ${ticketIds.length} ticket(s).<br>All associated comments and history will be lost.</p>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-bulk-delete" class="lt-btn lt-btn-primary" style="background: var(--status-closed); border-color: var(--status-closed);">DELETE PERMANENTLY</button>
|
||||
<button data-action="perform-bulk-delete" class="lt-btn lt-btn-danger">DELETE PERMANENTLY</button>
|
||||
<button data-action="close-bulk-delete-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1121,14 +1119,14 @@ function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel
|
||||
const safeMessage = lt.escHtml(message);
|
||||
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width: 500px;">
|
||||
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="${modalId}_title">
|
||||
<div class="lt-modal lt-modal-sm">
|
||||
<div class="lt-modal-header" style="color: ${color};">
|
||||
<span class="lt-modal-title">${icon} ${safeTitle}</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="${modalId}_title">${icon} ${safeTitle}</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body" style="text-align: center;">
|
||||
<p style="color: var(--terminal-green); white-space: pre-line;">${safeMessage}</p>
|
||||
<div class="lt-modal-body text-center">
|
||||
<p class="modal-message">${safeMessage}</p>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button class="lt-btn lt-btn-primary" id="${modalId}_confirm">CONFIRM</button>
|
||||
@@ -1172,15 +1170,15 @@ function showInputModal(title, label, placeholder = '', onSubmit, onCancel = nul
|
||||
const safePlaceholder = lt.escHtml(placeholder);
|
||||
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width: 500px;">
|
||||
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="${modalId}_title">
|
||||
<div class="lt-modal lt-modal-sm">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">${safeTitle}</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="${modalId}_title">${safeTitle}</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="${inputId}" style="display: block; margin-bottom: 0.5rem; color: var(--terminal-green);">${safeLabel}</label>
|
||||
<input type="text" id="${inputId}" class="lt-input" placeholder="${safePlaceholder}" style="width: 100%;" />
|
||||
<label for="${inputId}">${safeLabel}</label>
|
||||
<input type="text" id="${inputId}" class="lt-input" placeholder="${safePlaceholder}" />
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button class="lt-btn lt-btn-primary" id="${modalId}_submit">SAVE</button>
|
||||
@@ -1224,17 +1222,17 @@ function quickStatusChange(ticketId, currentStatus) {
|
||||
const otherStatuses = statuses.filter(s => s !== currentStatus);
|
||||
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="quickStatusModal" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width:400px;">
|
||||
<div class="lt-modal-overlay" id="quickStatusModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="quickStatusModalTitle">
|
||||
<div class="lt-modal lt-modal-xs">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Quick Status Change</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="quickStatusModalTitle">Quick Status Change</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<p style="margin-bottom:0.5rem;">Ticket #${lt.escHtml(ticketId)}</p>
|
||||
<p style="margin-bottom:0.5rem;color:var(--terminal-amber);">Current: ${lt.escHtml(currentStatus)}</p>
|
||||
<p class="mb-half">Ticket #${lt.escHtml(ticketId)}</p>
|
||||
<p class="text-amber mb-half">Current: ${lt.escHtml(currentStatus)}</p>
|
||||
<label for="quickStatusSelect">New Status:</label>
|
||||
<select id="quickStatusSelect" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<select id="quickStatusSelect" class="lt-select">
|
||||
${otherStatuses.map(s => `<option value="${s}">${s}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
@@ -1280,16 +1278,16 @@ function performQuickStatusChange(ticketId) {
|
||||
*/
|
||||
function quickAssign(ticketId) {
|
||||
const modalHtml = `
|
||||
<div class="lt-modal-overlay" id="quickAssignModal" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width:400px;">
|
||||
<div class="lt-modal-overlay" id="quickAssignModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="quickAssignModalTitle">
|
||||
<div class="lt-modal lt-modal-xs">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Quick Assign</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
<span class="lt-modal-title" id="quickAssignModalTitle">Quick Assign</span>
|
||||
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<p style="margin-bottom:0.5rem;">Ticket #${lt.escHtml(ticketId)}</p>
|
||||
<p class="mb-half">Ticket #${lt.escHtml(ticketId)}</p>
|
||||
<label for="quickAssignSelect">Assign to:</label>
|
||||
<select id="quickAssignSelect" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<select id="quickAssignSelect" class="lt-select">
|
||||
<option value="">Unassigned</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -1697,7 +1695,7 @@ function showLoadingOverlay(element, message = 'Loading...') {
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">${message}</div>
|
||||
`;
|
||||
element.style.position = 'relative';
|
||||
element.classList.add('has-overlay');
|
||||
element.appendChild(overlay);
|
||||
}
|
||||
|
||||
@@ -1707,9 +1705,11 @@ function showLoadingOverlay(element, message = 'Loading...') {
|
||||
function hideLoadingOverlay(element) {
|
||||
const overlay = element.querySelector('.loading-overlay');
|
||||
if (overlay) {
|
||||
overlay.style.opacity = '0';
|
||||
overlay.style.transition = 'opacity 0.3s';
|
||||
setTimeout(() => overlay.remove(), 300);
|
||||
overlay.classList.add('loading-overlay--hiding');
|
||||
setTimeout(() => {
|
||||
overlay.remove();
|
||||
element.classList.remove('has-overlay');
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user