reactjs / reactjs/react.dev

Accessibility: docs code examples/link styling is very confusing and has insufficient contrast

Aberta
#6,111 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

In the documentation, the styling is really confusing.

Here's an example, taken from the docs for createContext in dark mode, although the issue is present in light mode as well:

image

Here you can see:

  • a text link ("pass information deep down") which is blue and not underlined and has no background color
  • variables in source code, which are a similar shade of blue on a darker blue background, with a bottom box border, and aren't clickable
  • string values in source code, same as above but purple on purple
  • a concept in text ("context object"), variable width text, same colorations as source variables, not clickable
  • another concept ("default values") same as above but purple
  • a text link which is a function name (useContext()), blue monospaced text on a gray background

This assortment of similar-but-different color combinations is making it hard for me to read. Everything with a box bottom border looks like a link and I keep trying to click them out of habit that they're a crossreference. The use of blue and purple for "context object" and "default values" also add to the problem because they look like unvisited/visited links. At the very least, could you please consider changing either your source code highlights or your link color to be something drastically other than blue?

Running an accessibility checker on the pages also shows that many of the styles fail WCAG accessibility standards for text contrast.

image

Guia de contribuição

Abrir o guia de contribuição

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.

Direção de pesquisa

Comece revisando a página de documentação de createContext nos modos claro e escuro e, em seguida, execute um verificador de acessibilidade nos estilos relatados. A tarefa estará concluída quando links, valores de código e conceitos forem visualmente distinguíveis e os problemas de contraste de texto relatados atenderem aos requisitos do WCAG.

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

Avaliação

Domínio
accessibility, design, documentation
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

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