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

ExternalLink component for the 16 hand-rolled "(opens in new tab)" links

Abierto
#167 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
74/100
Tipo de issue
Refactorización
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript

Línea de trabajo

Empieza en apps/web/src/components/ e inspecciona los 16 target links de AppFooter, AppHeader, ProjectCard, ActivityCard, LoginPlaceholder, Account, PersonDetail, ProjectDetail y Volunteer. Ejecuta las pruebas existentes de accessible-name y confirma después que todos los sitios usan el componente compartido y que las assertions siguen coincidiendo con el new-tab cue y con el comportamiento de target y rel.

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

Descripción

enhancement

Context

PR #157 added a new-tab cue to every target="_blank" link in apps/web: <span className="sr-only"> (opens in new tab)</span> where the link has visible text, or appended to the aria-label where it does not. That is 16 copies across 9 files (AppFooter, AppHeader, ProjectCard, ActivityCard, LoginPlaceholder, Account, PersonDetail, ProjectDetail, Volunteer).

Problem

The cue text, the rel="noopener noreferrer", and the target are re-typed at every site. A future link will forget one of them, and changing the wording (or adding a visual icon) means touching 16 places.

Proposal

An ExternalLink component in apps/web/src/components/ that takes href + children, sets target/rel, and appends the sr-only cue (or merges it into a supplied aria-label). Migrate the 16 sites; the existing accessible-name assertions in the test suite (regex matchers on /\(opens in new tab\)$/) cover the migration.

Deferred from plans/a11y-mechanical.md (PR #157).

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
11 min
PR fusionados (30 d)
22

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

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 CodeForPhilly/codeforphilly-ng

Todos los issues de CodeForPhilly/codeforphilly-ng

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.