Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Accessibility rough edges in custom (non-Base-UI) components

Cerrado
  • ¿Algo no está bien?
#878 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 2 días

@rohanchkrabrty ya está trabajando en esto.

Desde el 29/9/2026.

  • #929 de @rohanchkrabrty — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Comienza con command-item.tsx:65-81 para entender por qué las opciones deshabilitadas quedan fuera de la navegación por teclado de Autocomplete. Después inspecciona data-view/components/search.tsx, ordering.tsx, menu/menu-content.tsx, context-menu/context-menu-content.tsx y los módulos CSS de dialog y tooltip. Se considera completado cuando los componentes específicos enumerados proporcionen acceso mediante teclado, anuncios de filtros/resultados, un comportamiento robusto del bridge y estilos focus-visible explícitos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug global

Summary

Components built directly on Base UI primitives (Dialog, Select, Tabs, Checkbox, Switch, Tooltip) get keyboard nav, focus trap/restore, and roles for free and look solid. The gaps are in components with hand-rolled behavior.

Issues found

  1. Command: disabled items are unreachable by keyboard. command-item.tsx:65-81 renders disabled items as a raw <div role='option' aria-disabled> outside the Autocomplete primitive, with an existing TODO acknowledging it's a workaround ("Fix this when Base UI fixes this issue"). This item isn't reachable by the primitive's own roving keyboard navigation.

  2. Menu/ContextMenu bridge keyboard nav with a synthetic-event hack. menu/menu-content.tsx:60-96 (mirrored in context-menu/context-menu-content.tsx:61-92) calls dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT/ESCAPE) against querySelectorAll('[role="option"]') to bridge two primitives. Fragile — depends on synthetic event dispatch working the same as real keyboard input.

  3. DataView doesn't announce filter/result changes. data-view/components/search.tsx and ordering.tsx have no aria-live/aria-expanded when filter or result counts change. Screen reader users get no feedback when a filter narrows the list.

  4. Missing :focus-visible rules in Dialog and Tooltip CSS. Confirmed zero matches for focus-visible in dialog/*.module.css or tooltip/*.module.css, vs. 52 matches across 29 other component .module.css files. May look fine today via inherited/default browser focus styling, but isn't explicit.

Suggested approach

Priority order: fix #1 first (keyboard-unreachable content is the most severe — a real WCAG failure), then #3 (DataView live regions), then #2 and #4.

Notes

Found via a components.build practices audit (accessibility dimension). Base-UI-backed primitives were not found to have equivalent issues — this is isolated to bespoke composite components.

Lenguaje dominante
TypeScript
Estrellas
69
Forks
13
Merge medio
3 d 15 h
PR fusionados (30 d)
24

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de raystack/apsara

Todos los issues de raystack/apsara

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.