fix(platform): add aria-labelledby to chat interface for WCAG 2.1

[yannickmonney]

Summary

• Replace aria-label with aria-labelledby on the chat message history (role="log"), textarea input, and overall chat region container to establish explicit semantic relationships between UI elements and their labels
• Add the missing label to the shared chat view's message log, which had no accessible label at all
• Add visually hidden headings and label elements using useId() for unique, stable IDs

Closes #1415

Test plan

• Verify screen reader announces "Message history" when entering the chat message log region
• Verify screen reader announces "Message input" when focusing the chat textarea
• Verify screen reader announces "Chat" when entering the chat region
• Verify shared chat view message log is also properly labeled
• Verify keyboard navigation (tab flow) still works correctly
• Run npm run lint --workspace=@tale/platform — passes with 0 warnings/errors
• Run TypeScript type check — no errors

Summary by CodeRabbit

• Accessibility
  • Enhanced chat interface with improved screen reader support through proper accessible region labels.
  • Added explicit accessibility labels for message input and chat history containers.
  • Extended localization with new ARIA labels in German and English for better assistive technology integration.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 25f39cd3-69d6-461e-b456-7cdc3927faf6

📥 Commits

Reviewing files that changed from the base of the PR and between 257a473 and 82f157c.

📒 Files selected for processing (6)

• services/platform/app/features/chat/components/chat-input.tsx
• services/platform/app/features/chat/components/chat-interface.tsx
• services/platform/app/features/chat/components/chat-messages.tsx
• services/platform/app/features/chat/components/shared-chat-view.tsx
• services/platform/messages/de.json
• services/platform/messages/en.json

---

📝 Walkthrough

Walkthrough

This PR improves WCAG 2.1 semantic accessibility compliance across the chat interface by replacing aria-label attributes with aria-labelledby relationships. Changes include generating stable unique IDs using React's useId() hook in four chat components (chat-input, chat-interface, chat-messages, shared-chat-view), adding visually-hidden <h2> label elements, and updating component markup to link these labels via aria-labelledby. Two localization files (German and English) were extended with new aria-related translation keys (chatRegion and chatInput).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix(platform): improve chat streaming stability and UX #599: Modifies the same chat-input component with aria attribute and UI control changes
• feat(platform): wire prompt library dialogs into UI #1386: Updates chat-input component with prompt-dialog UI and state management additions, which may interact with these accessibility changes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change—adding aria-labelledby attributes to the chat interface for WCAG 2.1 compliance.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #1415: adds aria-labelledby to message history, textarea input, and chat region; replaces aria-label where appropriate; uses useId() for stable IDs; and maintains keyboard navigation.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing WCAG 2.1 accessibility improvements via aria-labelledby and localization strings; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/chat-aria-labelledby-1415

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}