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

Aberta
  • Algo errado?
#713 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
72/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
accessibility, frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
627
Forks
66
Merge médio
13h 57min
PRs com merge (30d)
194

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de voidzero-dev/void

Todas as issues de voidzero-dev/void

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.