patternfly / patternfly/patternfly-react
[react] Resolve violations for WCAG 2.2 a11y tool bump
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 862
- Fork
- 392
- Merge medio
- 4g 8h
- PR unite (30g)
- 9
Descrizione
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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia eseguendo i controlli di accessibilità sugli esempi dei componenti elencati, concentrandoti sulle violazioni delle dimensioni target che coinvolgono Checkboxes, Radios, link e azioni adiacenti. Esamina ClipboardCopy, Checkbox, Label, Truncate, i componenti di esempio nominati e CodeEditor; il lavoro è completato quando vengono risolte le violazioni delle dimensioni target 2.2AA segnalate e le violazioni del contrasto del tema chiaro di CodeEditor.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- accessibility, frontend, testing
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Attiva
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 52/100