Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

[react] Resolve violations for WCAG 2.2 a11y tool bump

Ouverte
#12,558 2 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
52/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript
Domaine
accessibility, frontend, testing

Piste de recherche

Commencez par exécuter les vérifications d’accessibilité sur les exemples de composants listés, en vous concentrant sur les violations de taille cible impliquant des Checkboxes, des Radios, des liens et des actions adjacents. Inspectez ClipboardCopy, Checkbox, Label, Truncate, les composants d’exemple nommés et CodeEditor ; le travail est terminé lorsque les violations de taille cible 2.2AA signalées et les violations de contraste du thème clair de CodeEditor sont résolues.

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

Description

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

Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
9

Guide de contribution

Ouvrir le guide de contribution

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

Toutes les issues de patternfly/patternfly-react

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.