Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

[react] Resolve violations for WCAG 2.2 a11y tool bump

Aberta
#12,558 2 comentários 1 reação 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 2 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
52/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
react, typescript

Direção de pesquisa

Comece executando as verificações de acessibilidade nos exemplos de componentes listados, concentrando-se nas violações de tamanho-alvo que envolvem Checkboxes, Radios, links e ações irmãos. Inspecione ClipboardCopy, Checkbox, Label, Truncate, os componentes de exemplo nomeados e CodeEditor; o trabalho estará concluído quando as violações de tamanho-alvo 2.2AA relatadas e as violações de contraste do tema claro do CodeEditor forem resolvidas.

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

Descrição

PF Team Stale

Describe the enhancement or change
Follow up to #12296

All reported 2.2AA errors are target-size violations. The common trend behind these errors is the placement of sibling Checkboxes and Radios in our examples.

Component issues:

  • ClipboardCopy: inline + compact clipboard copies that contain additional actions. Needs additional spacing between the internal copy action and additional actions, and possibly between additional actions as well.

  • Checkbox: sibling checkboxes. Needs additional spacing.

  • Label: the following needs additional spacing between actionable elements

    • All labels that are links or clickable with the close button
    • All compact labels (base, link, clickable) with the close button
    • Editable labels with the close button
  • Truncate: truncated links and sibling truncated links

Example-only target-size violations due to checkboxes/radios:

  • Card

  • CodeEditor

  • Drawer

  • FileUpload, both Single and Multiple

  • Modal

  • Progress

  • ProgressStepper

  • Popover

  • SearchInput

  • Select (templates tab)

  • Table (demos tab) - specifically demos contain truncated links

  • Tooltip

CodeEditor was also getting a couple contrast violations for the monaco text colors in light theme.


Jira Issue: PF-4439

Linguagem predominante
TypeScript
Estrelas
861
Forks
392
Merge médio
3d 6h
PRs com merge (30d)
11

Preparar o ambiente

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 patternfly/patternfly-react

Todas as issues de patternfly/patternfly-react

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.