patternfly / patternfly/patternfly-react

[react] Resolve violations for WCAG 2.2 a11y tool bump

Offen
#12,558 2 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

PF Team Stale
Vorherrschende Sprache
TypeScript
Sterne
862
Forks
392
Ø Merge
4 T. 8 Std.
Gemergte PRs (30 T.)
9

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, die Barrierefreiheitsprüfungen gegen die aufgeführten Komponentenbeispiele auszuführen, mit Fokus auf Zielgrößenverletzungen bei benachbarten Checkboxes, Radios, Links und Aktionen. Untersuche ClipboardCopy, Checkbox, Label, Truncate, die genannten Beispielkomponenten und CodeEditor; die Arbeit ist abgeschlossen, wenn die gemeldeten 2.2AA-Zielgrößenverletzungen und die Kontrastverletzungen des hellen Themes von CodeEditor behoben sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
accessibility, frontend, testing
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
52/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.