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

Ouverte
  • Quelque chose ne va pas ?
#713 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
72/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
accessibility, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
627
Forks
66
Merge moyen
13 h 57 min
PR mergées (30 j)
194

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de voidzero-dev/void

Toutes les issues de voidzero-dev/void

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.