graphics-3d: accessible DOM mirror for 3D objects

Aberta
  • Algo errado?
#457 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
45/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
three.js, typescript
Domínio
accessibility, frontend

Direção de pesquisa

Start with docs/docs/lib-graphic-3d/index.mdx and inspect the graphics-3d package’s tick, ctx.graphics.worldToScreen, and __clear entry points. Check how components-systems defines ECS components before deciding where the API belongs. Done means an opt-in DOM mirror supports positioning, keyboard focus and activation, and cleanup, with tests and documentation covering those behaviors.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

enhancement modules:graphics-3d
Which package or utils is this feature request for?

graphics-3d

Feature

Three.js draws everything into a canvas. Screen readers and keyboard navigation (Tab, Enter) cannot reach the objects of a 3D scene, so a game made with @nanoforge-dev/graphics-3d is not accessible to blind or keyboard-only players (benchmark criterion E2, scored ❌ for Three.js).

Ideal solution or implementation

An opt-in way to mirror a 3D object as a hidden DOM element:

  • data: a label, an ARIA role (button, img…), and whether it is focusable;
  • each tick, the element is positioned over the object with ctx.graphics.worldToScreen, inside the game container (in container.ownerDocument, so pop-out keeps working);
  • focus and Enter/Space are forwarded to game code (a callback or an event);
  • the element is hidden visually but not from assistive tech, and removed on __clear.

If the API is an ECS component (e.g. Accessible3D(label, role, focusable)), it belongs in components-systems, and the library only provides the positioning helper.

Small, documented, and tested (positioning, focus, cleanup).

Alternative solutions or implementations

Babylon's @babylonjs/accessibility does the same thing with a DOM tree mirrored from the scene. We could port the idea instead of the code.

Other context

Deferred from the first version of graphics-3d. See docs/docs/lib-graphic-3d/index.mdx (E2).

Linguagem predominante
TypeScript
Estrelas
7
Forks
2
Merge médio
1d 17h
PRs com merge (30d)
17

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de NanoForge-dev/Engine

Todas as issues de NanoForge-dev/Engine

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.