VenueAccessMap
ImplementedAccessibility wayfinding figure: gridded 16:10 plan with positioned, colour-coded markers for five access kinds (wheelchair, hearing-loop, guide-dog, ramp, elevator), each announced via role=img labels, plus a legend list with details. Bilingual FR/EN inline literals via `locale` (FR default). Static presentational organism — no interactivity.
components/organisms/venueaccessmap/VenueAccessMap.tsxPlan d'accessibilité d'une salle (fauteuil roulant, boucle magnétique, chien guide, rampe, ascenseur). FR-CA : « Plan d'accessibilité — Place des Festivals · Accès fauteuil roulant · Boucle magnétique · Chien guide bienvenu · Rampe d'accès · Ascenseur ».
VenueAccessMap
Organism — Event family (Family 2)
Carte (grille 8×5) avec pastilles de couleur pour chaque point d'accessibilité, coordonnées en pourcentage. Chaque pastille porte un aria-label détaillé et la légende en dessous est cohérente.
- Porte A — Est — Accès fauteuil roulant (rampe + ascenseur)
- Porte B — Ouest — Accès fauteuil roulant (rampe)
- Boucle magnétique — secteur nord — Boucle magnétique
- Boucle magnétique — secteur sud — Boucle magnétique
- Chiens guides bienvenus — Chien guide bienvenu
- Rampe principale — Rampe d'accès
- Ascenseur — hall central — Ascenseur
This component supports light and dark mode.
Props
venueName*stringNom du lieu.
points*AccessPoint[]Points d'accessibilité {id, label, kind, x, y, detail?}.
locale'fr' | 'en'frBascule des libellés des types.
classNamestringClasse additionnelle sur le <figure> racine.
Props
VenueAccessMap
venueNamestring—Venue name shown in the figcaption and the figure aria-label.
pointsAccessPoint[]—Access points rendered as colour-coded markers + legend rows. AccessPoint carries id, label, kind (wheelchair | hearing-loop | guide-dog | ramp | elevator), x/y (0-100 grid coordinates, clamped), optional detail.
locale"fr" | "en"'fr'Selects the built-in bilingual literals (caption, kind labels, marker aria-labels). FR default.
classNamestring—Optional class appended to the root <figure>.
<VenueAccessMap />Accessibility
Type
1 ruleARIA
1 ruleUsage
Import
import { VenueAccessMap } from "@epasslive/design-system"Example 1
<VenueAccessMap venueName="Salle Wilfrid-Pelletier" points={points} />Example 2
<VenueAccessMap venueName="Hangar 16" points={points} locale="en" />Anti-patterns
— Do not add interactive selection to this figure; build a separate interactive organism
— Do not fetch data directly in organisms