test: refactor e2e gift card tests

[itsjustriley]

Part of https://github.com/Shopify/developer-tools-team/issues/1075

Referring to Freddie's example test, this refactors e2e gift card tests .

Note: duplicates some of freddie's work (skeleton accessibility updates, base utils) so will need to be rebased

To validate tests pass locally: npx playwright test e2e/specs/skeleton/giftCards.spec.ts (use --ui flag if desired)

[shopify]

Oxygen deployed a preview of your refactor-skeleton-gift-cards branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	March 4, 2026 2:14 PM

Learn more about Hydrogen's GitHub integration.

[binks-code-reviewer]

🤖 Code Review · #projects-dev-ai for questions
React with 👍/👎 or reply — all feedback helps improve the agent.

✅ Complete - No issues

📋 History

✅ 1 findings → ✅ 1 findings → ✅ No issues

[itsjustriley]

All review feedback addressed! 🎉

Blocking items - ✅ All fixed

1. aria-labelledby broken reference → Changed to <section aria-label="Gift cards">
2. Missing changeset with cli-hydrogen → Changeset includes both packages
3. role="group" on <dd> degrades semantics → Removed, using native semantics
4. Duplicate aria-labels on Remove buttons → Each button now has unique label with last 4 digits
5. Hardcoded IDs → Migrated to useId() for all IDs
6. assertCardRemoved uses not.toBeVisible() → Changed to toHaveCount(0)
7. assertNoGiftCards should use count → Changed to toHaveCount(0)

Non-blocking items - ✅ All addressed

8. Non-null assertion in useEffect → Fixed with proper null check
9. Missing comment about invalid code UX → Institutional knowledge comment restored
10. No aria-live announcement → Added aria-live="polite" region with status messages In tophatting, these were indicating success no matter what. I've left them for now, worth a follow-up.
11. No focus management on Remove → Implemented WCAG 2.4.3-compliant focus handling
12. Invalid HTML: <form> inside <dl> → Fixed by moving button into RemoveGiftCardForm
13. applyCode vs tryApplyCode duplication → Consolidated into single applyCode method
14. Test reaches into page directly → Added assertCardHasAmount utility method

Key improvements

• Accessibility: Screen readers now announce all gift card actions (apply success, apply failure, remove)
• Keyboard navigation: Focus properly managed when removing cards (moves to next card or input)
• Semantic HTML: All elements use proper roles, no unnecessary overrides
• Test maintainability: Removed duplication, better encapsulation in test utilities
• Valid HTML: Proper nesting of definition list elements and forms

All changes are staged and ready for final review!