[a11y]: Breadcrumb with single-character link names fails WCAG 2.2 target size

[warrenmblood]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.81.0

React version

No response

Automated testing tool and ruleset

N/A

Assistive technology

No response

Description

When Breadcrumb size is set to small and more than one adjacent links are named with a single character, WCAG 2.2 requirement for target size will fail because two interactive elements do not have sufficient spacing. I noticed this will not fail in the WC version as the margin after the link name is 8px, whereas in React version the margin decreases to 4px for small size

WCAG 2.1 Violation

WCAG 2.2: 2.5.8 Target Size (Minimum)

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--default&args=size:sm

Steps to reproduce

1. Go to Breadcrumb React storybook: https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--default&args=size:sm
2. Set size=small in Controls
3. Change the names of two adjacent breadcrumb items to a single character (i.e. numbers)
4. Inspect the spacing between the breadcrumb items. Per WCAG 2.2 guidelines, undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems