Skip to content

[react] Resolve violations for WCAG 2.2 a11y tool bump #12558

Description

@kmcfaul

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Fields

    No fields configured for Tech debt.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions