Accessibility: Add aria-live region for filter result announcements
Los mantenedores suelen responder en 1 día
Ya se ha fusionado un pull request relacionado.
- #48 de @aipd506 — fusionado
Evaluación
- Dificultad
- 1/5
- Tiempo estimado
- Menos de una hora
- Aptitud para principiantes
- 94/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- react, typescript
- Área
- accessibility, frontend
Línea de trabajo
Abre src/components/directory/directory-client.tsx e inspecciona la lógica de actualización del filtro alrededor de las líneas 197-210 y el encabezado de resultados alrededor de las líneas 486-490. Añade la región live polite especificada cerca del recuento de resultados y, después, verifica que el filtrado anuncie “X offers found” y que un resultado vacío anuncie “No offers found”.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Description
When users apply filters on the directory page, the result count updates visually but screen readers don't announce the change. Adding an aria-live region would make filter changes accessible.
Current State
- Filter results update in
src/components/directory/directory-client.tsx(line 197-210) - Result count displayed at line 487-489:
{filtered.length} offers - No
aria-liveregion for dynamic content updates
Expected Behavior
When filters change and results update, screen readers should announce:
- "X offers found" or "No offers found"
- This helps users who rely on assistive technology
Good First Issue Because
- Small, focused accessibility improvement
- Follows WCAG 2.1 AA guidelines (PRD §10)
- Good introduction to accessibility patterns in React
- Single component change
Files to Modify
src/components/directory/directory-client.tsx
Implementation Approach
Add an aria-live="polite" region that updates with the result count:
<div aria-live="polite" className="sr-only">
{filtered.length === 0 ? "No offers found" : `${filtered.length} offers found`}
</div>
Place this near the results header (around line 486-490).
- Lenguaje dominante
- TypeScript
- Estrellas
- 1
- Forks
- 6
- Merge medio
- 13 h 18 min
- PR fusionados (30 d)
- 18
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de Your-Voldemort/StudentStack
-
SSRF: weekly link-health cron server-side-fetches arbitrary attacker-controlled URLs (unmoderated submissions included)Posiblemente ocupada @rootsiemen la tomó hace 1 día. Abierto
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
Your-Voldemort/StudentStack#88 ·
Los mantenedores suelen responder en 1 día
-
enhancement
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
Your-Voldemort/StudentStack#84 ·
Los mantenedores suelen responder en 1 día
-
enhancement
Dificultad 5/5 Más de una semana Aptitud para principiantes 18/100
Your-Voldemort/StudentStack#83 ·
Los mantenedores suelen responder en 1 día
-
enhancement
Dificultad 5/5 Más de una semana Aptitud para principiantes 12/100
Your-Voldemort/StudentStack#82 ·
Los mantenedores suelen responder en 1 día
-
enhancement
Dificultad 3/5 1-2 días Aptitud para principiantes 50/100
Your-Voldemort/StudentStack#81 ·
Los mantenedores suelen responder en 1 día
Todos los issues de Your-Voldemort/StudentStack
Issues similares
-
area:security documentation effort:S priority:P2
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
Los mantenedores suelen responder en 1 día
-
app:web meta:ops
Dificultad 2/5 Medio día Aptitud para principiantes 78/100
osu-tournament-rating/otr#1113 ·
Los mantenedores suelen responder en 1 día
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
typegoose/mongodb-memory-server#1040 ·
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 92/100