Dart Web Stack POC

Flutter Web shell POC that embeds a React app and demonstrates basic cross-app communication and accessibility validation.

Scope

• Shell: Flutter Web app (this repo)
• Embedded app: React app in an <iframe>
  • https://react-app-coral-iota.vercel.app/

What this POC demonstrates

• Flutter Web app shell hosting an embedded app
• Shell -> embedded messaging (send ping)
• Embedded -> shell messaging (receive messages like pong / submitted)
• Shell accessibility validation: keyboard navigation and screen reader focus traversal into/out of the embedded app

Embedded React app behavior

• When it receives a ping, it posts back a pong message
• When the form is submitted, it posts a submitted message

Run locally

flutter pub get
flutter run -d chrome

Manual test steps

• Ping/Pong

  • In the Flutter shell, click Send Ping
  • Confirm the message log shows Sent: ping
  • Confirm the message log shows Received: pong

• Form submit

  • In the embedded React app, fill the form and submit
  • Confirm the Flutter shell message log shows Received: submitted

Accessibility validation (shell)

This POC focuses on the shell accessibility (not the embedded app implementation).

• Keyboard navigation

  • Use Tab / Shift+Tab to move focus across shell controls
  • Confirm focus is visible and the order is logical
  • Confirm you can navigate into the embedded app (iframe) and back to shell controls

• Screen reader

  • macOS: enable VoiceOver (Cmd + F5)
  • Confirm shell controls are announced correctly and focus traversal behaves as expected

Demo videos

• Keyboard focus traversal

  Fallback link: assets/accessibility_kb_focus.mp4

• VoiceOver demo

  Fallback link: assets/accessibility_voice_over.mp4