patternfly / patternfly/patternfly-react
[react] Resolve violations for WCAG 2.2 a11y tool bump
Dieses Issue hat noch niemand übernommen.
- 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
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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