♿ improve homepage accessibility by fixing aria children issue

[jcailly]

This modification fix accessibility issue in Lighthouse audit test for PageSwitcher

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 20 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 16 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 12 minutes (more than 100, code: "api-deployments-free-per-day").

[jerembdn]

Alors c'est plutot étrange de faire cela sachant que tu as encore les Link avec un href=Routes.machin, ce qui envoie l'utilisateur 2 fois sur la page.
Et de mon coté je préfère garder les liens plutot que un callback avec le router.

[jcailly]

Effectivement, c'est une erreur de ma part, je n'ai pas retiré l'ancienne méthode que j'avais utilisé.
J'ai besoin d'un avis, j'ai quatre méthodes imparfaites à proposer pour régler les soucis d'accessibilités dans cette PR :

• Soit je passe par un handleChange comme j'avais fait au début, ce qui résous tous les audits d'accessibilité sur ce component mais créer visiblement de l'obfuscation
• Soit je passe par un Link à l'intérieur des TabTrigger mais il subsiste un défaut de Touch target
• Soit je passe par un Link à l'intérieur des TabTrigger et j'applique une value asChild aux TabTrigger mais cela créer un soucis d'hydration
• Soit je passe par un Link à l'intérieur des TabTrigger et je lui met une class min-h-[36px] ce qui résous le souci de touch target mais modifie le design du button.

Une préférence entre ces 4 propositions ?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onruntime-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2025 8:58am

[Copilot]

Pull Request Overview

This PR fixes an accessibility issue in the PageSwitcher component by ensuring proper ARIA relationships between tab triggers and their corresponding content panels, and it adds programmatic navigation for tab changes.

• Added TabsContent panels with matching id and aria-controls
• Introduced onValueChange handler using Next.js router for tab navigation
• Refactored TabsTrigger markup to include id and aria-controls

Comments suppressed due to low confidence (2)

src/components/marketing/landing/page-switcher/index.tsx:39

• [nitpick] Using an empty string for the visitor tab value can be ambiguous. Consider using a descriptive identifier (e.g., "visitor") to improve clarity and consistency.

          <TabsTrigger value="" id="tab-trigger-visitor" aria-controls="tab-content-visitor">

src/components/marketing/landing/page-switcher/index.tsx:24

• Add tests to verify that onValueChange correctly navigates to the intended route and that all ARIA attributes (id, aria-controls, aria-labelledby) are present and correct for each tab and panel.

        onValueChange={handleTabChange}