Skip to content

♿ improve homepage accessibility by fixing aria children issue #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jcailly wants to merge 2 commits into
base: master
Choose a base branch
from
+31 −10
Open

♿ improve homepage accessibility by fixing aria children issue #337

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db48bfa
♿ improve pageswitcher accessibility
jcailly Jul 17, 2025
64259bd
🎨 add arialabelledby to customer and visitor tabscontent in pageswitcher
jcailly Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions src/components/marketing/landing/page-switcher/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,53 @@
"use client";

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import Routes from "@/constants/routes";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";

const PageSwitcher: React.FC = () => {
const pathname = usePathname();
const router = useRouter();

const handleTabChange = (value: string) => {
router.push(value === "customer"
? Routes.landing.customer
: Routes.landing.visitor);
};

return (
<div className="w-full fixed bottom-6 select-none">
<Tabs
defaultValue=""
value={pathname.replace("/", "")}
onValueChange={handleTabChange}
Copy link
Member

@jerembdn jerembdn Jul 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@jcailly jcailly Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ?

className="w-fit mx-auto"
>
<TabsList className="grid w-full grid-cols-2 bg-background/50 shadow-xs backdrop-blur-2xl">
<Link href={Routes.landing.customer} scroll={false}>
<TabsTrigger value="customer">
<TabsList className="grid grid-cols-2 bg-background/50 shadow-xs backdrop-blur-2xl">
{/*
Customer tab trigger:
- value must match the TabsContent to show
- id and aria-controls for accessibility
*/}
<TabsTrigger value="customer" id="tab-trigger-customer" aria-controls="tab-content-customer">
<Link href={Routes.landing.customer} className="block w-full h-full">
Je suis un potentiel client
</TabsTrigger>
</Link>
</Link>
</TabsTrigger>

<Link href={Routes.landing.visitor} scroll={false}>
<TabsTrigger value="">Je suis un simple visiteur</TabsTrigger>
</Link>
<TabsTrigger value="" id="tab-trigger-visitor" aria-controls="tab-content-visitor">
<Link href={Routes.landing.visitor} className="block w-full h-full">
Je suis un simple visiteur
</Link>
</TabsTrigger>
</TabsList>
{/*
Corresponding content panels for each tab.
They are empty since actual content is rendered elsewhere.
*/}
<TabsContent value="customer" id="tab-content-customer" aria-labelledby="tab-trigger-customer"/>
<TabsContent value="" id="tab-content-visitor" aria-labelledby="tab-trigger-visitor"/>
</Tabs>
</div>
);
Expand Down