Keyboard accessibility: Interactive elements not operable via keyboard

[adarshh347]

Discussion

Several interactive controls within the Template Playground are not fully operable using keyboard input. While these controls function correctly with mouse interaction, they do not consistently support activation via standard keyboard keys such as Enter or Space.

This creates an accessibility gap for users who rely on keyboard navigation, screen readers, or other assistive technologies.

---

Context

The Playground UI includes multiple interactive elements implemented using non-semantic elements (e.g., <div> or raw icon components) combined with onClick handlers.

Although some of these elements are visually styled as buttons and may even be focusable, they do not consistently behave like native <button> elements. In particular:

• Some elements are focusable via Tab but cannot be activated using Enter or Space.
• Some elements are not focusable at all.
• Certain icon-only controls do not expose accessible labels for assistive technologies.
• Toggle-style controls do not communicate their active state programmatically.

This results in incomplete keyboard accessibility and inconsistent interaction behavior.

---

Detailed Description

The following areas are affected:

1. PlaygroundSidebar

Top navigation items (Editor, Preview, Problems, AI Assistant) and bottom navigation items (Share, Settings, Start Tour):

• Are focusable in some cases.
• Do not consistently respond to Enter or Space.
• Appear interactive but do not fully replicate native button behavior.

---

2. FullScreenModal

The fullscreen trigger icon:

• Is implemented as an icon component with an onClick handler.
• Is not reachable via keyboard navigation.
• Does not expose a semantic role or accessible label.
• Is not announced meaningfully by assistive technologies.

Keyboard-only users cannot open fullscreen mode.

---

3. AIChatPanel

The context toggle controls (TemplateMark, Concerto, Data):

• Are implemented as clickable <div> elements.
• Are not consistently keyboard-operable.
• Do not expose state information for assistive technologies.

As a result, these controls are not accessible to users relying on keyboard interaction.

---

Expected Behavior

All interactive controls in the Playground should:

• Be reachable via Tab navigation.
• Be activatable using Enter and Space.
• Expose appropriate semantic roles and accessible labels.
• Communicate state where applicable (e.g., toggle buttons).

This would ensure consistent interaction behavior and improved accessibility compliance.

[adarshh347]

i'm working on this issue