fix: QuestionContainer has no timeout handler and the timer isn't announced

[Mkalbani]

File: src/components/gameplay/QuestionContainer.tsx + src/components/gameplay/Question.tsx

Problem

• When timeLeft reaches 0, the interval stops but nothing else happens — no auto-submit, no failure state, no toast.
• The countdown timer has no role="timer" / aria-live="polite", so screen-reader users get no warning that time is running out.

Expected

• Add a handler for the timeLeft === 0 case that:
  • Auto-submits as incorrect (or whatever the game design decides)
  • Triggers the existing game-over modal in Gameplay.tsx
• Wrap the visible timer in <span role="timer" aria-live="polite" aria-atomic="true"> so AT users hear updates.
• When ≤30s remain, expose a prefers-reduced-motion-safe pulse / color change (already partially styled via Time Warning Alert setting — use it).

Acceptance

• Running the clock down ends the level/game via the same flow as a wrong answer.
• Screen readers announce remaining time.

[keljoshX]

Hi, can i be assigned to this?

[jesutobaadedejidev]

I want to work on this issue. Do assign it to me.

[dotmantissa]

Please, assign this task to me.
I estimate I'll have a PR ready in about 4 hours.

[DTriple-p]

Hi I'd like to work on this issue.

[gloskull]

Can i work on this?

[grantfox-oss]

🦊 GrantFox — @gloskull has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #120)
2. Your PR will be reviewed by the MindFlowInteractive maintainers

Good luck! Track your progress on GrantFox.

[Mkalbani]

@gloskull this isnt' part of the wave. Please apply to another and let me know. apologies for any inconvenience.

[enochakinbode]

@enochakinbode has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I’d like to work on this because it improves both gameplay flow and accessibility, and I’m comfortable handling React state, timers, and screen-reader-friendly UI behavior.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @enochakinbode to this issue.

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer. I am Nacho, a full-stack developer, and I would like to work on this issue.

I have experience building React and TypeScript applications with a focus on state management, accessibility, and creating reliable user interactions. This issue is a great fit for my experience because it combines game logic, accessibility improvements, and consistent user flow.

For this issue, I will implement a proper timeout handler so that when timeLeft reaches zero, the question is automatically submitted as incorrect (or according to the project's intended game logic) and the existing game-over flow in Gameplay.tsx is triggered. I will also improve accessibility by marking the countdown with role="timer" and aria-live="polite" so screen reader users receive timely updates. In addition, I will enhance the visual warning for the final 30 seconds using the existing Time Warning Alert behavior while respecting prefers reduced motion for users who have reduced motion enabled.

I will ensure the timeout behavior follows the same flow as an incorrect answer, verify that assistive technologies announce the remaining time correctly, and thoroughly test the implementation before submitting a PR.

I would appreciate the opportunity to contribute. Thank you for your consideration!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[Adeswalla]

@Adeswalla has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer,
I would like to apply for this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Adeswalla to this issue.