Repository navigation
[react] Resolve violations for WCAG 2.2 a11y tool bump #12558
Description
Activity
🔗 Related PRs
#12365 - chore(ArrowRightIcon): Update any uses of FA arrow right icon to RH brand arrow right icon [merged]
#12368 - chore(CaretDownIcon): Replace all usages of CaretDownIcon with RhUiCaretDownIcon [merged]
#12449 - fix(CopyIcon): Replace CopyIcon with RhUiCopyFillIcon [merged]
#12518 - fix(CheckIcon): Replace CheckIcon with RhMicronsCheckmarkIcon [merged]
#12560 - fix(a11y): ignore target-size rule to allow WCAG 2.2 bump [open]
📝 Issue Planner
Check the box below or use the
@coderabbitai plancommand to generate an implementation plan and prompts that you can use with your favorite coding assistant.- Create Plan
🧪 Issue enrichment is currently in open beta.
You can configure auto-planning by selecting labels in the issue_enrichment configuration.
To disable automatic issue enrichment, add the following to your
.coderabbit.yaml:issue_enrichment: auto_enrich: enabled: false
💬 Have feedback or questions? Drop into our discord!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Describe the enhancement or change
Follow up to #12296
All reported 2.2AA errors are
target-sizeviolations. 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
Truncate: truncated links and sibling truncated links
Example-only
target-sizeviolations 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