[FEATURE] [MER-5134] Accessibility of modals wcag sc 1 3 2 2 4 3 4 1 2 - Rework 1

[Francisco-Castro]

Ticket: MER-5134

Summary

This PR improves accessibility across the lesson delivery experience, focusing on WCAG compliance for screen readers, keyboard navigation, and focus management.

Notes Panel

• Screen reader support: Panel is recognized as a complementary landmark region with proper aria-labelledby
• Close buttons: Announce their purpose ("Close notes panel") with proper aria-label
• Escape key: Closes the panel from anywhere within it via phx-window-keydown
• Focus management:
  • Focus returns to the toggle button when panel closes (JS.pop_focus())
  • Clicking a bubble focuses the annotation input via server-side push_event("js-exec", ...) for proper timing
• Notes and replies: Each announced with full context using aria-label: "Note by John, 2 hours ago: message content"
• Like button: Announces current state and count: "Unlike, 3 likes" or "Like"
• Replies button: Describes the action: "Show 2 replies", "Hide replies", or "Add reply"
• Button order: Reordered form buttons so Cancel comes before Submit (consistent left-to-right tab order)
• Invalid ARIA removed: Replaced custom roles with valid ARIA roles

Annotation Bubbles

• Keyboard navigation: Arrow keys (Up/Down), Home, and End navigate between bubbles
• Roving tabindex: Only one bubble in tab order at a time; Tab moves to panel, Shift+Tab returns
• Toggle state: Bubbles announce pressed/not pressed via aria-pressed
• Content context: Bubbles describe attached content: "Notes for: Image showing diagram, 3 notes"
• Event listener cleanup: Proper destroyed() hook prevents memory leaks
• Index clamping: currentIndex clamped to valid range when bubbles are removed

Outline Panel

• Landmark region: Panel recognized as complementary region with aria-labelledby
• Focus on open: Close button receives focus when panel opens (easy escape route)
• Escape key: Closes panel from anywhere within it
• Toggle button: Announces state via aria-pressed
• Expandable items: Changed from <div> to <button> with aria-expanded and aria-controls
• Decorative icons: Chevrons marked aria-hidden="true" to reduce screen reader noise
• Focus ring visibility: Added sm:py-1 padding to prevent overflow clipping of focus outlines

Page Content

• Valid ARIA roles: Changed role="page content" (invalid) to role="region" aria-label="Page content" (valid landmark)
• Consistent across views: Applied to practice pages and graded pages

Video Players

• Removed invalid role: Removed aria-role="img" which was hiding all playback controls from screen readers
• Preserved alt text: aria-label still applied when alt text is provided

Performance

• Relative timestamps: Precomputed once per render (Timex.from_now) instead of calling multiple times in template

WCAG Criteria Addressed

• 1.3.1 Info and Relationships - Proper semantic structure with landmarks and headings
• 1.3.2 Meaningful Sequence - Tab order matches visual layout
• 2.1.1 Keyboard - All functionality accessible via keyboard
• 2.4.3 Focus Order - Logical focus sequence through panels
• 4.1.2 Name, Role, Value - Proper ARIA labels and roles for all interactive elements

[github-actions]

	Warnings
⚠️	PR is large (829 LOC changed). Consider splitting.

Risk score: 7 → risk/medium

Generated by 🚫 dangerJS against 2576863

[github-actions]

AI Review — security

No issues found

[github-actions]

AI Review — performance

No issues found

[github-actions]

AI Review — typescript

No issues found

[github-actions]

AI Review — ui

No issues found

[github-actions]

AI Review — elixir

No issues found

[github-actions]

Preview deployed to: https://pr-6129.plasma.oli.cmu.edu