TouchTargetEnforcer

Implemented

A11y utility wrapper (DS-CORR-08-10) enforcing the 44×44px tap-target floor (WCAG 2.5.5). Wraps any interactive child (button/a/label) in an inline-flex span using the --ep-tap-min CSS variable via tapTargetStyle; negative margins compensate so the wrapper never expands the visual footprint — it is purely a hit-area expander.

Categoryatoms

Sourcesrc/components/atoms/TouchTargetEnforcer/TouchTargetEnforcer.tsx

AI HintWrap small icon-only buttons and dense-table controls whose intrinsic size is below 44px. Leaves the child's visuals untouched.

A11y utility wrapper (DS-CORR-08-10) enforcing the 44×44 px tap-target floor (WCAG 2.5.5). Wraps any interactive child (button / a / label) in an inline-flex span using the --ep-tap-min CSS variable via tapTargetStyle; negative margins compensate so the wrapper never expands the visual footprint — it is purely a hit-area expander. FR-CA : « Garantit la zone de toucher 44×44 px sans modifier le visuel de l'enfant ».

TouchTargetEnforcer

Atom — A11y utility (Family 2: Display Atoms, DS-CORR-08-10)

Wrapper is `role="presentation"` (transparent in the a11y tree) and never `aria-hidden` (which would hide the focusable child — an axe aria-hidden-focus serious violation). Taps landing in the expanded margin are forwarded to the child via a synthetic `.click()`; clicks that already landed on the child itself are not re-dispatched. The child keeps its own keyboard activation path intact.

Counter: 024 px glyphe — zone de toucher 44×44 px

24 px natif — zone de toucher réelle 24×24 px

as="div" — enfant de niveau bloc

This component supports light and dark mode.

Props

Prop

Type

Default

Description

children*

React.ReactElement

—

Single interactive child (button / a / label). The wrapper requires exactly one DOM-root child at runtime; multi-root React trees are silently ignored by the forwarder.

as

'span' | 'div'

'span'

Wrapper tag. Use `'div'` when the child is block-level so the wrapper participates in the surrounding block layout.

className

string

''

Additional classes for the wrapper. Applied after the built-in `inline-flex items-center justify-center -m-2` cluster.

layoutCompensation

string

''

Tailwind margin fragments so the wrapper does not push surrounding layout. Pass an empty string when the child already supplies its own padding.

Props

Preview

TouchTargetEnforcer

Prop

Type

Required

Default

Description

children

React.ReactElement

Required

—

The interactive child to enlarge the hit-rectangle of

as

'span' | 'div'

Optional

'span'

Wrapper tag — use 'div' for block-level children

className

string

Optional

''

Additional classes for the wrapper

layoutCompensation

string

Optional

''

Tailwind margin fragments so the wrapper doesn't push surrounding layout

Quick use:<TouchTargetEnforcer />

Accessibility

ARIA rolepresentation (wrapper)

Usage

Import

tsxSnippet

import { TouchTargetEnforcer } from "@epasslive/design-system"

Example 1

tsxSnippet

<TouchTargetEnforcer><button aria-label="Close">×</button></TouchTargetEnforcer>