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