Enhance Accessibility: Add ARIA Labels, Keyboard Navigation, and Screen Reader Support to Editors and Panels #770
Description
Feature Request 🛍️
Use Case
Users with disabilities (visual impairments, motor disabilities) require proper accessibility support to interact with code editors and UI panels. This includes screen reader compatibility, keyboard navigation, and ARIA labels to ensure the application is usable without a mouse and understandable via assistive technologies.
Possible Solution
Implement WCAG-compliant accessibility features:
Add ARIA labels and semantic roles to interactive elements
Ensure all buttons and panels are keyboard navigable
Integrate screen reader support through Monaco editor's built-in features and custom attributes
Add proper focus management and state announcements
Context
The template-playground application includes multiple code editors (Concerto, JSON, Markdown) and UI panels (AI Chat, Problems, Sidebar) that lacked proper accessibility support. Users relying on screen readers or keyboard-only navigation were unable to fully use these components, limiting the application's accessibility and potentially excluding users with disabilities.
Detailed Description
Enhance accessibility across editors and panels with the following implementations:
Editors (Monaco-based)
Add ariaLabel property to editor options for screen reader identification
Leverage Monaco's built-in accessibility features for code navigation
Panels
Add role="region" and descriptive aria-label attributes to panel containers
Make interactive elements (buttons, toggles) keyboard accessible with:
tabIndex={0} for focusability
role="button" for semantic identification
onKeyDown handlers for Enter/Space key activation
aria-pressed for toggle state indication
Ensure form elements like textareas have proper label