Add comprehensive accessibility improvements

HTML Accessibility:
- Add ARIA roles to tab navigation (role="tablist", role="tab", role="tabpanel")
- Add aria-selected to tab buttons with JS toggle
- Add aria-controls and aria-labelledby for tab/panel relationships
- Add aria-label to emoji icon buttons (settings, reply, edit, delete)
- Add aria-pressed to view toggle buttons
- Add labels for form inputs (comment textarea, dependency inputs, file input)
- Add .sr-only utility class for screen-reader-only content

CSS Accessibility:
- Add .sr-only class (visually hidden, accessible to screen readers)

JavaScript:
- Update showTab() to toggle aria-selected on tab buttons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-31 00:15:11 -05:00
parent 2ba3d40b3b
commit 73162d9a9b
4 changed files with 44 additions and 25 deletions

View File

@@ -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) {
*,

View File

@@ -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') {