Improve Space Invaders responsive controls and gameplay accessibility

[Copilot]

Space Invaders now follows mobile-first control behavior: on-screen action buttons are available on touch-first devices (including tablets like iPad) and hidden on desktop where keyboard arrows/space are expected.
This update also improves in-game accessibility metadata and control guidance.

• Responsive control behavior

  • Hide .si-controls by default (desktop/mouse-first).
  • Show .si-controls only when the primary pointer is coarse (@media (pointer: coarse)), aligning with tablet/mobile UX.

• Gameplay accessibility improvements

  • Added semantic metadata to the battle canvas (role="img", localized aria-label, aria-describedby).
  • Added localized control hints under the canvas:
    • keyboard hint (desktop)
    • touch hint (mobile/tablet)
  • Added explicit accessible labels for control buttons (left / shoot / right / teleport).

• Localization updates

  • Added new battle.* strings in both locales for canvas labeling, control hints, and button labels:
    • canvasLabel, controlsKeyboardHint, controlsTouchHint, moveLeft, shoot, moveRight, teleport.

• Focused regression guard

  • Added a locale test to ensure all new accessibility/control keys exist and are non-empty in both en.json and es.json.

.si-controls { display: none; }

@media (pointer: coarse) {
  .si-controls { display: flex; }
}

https://github.com/user-attachments/assets/5559e4df-37db-4d00-a2e2-f0629a337955

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[github-actions]

Preview deployment

URL	https://pr-20.spacecraft-50l.pages.dev
Commit	af6374f
Status	Ready

Deployment updated on every push to this PR.

[Copilot]

Pull request overview

Updates Space Invaders’ UI to be more mobile-first by conditionally showing on-screen controls for touch devices, while improving accessibility metadata and adding localized control guidance.

Changes:

• Hide on-screen .si-controls by default and show them only for coarse pointers via a media query.
• Add accessibility attributes to the battle canvas and localized keyboard/touch control hints in the UI.
• Add new battle.* i18n strings (EN/ES) and a Vitest regression test to ensure required keys exist and are non-empty.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/i18n/locales/es.json	Adds Spanish battle.* strings for canvas labeling, hints, and button labels.
src/i18n/locales/en.json	Adds English battle.* strings for canvas labeling, hints, and button labels.
src/i18n/locales/battleAccessibility.test.ts	Adds a locale test to ensure required battle accessibility/control keys exist and are non-empty.
src/components/SpaceInvaders.tsx	Adds aria-* metadata to the canvas, renders localized control hints, and adds aria-labels to control buttons.
src/App.css	Implements responsive control visibility and hint switching for coarse-pointer devices.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

locale.battle?.[key]?.trim().length can throw if the key is missing or not a string: the optional chain only guards .trim(), but .length is still accessed on the result. This makes the test fail with a runtime TypeError instead of a clean assertion failure. Consider assigning the value to a variable, asserting it’s a string, and then calling trim()/length on the non-null value (or use optional chaining on length as well).

Suggested change

	expect(locale.battle?.[key]).toBeTypeOf('string');
	expect(locale.battle?.[key]?.trim().length).toBeGreaterThan(0);
	const value = locale.battle?.[key];
	expect(value).toBeTypeOf('string');
	if (typeof value === 'string') {
	expect(value.trim().length).toBeGreaterThan(0);
	}