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

Aperta
  • Qualcosa non va?
#713 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
accessibility, frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
627
Fork
66
Merge medio
13h 57m
PR unite (30g)
194

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di voidzero-dev/void

Tutte le issue di voidzero-dev/void

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.