Add aria-labels to icon-only buttons across all tools
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 77/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Tranquilo
- Stack tecnológico
- react, typescript
- Área
- accessibility, frontend
Línea de trabajo
Empieza leyendo los componentes indicados: src/components/CopyButton.tsx, src/components/ui/ShareTool.tsx, src/components/ui/Themepicker.tsx y src/components/CommandPalette.tsx. Después, busca botones que solo tengan un icono en los componentes de herramientas. Añade valores descriptivos de aria-label a los botones sin texto visible. Ejecuta npm run lint y npm run typecheck y, a continuación, comprueba que cada botón afectado tenga una etiqueta que un lector de pantalla pueda anunciar.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Description
Several tools use icon-only buttons (copy, share, toggle) that lack proper aria-label attributes. This is important for screen reader accessibility.
What to do
- Search for icon-only buttons in
src/components/andsrc/components/tools/ - Add
aria-labelto any button that uses only an icon without visible text - Use descriptive labels like "Copy to clipboard", "Share result", "Toggle dark mode"
Files to check
src/components/CopyButton.tsxsrc/components/ui/ShareTool.tsxsrc/components/ui/Themepicker.tsxsrc/components/CommandPalette.tsx- Individual tool components with icon buttons
Example fix
// Before
<button onClick={copy}><Copy size={16} /></button>
// After
<button onClick={copy} aria-label="Copy to clipboard"><Copy size={16} /></button>
Verification
- Run
npm run lintandnpm run typecheck - Test with a screen reader (VoiceOver on Mac, NVDA on Windows)
- Lenguaje dominante
- TypeScript
- Estrellas
- 1
- Forks
- 3
- Merge medio
- 2 h 50 min
- PR fusionados (30 d)
- 3
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Sin 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 goldi0002/devtoolbox
-
enhancement good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
goldi0002/devtoolbox#94 ·
-
enhancement good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
goldi0002/devtoolbox#87 ·
-
enhancement good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
goldi0002/devtoolbox#86 ·
-
enhancement good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 77/100
goldi0002/devtoolbox#85 ·
-
enhancement good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
goldi0002/devtoolbox#81 ·
Todos los issues de goldi0002/devtoolbox
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
NousResearch/hermes-agent#147433 ·
Los mantenedores suelen responder en 1 día
-
needs-triage🔍
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100
Dokploy/dokploy#5836 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
guards: accept readonly arrays (and other array-likes) in isEmpty / hasElements / safeLengthAbiertoenhancement tech debt
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100
ehmpathy/rhachet-roles-bhrain#739 ·
Los mantenedores suelen responder en 1 día