`Link` marks links to the same page with a different query as `aria-current="page"`

Abierto
  • ¿Algo no está bien?
#713 1 comentario 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
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
accessibility, frontend

Línea de trabajo

Start by locating linkActiveAttributes() and the tests for Link active state. Read how it compares the target and current URLs, then check cases with query parameters, reordered parameters, extra current parameters, and links without a query. Done when query-bearing links are marked current only when their parameters match, while query-free menu links retain the described behavior.

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

Descripción

Since #676, Link adds aria-current="page" and data-void-active when its destination is the current page. linkActiveAttributes() compares only the pathname ("The query and hash are ignored"). So a link that changes only the query is marked as the current page, even though it leads somewhere else.

Repro (Void 1.6.1)

On /posts?page=2:

<Link href="/posts?page=1">Previous</Link>
<Link href="/posts?page=3">Next</Link>

Both render with aria-current="page" and data-void-active. Screen readers announce "Previous, current page" and "Next, current page". The same happens with any links that change only the query: pagination, previous/next date ranges, sort and filter tabs. A GET link's data merged into its query has the same issue.

Expected

A link whose href has a query is current only when that query matches the current URL. The page itself (/posts?page=2) is the current page; the other two links aren't.

Ignoring the query is still right for links without one. A menu link to /posts should stay current on /posts?page=2 or /posts?sort=new, so that part of the behaviour should stay.

Suggested fix

In linkActiveAttributes(), when the target has a query, also require each of its params to have the same value in the current URL:

const queryMatches = [...target.searchParams].every(
  ([key, value]) => current.searchParams.getAll(key).includes(value),
);
if (linkPath === currentPath && queryMatches) return { 'aria-current': 'page', 'data-void-active': '' };

Comparing params one by one, instead of the raw search string, means param order doesn't matter. It also keeps a tab link like ?status=open current on ?status=open&page=2. A stricter rule, the whole query must match, would work too.

Another option is a way to opt out, such as activeMatch={false}, though fixing the default is better: most apps won't know their pagination links are announced wrong.

Workaround

Pass aria-current={undefined} on those links, since user attributes win. data-void-active still stays on them.

Lenguaje dominante
TypeScript
Estrellas
627
Forks
66
Merge medio
13 h 57 min
PR fusionados (30 d)
194

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: 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 voidzero-dev/void

Todos los issues de voidzero-dev/void

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.